如何使用JavaScript验证输入字段

Question

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

Answer 1

您将需要使用HTML5有效性框架 （请选中“使用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 2

IE 10和更高版本支持的 HTMLInputElement.checkValidity()将立即检查所有约束。

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