如何使用jQuery验证文本框输入值是否为100的倍数

Let's adjust your existing code to add the validation check for whether the input value is a multiple of 100. I'll also clean up duplicate event bindings and add clear, user-friendly feedback.

Full Working Code #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input class="col-md-6 redeem_input" type="text" name="enter_amt" id="input1" maxlength="5">

<!-- Elements to display calculations and validation feedback -->
<div id="log"></div>
<div id="percentage1"></div>
<div id="validation-note"></div>

<script>
$("#input1").keyup(function() {
    var inputVal = $(this).val().trim();
    // Sanitize input: convert to number or default to 0 if invalid
    var value = !isNaN(inputVal) ? parseInt(inputVal, 10) : 0;
    
    // Your existing calculation logic
    var value1 = value * 0.1;
    var value2 = Math.round(value1);
    
    // Update your original display elements
    $("#log,#log1").text(value);
    $("#percentage1").text(value2);
    
    // Core validation: check if value is a positive multiple of 100
    var isValidMultiple = value > 0 && value % 100 === 0;
    
    // Show targeted feedback to the user
    if (inputVal === "") {
        $("#validation-note").text("Please enter an amount").css("color", "#666");
    } else if (!isNaN(inputVal) && !isValidMultiple) {
        $("#validation-note").text("* Amount must be a multiple of 100").css("color", "#dc3545");
    } else if (isValidMultiple) {
        $("#validation-note").text("Valid amount (multiple of 100)").css("color", "#28a745");
    } else {
        $("#validation-note").text("* Please enter a valid number").css("color", "#dc3545");
    }
}).keyup(); // Trigger initial calculation when the page loads
</script>

Key Changes & Explanations #

• Input Sanitization: We trim whitespace and validate if the input is a valid number first, which prevents errors from non-numeric entries.
• 100-Multiple Check: The validation uses the modulus operator % — if value % 100 === 0 (and the value is greater than 0 to exclude 0), it's a valid multiple of 100.
• Clear User Feedback: A dedicated #validation-note element shows color-coded messages for different scenarios (empty input, invalid number, invalid multiple, valid input).
• Removed Duplicate Bindings: The inline onkeyup attribute from your original input is removed to avoid conflicting event handlers — all logic lives in the jQuery keyup function.

Optional: Restrict to Numeric Input Only #

If you want to prevent non-digit characters from being entered entirely, add this line inside the keyup handler:

$(this).val($(this).val().replace(/\D/g, ''));

This will automatically strip any non-numeric characters as the user types.

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