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

【问题标题】：Why is input pattern attribute not working for numerics?为什么输入模式属性不适用于数字？
【发布时间】：2013-10-04 16:34:05
【问题描述】：

我无法在文本输入中获得the pattern attribute 以限制为数字。根据the javascript regular expressions list，[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 验证（为简单起见，基于this post 决定走这条路线）：

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"/>，因为它还没有得到足够广泛的支持。

【问题讨论】：

你试过用[0-9]{9}代替吗？
您使用的是什么浏览器和版本？ pattern 属性也是 html 并且仅在最新的浏览器中支持（即 IE9 不支持它）。
似乎工作正常。我添加了一个 CSS 检查，在无效时给出红色，在有效时给出绿色：jsfiddle.
pattern 属性的验证不会阻止添加错误信息，但会阻止提交表单。您还可以使用 @Jerry 在他的演示中使用的 CSS 选择器。
查看@Jerry 小提琴的更新：jsfiddle.net/bHWcu/1

标签： javascript html regex

【解决方案1】：

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

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

同时显示两者的小提琴（基于来自 cmets 的 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>

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

【讨论】：

啊！谢谢你。这正是我的困惑：我认为模式属性应该禁止用户输入无效字符。感谢大家闪电般的快速反馈。
+1 还可以补充一点，模式不需要方括号:)
实际上阻止输入数据无论如何都可能是一个滑坡，而且它也可能有点烦人。例如，\d{9} 在每次击键时都经过验证，这将阻止用户一次输入所有 9 位数字以外的任何内容（通过复制粘贴）。
丢弃minlength，它毫无意义且无效。标记也可以通过几种方式进行简化。但重点是答案中的代码与问题中的代码基本相同，所以一般的读者不会立即看到问题是什么以及解决方案是什么是。
@Leo {9} 是 {9,9} 的简写。

【解决方案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: &lt;input pattern="[0-9]*"&gt;

【讨论】：

很好，感谢您指出 checkValidity()。这看起来非常有用。

【解决方案3】：

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

【讨论】：