jQuery金额验证需求：禁止千位数值+自动转两位小数+输入长度限制

Hey there! Let's work through your jQuery input formatting and validation needs. Here's a complete solution that covers all your requirements: limiting values to under 1000, auto-formatting to two decimal places, restricting input to 6 characters max, and showing error messages for invalid entries.

Step 1: HTML Structure #

First, set up your input field and an error message container:

<input type="text" id="numberInput" placeholder="Enter a number (max 999.99)">
<div id="errorMsg" style="color: #dc3545; margin-top: 8px; display: none;">
  Invalid input! Please enter a number less than 1000 (max 6 characters).
</div>

Step 2: jQuery Logic #

This code will handle real-time input filtering, validation, formatting, and error feedback:

$(document).ready(function() {
  const $inputField = $('#numberInput');
  const $errorDisplay = $('#errorMsg');

  // Handle real-time input changes
  $inputField.on('input', function() {
    let inputValue = $(this).val().trim();

    // 1. Filter out invalid characters (only keep digits and one decimal point)
    inputValue = inputValue.replace(/[^0-9.]/g, '');
    inputValue = inputValue.replace(/(\..*)\./g, '$1'); // Ensure only one decimal exists

    // 2. Enforce maximum 6 character limit
    if (inputValue.length > 6) {
      inputValue = inputValue.slice(0, 6);
    }

    // 3. Validate numeric range (must be < 1000)
    const numericValue = parseFloat(inputValue);
    let isInputValid = true;

    if (!isNaN(numericValue)) {
      isInputValid = numericValue < 1000;
    } else if (inputValue !== '') {
      isInputValid = false; // Catch invalid non-numeric input (rare after filtering)
    }

    // 4. Apply formatting or show error
    if (isInputValid && inputValue !== '') {
      // Format to two decimal places
      const formattedValue = numericValue.toFixed(2);
      $(this).val(formattedValue);
      $errorDisplay.hide();
    } else {
      // Show error only if input isn't empty
      inputValue === '' ? $errorDisplay.hide() : $errorDisplay.show();
    }
  });

  // Optional: Final validation on blur (when user leaves the input)
  $inputField.on('blur', function() {
    const inputValue = $(this).val().trim();
    if (inputValue === '') return;

    const numericValue = parseFloat(inputValue);
    if (!isNaN(numericValue) && numericValue < 1000) {
      $(this).val(numericValue.toFixed(2));
      $errorDisplay.hide();
    } else {
      $errorDisplay.show();
    }
  });
});

Key Features Explained #

• Invalid Character Filtering: Regex patterns strip out non-digit characters and ensure only one decimal point is allowed.
• Character Limit: Input is truncated to 6 characters to meet your requirement.
• Range Validation: Values 1000 or higher trigger an error message.
• Auto-Formatting: Valid numbers are automatically converted to two decimal places (e.g., 15 becomes 15.00, 150.1 becomes 150.10).
• Error Feedback: The error message only shows when invalid input is present (empty input won't trigger it).

Test Cases to Verify #

• Enter 1 → Auto-formats to 1.00
• Enter 150.1 → Auto-formats to 150.10
• Enter 999.99 → Stays as 999.99 (valid)
• Enter 1000 → Shows error message
• Enter 123456 → Truncated to 123456 but triggers error (since it's >999)
• Enter non-numeric characters → They're automatically removed

内容的提问来源于stack exchange，提问作者Chandan