Question

我有一个带有自定义oninvalid消息的文本输入：

<input id="foo" type="text" maxlength="16" required pattern="[a-zA-Z0-9]+"
oninvalid="this.setCustomValidity('Please enter letters and / 
or numbers only.')" onBlur="chk()" autofocus>

在onBlur事件中，我想运行一些代码，但前提是输入的文本通过了指定的模式验证。类似的东西：

function chk() {
    if (document.getElementById("foo").isvalid?()) {
        bar(); 
    }
}

可替换地：

function chk() {
    if ($("#foo").isvalid?()) {
        bar(); 
    }
}

更新

我找到了以下解决方案，但它确实重复了模式验证的代码：

function chk() {
    var exp = /^[a-zA-Z0-9]+$/;
    if (exp.test($("#foo").val())) {
        bar(); 
    }
}

Answer 1

如果文本手动匹配正则表达式，则无需重新检查。您只需查看ValidityState。

即可

function chk() {
    if ($("#foo").validity.valid) {
        bar(); 
    }
}

Answer 2

您可以检查onChange event并在每次更改输入时调用该方法

Answer 3

首先，您要使用在输入中设置的pattern属性创建正则表达式：

function chk() {

     var pattern = this.getAttribute('pattern');
     var regex = new RegExp(pattern);

     // ...  
}

然后验证输入值是否与正则表达式匹配：

function chk() {

     var pattern = this.getAttribute('pattern');
     var regex = new RegExp(pattern);

     // regex matching
     if (regex.test(this.value)) {
       bar();
     }

}

看到这个小提琴：https://jsfiddle.net/t6wLeqq0/1/

Answer 4

您可以从输入中获取模式，但我们需要稍微修改它。作为MDN explains：＆＃34;模式模式必须匹配整个值，而不仅仅是某个子集。＆＃34;这基本上归结为浏览器隐式地在^前面添加$并附加到模式值。因此，对于我们的情况，当我们从输入中获取字符串模式值时，我们还需要执行相同的操作来匹配浏览器的功能：

function chk() {
  var pattern = $("#foo").attr('pattern');
  var exp = new RegExp('^' + pattern + '$');
  if (exp.test($("#foo").val())) {
    bar(); 
  }
}

如何在Javascript中检查文本输入的模式验证结果？

4 个答案: