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'的倍数或最小值为S $ 100，则会出现错误消息：“您的首选信用额度必须是00的倍数”且最低为100新元。由于我将最小值设置为100.当用户输入少于100时，会出现错误消息。现在问题是，我不确定如何检查00＆＃39;

任何帮助都将不胜感激。

Answer 1

使用<input type="number">以及min和step属性：

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

如果用户输入的值低于min或不是step的倍数，则浏览器的验证将阻止提交表单。在不支持验证的浏览器中，您可以使用polyfill（如this one）。

您可以测试验证（尽管SO不允许运行表单）：

input:invalid {
    border-color: red;
}

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

Answer 2

输入标记也有＆＃39;模式＆＃39;属性，您可以在其中指定正则表达式模式以检查输入。像

这样的东西

<input type="text" class="input numeric-only nodecimal width30" name="prefcreditlimitval" id="prefcreditlimit" min="100" pattern="\d+00$">

应该工作！ Some info about input's pattern attr

Answer 3

如其他答案中所述，您可以使用min和step属性来限制输入字段的值。但这些属性是作为 HTML 5 标准的一部分引入的，并且在所有浏览器中都不支持。

使用jQuery / JS检查输入值并在不符合要求时给出错误消息的通用解决方案可写如下。

＆＃13;

function validate() {
  var value = $("#prefcreditlimit").val();
  if (isNaN(value) || value < 100 || value % 100 != 0) {
    alert("Please provide a valid input");
    $("#prefcreditlimit").val("");
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="radiotextdeco">S$</span> 
<input type="text" class="input numeric-only nodecimal width30" name="prefcreditlimitval" id="prefcreditlimit" min="100" onblur="validate()"> <span style="font-size:12px;"> (Must be in multiples of 00’ and a minimum of S$100)</span>

＆＃13;

Answer 4

你可以在Javascript中添加一些验证，检查输入是否确实是一个数字，如果是，那么检查它是否也至少为100，如果是，检查输入是否是100的众多。你可以这样做：

var val = parseInt($("#prefcreditlimit").val(), 10);
if (isNaN(val))
{
    // ERROR; NOT A NUMBER
}
else if (val < 100)
{
    // ERROR; VALUE IS LOWER THAN 100
}
else if (val % 100 !== 0)
{
    // ERROR; VALUE IS NOT A MULTITUDE OF 100
}

Answer 5

看起来你想要的值大于100和100的倍数。看到你用jQuery标记了问题我已经为你做了一个jQuery示例。

我正在使用.change()收听文本字段的更改。

jQuery("#prefcreditlimit").change(function () { ... });

我使用jQuery(this).val();或jQuery("#prefcreditlimit").val();来获取文字字段的当前值.val()

根据您的评论，我已更新为首先使用!jQuery("#yesprefcreditlimit").is(':checked')检查是否先选中了单选按钮，其中显示是否未选中该复选框。

然后我首先使用简单的逻辑检查来检查值是isNaN(value)，然后value < 100是否小于100.然后value % 100 > 0如果modulus值大于100。

你肯定会有更多的东西可以去这里，而且你可以采用很多不同的方法，这只是一种方式。例如，您可能不希望更改此部分，而是对表单的提交进行验证。

注意：在堆栈代码段中，您需要单击文本框以触发更改事件。

jQuery(function () {
  jQuery("#prefcreditlimit").change(function () {
    var value = jQuery(this).val();
    
    if(!jQuery("#yesprefcreditlimit").is(':checked')) {
        jQuery("#warning").text("");
        return;
    }

    if(isNaN(value)) {
        jQuery("#warning").text("Value is not a number.");
        return;
    }
    
    if(value < 100) {
        jQuery("#warning").text("Value is less than 100");
        return;
    }
    
    if(value % 100 > 0) {
        jQuery("#warning").text("Value needs to be a multiple of 100");
        return;
    }
    
    jQuery("#warning").text("Value: " + value + " is Okay!");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<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" 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 id="warning"></p>

Answer 6

如果使用输入类型编号没有问题，可以使用step属性

step = "any"或正浮点数NEW指定元素值的值粒度。

如果未明确包含step，则step的值默认为1，就好像它包含在step =＆＃34; 1＆＃34; （或step="100"的{{1}}），即使默认值或最小值是浮点数。

type="time"

文本框接受100及以上的值

6 个答案: