Question

我有一个数字字段的代码：

<label for="Phone">Phone Number</label><br/>
<input id="Phone" name="Phone"class="form-control" type="tel"         pattern="^\d{3}\d{3}\d{4}$" maxlength="10"  minlength="10"  required >

然而，这并不仅限于数字，只有一种格式可以用来做：

<input name="Phone" type="number"  class="form-control"     placeholder="Phone Number" maxlength="10"  minlength="10"     required="required"/>

并且该代码不限制最大和最小长度！我如何才能完成工作？

Answer 1

来自mozilla docs：

如果type属性的值为text，email，search，password，tel或url，则此属性指定用户可以输入的最小字符数（以Unicode代码点为单位）。对于其他控件类型，它将被忽略。

这意味着此属性对于数字输入不起作用。

这里有一种方法可以定义自己的长度验证器（当然你可以写自己的;））：

numberInput.addEventListener('input', function() {
    this.value = this.value.substring(0, MAX_LENGTH);
}

如何将最小和最大长度验证添加到数字字段？

1 个答案: