如何使用JavaScript验证输入字段

Question

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

Answer 1

You will need to use the HTML5 Validity Framework (check the "Validating forms using JavaScript" section) which provides a validity object for each field that has had validation set up for it. This validity object exposes a set of "validity constraints" (one for each type of validation that HTML5 natively provides).

In your case, you'd want to check validity.patternMismatch on the element to see if it is invalid. But, when only one type of validation is applied to an element validity.valid is enough.

Below, we have a form field that is both required and has a pattern set up for it. In this case, knowing that the field is invalid may not be enough for your purposes, so the code not only tells you if the element is invalid, but shows that you can check individual constraints to know why.

Try not entering any data and clicking the submit button. That will tell you the element is invalid, but if you look at the constraint report, you will see that valueMissing = true in that case. Then try entering just a couple of characters and you'll still see it show as invalid, but the patternMismatch = true will show in that case.

 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 2

HTMLInputElement.checkValidity() , supported by IE 10 and later , will check all constraints at once.

 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 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="[az]+" />