1.valueMissing属性
必填的表单元素的值为空。
如果表单元素设置了required特性,则为必填项。如果必填项的值为空,就无法通过表单验证,valueMissing属性会返回true,否则返回false。
2.typeMismatch属性
输入值与type类型不匹配。
HTML 5新增的表单类型如email、number、url等,都包含一个原始的类型验证。如果用户输入的内容与表单类型不符合,则typeMismatch属性将返回true,否则返回false。
3.patternMismatch属性
输入值与pattern特性的正则不匹配。
表单元素可通过pattern特性设置正则表达式的验证模式。如果输入的内容不符合验证模式的规则,则patternMismatch属性将返回true,否则返回false。
4.tooLong属性
输入的内容超过了表单元素的maxLength 特性限定的字符长度。
表单元素可使用maxLength特性设置输入内容的最大长度。虽然在输入的时候会限制表单内容的长度,但在某种情况下,如通过程序设置,还是会超出最大长度限制。如果输入的内容超过了最大长度限制,则tooLong属性返回true,否则返回false。
5.rangeUnderflow属性
输入的值小于min特性的值。
一般用于填写数值的表单元素,都可能会使用min特性设置数值范围的最小值。如果输入的数值小于最小值,则rangeUnderflow属性返回true,否则返回false。
6.rangeOverflow属性
输入的值大于max特性的值。
一般用于填写数值的表单元素,也可能会使用max特性设置数值范围的最大值。如果输入的数值大于最大值,则rangeOverflow属性返回true,否则返回false。
7.stepMismatch属性
输入的值不符合step特性所推算出的规则。
用于填写数值的表单元素,可能需要同时设置min、max和step特性,这就限制了输入的值必须是最小值与step特性值的倍数之和。如范围从0到10,step特性值为2,因为合法值为该范围内的偶数,其他数值均无法通过验证。如果输入值不符合要求,则stepMismatch属性返回true,否则返回false。
8.customError属性
使用自定义的验证错误提示信息。
有时候,不太适合使用浏览器内置的验证错误提示信息,需要自己定义。当输入值不符合语义规则时,会提示自定义的错误提示信息。
通常使用setCustomValidity()方法自定义错误提示信息:setCustomValidity(message)会把错误提示信息自定义为message,此时customError属性值为true;setCustomValidity("")会清除自定义的错误信息,此时customError属性值为false。
实例用法 :
$("#submit").click(function () {
//获取输入框
var user = document.getElementById("user");
//第一种判断的方式valueMissing,必填的表单元素的值为空。
//setCustomValidity 自定义验证输出语句
if(user.validity.valueMissing == true){
user.setCustomValidity("请填写用户名");
}else if(user.validity.patternMismatch == true){
user.setCustomValidity("用户名的格式不对");
}else{
user.setCustomValidity("");
}
});