如何使用 JavaScript 验证输入字段

Question

如果我有一个带有某个正则表达式的模式属性的输入字段，是否有一个 JavaScript/JQuery 函数可以访问该输入 DOM 元素，并验证其中的当前值是否符合模式？

Answer 1

HTMLInputElement.checkValidity()、supported by IE 10 and later 将同时检查所有约束。

console.log(document.getElementById('a').checkValidity())
console.log(document.getElementById('b').checkValidity())

<input id="a" pattern="a+" value="aaaa" />
<input id="b" pattern="a+" value="aaba" />

Answer 2

您将需要使用 HTML5 Validity Framework（检查“使用 JavaScript 验证表单”部分），它为每个已设置验证的字段提供一个 validity 对象。这个validity 对象公开了一组“有效性约束”（HTML5 原生提供的每种验证类型都有一个）。

在您的情况下，您需要检查元素上的 validity.patternMismatch 以查看它是否无效。但是，当仅对元素应用一种类型的验证时，validity.valid 就足够了。

下面，我们有一个表单域，它既是必需的，又为它设置了模式。在这种情况下，仅仅知道字段无效可能不足以满足您的目的，因此代码不仅会告诉您元素是否无效，还会显示您可以检查各个约束以了解原因。

尽量不要输入任何数据并单击提交按钮。这将告诉您该元素无效，但如果您查看约束报告，您将看到 valueMissing = true 在这种情况下。然后尝试只输入几个字符，您仍然会看到它显示为无效，但在这种情况下会显示patternMismatch = true。

var field = document.getElementById("ss");
var btn = document.getElementById("btnValidity");

btn.addEventListener("click", function(evt){

  console.clear();

  // You can test for simple validity with the valid property
  console.log("Is field valid? " + ss.validity.valid);
  
  // And, you can get more specific by checking all the validity constraints
  // Here, we're just looping the entire set for demo purposes
  for(var constraint in ss.validity){
    if(ss.validity[constraint]){
      console.log(constraint + " = " + ss.validity[constraint]);
    }
  }
  
});

/* Valid and invalid elements can show their state in real time with CSS pseudo-classes */
input[type=text]:active, input[type=text]:focus { outline:none;  }
input[type=text]:valid { box-shadow:0 0 3px green; }
input[type=text]:invalid { box-shadow:0 0 3px red; }

SS#: <input type="text" required pattern="^\d{3}-\d{2}-\d{4}$" id="ss" placeholder="xxx-xx-xxxx">
<button id="btnValidity">Check validity</button>

Answer 3

$(function () {
    var $input = $('#my-input');  
      
    $input.on('change', function () {
        var pattern = $input.attr('data-my-pattern-attr');
        var regex = new RegExp(pattern, "g");

        if ($input.val().match(regex)) {
            console.log('matches');
        } else {
            console.log('no match');
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" id="my-input" data-my-pattern-attr="[a-z]+" />