使用JavaScript进行HTML5验证

Question

<input type="text" pattern="[a-zA-z]" required id="txtBox" />
<input type="submit" />

• 您如何通过javascript设置“必需”属性？

• 如果我从提交类型输入中调用javascript事件，如何检查该提交请求是否由于HTML5验证错误而失败？

• 有没有一种方法可以强制HTML验证而不发生Submit事件？

Answer 1

• document.getElementById('txtBox').required = true;
• document.getElementById('txtBox').validity.valid取决于元素的有效性，等于true或false 。

---

还有一个invalid事件，该事件在无效的表单控件上触发。

Answer 2

您如何通过javascript设置“必需”属性？

您可以.prop()使用.prop()方法：

$('#txtBox').prop('required', true);

如果我在类型为Submit的“ input”元素上从javascript调用click事件，如何检查该提交请求是否由于HTML5验证错误而失败？

如果在输入元素上具有html5 required属性，则如果未正确验证该属性，则不会提交表单。

有没有一种方法可以强制html在没有提交事件发生的情况下检查验证？

好吧，您可以为keyup, keydown事件编写一些用于元素的值检查的函数，从而为您解决问题。

就像是：

$('#txtBox').prop('required', true);

$('#txtBox').on('keyup', function(){
  var regex = /^[a-zA-z]+$/;
   if(!regex.test(this.value)){
      alert(this.id + ' is a required field.');
   }
});