一、驗證屬性與通過與否

以下為在表單元素上的可用屬性：

required<boolean> 必填字段，接受布爾值，默認(rèn)false
pattern<string> 接受正則，用戶輸入的文本必須滿足該正則

表單元素對象上有checkValidity()方法，其返回布爾值，可以由表單子元素調(diào)用以驗證單個子元素值是否通過驗證:

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

也支持由表單調(diào)用驗證全表單:

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

該方法只返回布爾值以反映驗證通過與否.

---

二、獲取驗證失敗的原因

那么如何得知不通過的原因？
validity屬性反應(yīng)不通過的原因，該屬性也由表單元素對象暴露.

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

該屬性可能的值及值的意義如下:

customError: 若設(shè)置了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

如有疏漏，請為我指正，謝謝.