Question

我无法将the pattern attribute文本输入限制为数字。根据{{3}}，[d]或[0-9]应该这样做。但是在

<input dir="ltr" type="text" title="Enter numbers only." pattern="[\d]{9}" id="uid" name="1" placeholder="Enter UID" required="'required'" class="required placeholder" minlength="9" maxlength="9" autocomplete="off" />

它对我不起作用（在任何浏览器中）。我必须添加js验证，如下所示（基于the javascript regular expressions list决定简化这条路线）：

HTML：

onkeypress='return isNumberKey(event)'

JS：

function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : event.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}

我主要想知道是否有一种方法可以让pattern属性起作用。但也可以随意评论我是否正在使用最佳实践路线。我不想使用HTML5 <input type="number"/>，因为它还没有被广泛支持。

Answer 1

pattern属性的验证不会阻止在字段中写入错误信息，但会阻止提交表单。该元素还有一个oninvalid事件，在提交过程中验证失败时将调用该事件。

或者，您也可以使用CSS选择器:valid和:invalid提供即时视觉反馈。

小提琴显示两者（根据评论中的杰里小提琴）：http://jsfiddle.net/bHWcu/1/

<form onsubmit="alert('Submitted');">
    <input dir="ltr" type="text" title="Enter numbers only." pattern="[\d]{9}" id="uid" name="1" placeholder="Enter UID" required="'required'" class="required placeholder" maxlength="9" autocomplete="off" />
    <input type="submit" value="Submit" />
</form>

请注意，任何客户端验证都应仅用于快速反馈，以改善用户体验。实际验证应始终在服务器端完成，因为客户端验证很容易被欺骗。

Answer 2

pattern 属性仅在其值不匹配时阻止表单提交。要真正防止用户输入无效文本，可以使用 checkValidity()。

演示：

let prevVal = "";
document.querySelector('input').addEventListener('input', function(e){
  if(this.checkValidity()){
    prevVal = this.value;
  } else {
    this.value = prevVal;
  }
});

Only enter digits: <input pattern="[0-9]*">

为什么输入模式属性不适用于数字？

2 个答案: