JavaScript 用HTML5约束验证API做表单验证

一、验证属性与通过与否

以下为在表单元素上的可用属性：

required<boolean> 必填字段，接受布尔值，默认false
pattern<string> 接受正则，用户输入的文本必须满足该正则

表单元素对象上有checkValidity()方法，其返回布尔值，可以由表单子元素调用以验证单个子元素值是否通过验证:

if(document.form[0].element[0].checkValidity()) {}

也支持由表单调用验证全表单:

 if(document.form[0].checkValidity()) {}

该方法只返回布尔值以反映验证通过与否.

---

二、获取验证失败的原因

那么如何得知不通过的原因？
validity属性反应不通过的原因，该属性也由表单元素对象暴露.

if(formEle.validity) {
  console.log(validity);
}

该属性可能的值及值的意义如下:

customError: 若设置了setCustomValidity()则返回true否false
pattenMismatch: 字段值不符合pattern正则的要求
rangeOverflow: 字段值大于max值返回true.
rangeUnderflow: 字段值小于min值返回true
stepMismatch: 字段值与min、 max、step值不相符则返true
toolong: 字段值长度超过maxlength值返true
valid: 如其他属性值都为false返true
valueMissing: 有required必填项未填返true
typeMismatch: 返回true表示字段值并非email或url属性要求的格式

例:

if(formEle.validity.valueMissing) {
  console.log("required value missing.");
}

---

END

如有疏漏，请为我指正，谢谢.

原文地址：https://blog.csdn.net/qq_52697994/article/details/142617598

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！