javascript - 接受值 100 及以上的文本框

Question

这是我的文本框:

这是它的代码:

        <!-- Preferred credit limit --> 
        <div class="signup-card-section">
            <h2 class="accordion-header boldtext">Tell Us Your Preferred Credit Limit</h2>
            <div class="column-control no-padding twelve colgrid">
                <fieldset>
                    <div class="row">
                        <p class="text-red">(Choose one)</p>
                        <p>My Preferred Credit Limit<span class="text-red">*</span></p>
                        <br>
                        <input type="radio" name="prefcreditlimit" checked="checked" value="yesprefcreditlimit" id="yesprefcreditlimit"> 
                        <span class="radiotextdeco">S$</span> <input type="text" class="input numeric-only nodecimal width30" name="prefcreditlimitval" id="prefcreditlimit" min="100"> <span style="font-size:12px;"> (Must be in multiples of 00’ and a minimum of S$100)</span><br><br>
                        <input type="radio" name="prefcreditlimit" checked="checked" value="noprefcreditlimit"> <span class="radiotextdeco">I dont have a preferred credit limit and agree to any credit limit determined</span><br><br>
                        <p><strong>Note:</strong> Principal applicant and Suplementary applicant will be granted the preferred credit limit of any limit determined by the bank, whichever is lower.</p>
                    </div>
                </fieldset>
            </div>
        </div>

如果输入的值不是 00 的倍数或最低 100 新元，则会出现错误消息:“您的首选信用额度必须是 00 的倍数和最低 100 新元。因为我将最小值设置为 100。当用户输入小于 100 时会出现一条错误消息。现在的问题是，我不确定如何检查 00 的验证

如有任何帮助，我们将不胜感激。

Answer 1

使用 <input type="number">连同 min和 step属性:

<input type="number" name="prefcreditlimitval" min="100" step="100">

如果用户输入的值小于最小值或不是步长的倍数，浏览器的验证将阻止提交表单。在不支持验证的浏览器中，您可以使用 polyfill(如 this one )。

您可以测试验证(尽管 SO 不允许运行表单):

input:invalid {
    border-color: red;
}

Input multiples of 100<br><br>
<input type="number" name="test" min="100" step="100">