26

我无法将文本输入上的模式属性限制为数字。根据javascript正则表达式列表，[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 验证，如下所示（为简单起见，根据这篇文章决定走这条路线）：

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;
}

我主要想知道是否有办法让模式属性起作用。但也可以随意评论我是否为此使用最佳实践路线。我不想使用 HTML5 <input type="number"/>，因为它还没有得到足够广泛的支持。

4

3 回答 3

59

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

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

显示两者的小提琴（基于评论中 Jerry 的小提琴）：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>

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

于 2013-09-28T12:18:01.870 回答
1

该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]*">

于 2021-05-01T22:20:19.500 回答
0

Unmitigated 答案的修订版。

let prevVal = "";
document.addEventListener("DOMContentLoaded", function(){
//window.addEventListener('load',function(){
    document.querySelector('INPUT').addEventListener('input', function(e){
      if(this.checkValidity()){
        prevVal = this.value;
      } else {
        this.value = prevVal;
      }
    });    
});
于 2021-09-17T10:33:21.850 回答