HTML5表单验证有效状态对象

HTML5增加对表单内容类型验证的支持,而通过js获取验证有效状态的API就是ValidityState对象。

获取该对象方法:

var input = document.createElement('input');
console.info(input.validity)

浏览器支持度见: http://caniuse.com/#feat=form-validation

那么由此我们就可以写出更简单的验证框架。该对象拥有的属性如下:

Name Type Description
customError Boolean The element’s custom validity message has been set to a non-empty string by calling the element’s setCustomValidity() method.
badInput Boolean The element has incomplete input and the user agent does not think the user ought to be able to submit the form in its current state.
patternMismatch Boolean The value does not match the specified pattern.
rangeOverflow Boolean The value is greater than the maximum specified by the max attribute.
rangeUnderflow Boolean The value is less than the minimum specified by the min attribute.
stepMismatch Boolean The value does not fit the rules determined by the step attribute (that is, it’s not evenly divisible by the step value).
tooLong Boolean

The value exceeds the specified maxlength for HTMLInputElement or Note: This will never be true in Gecko, because elements’ values are prevented from being longer than maxlength.

typeMismatch Boolean The value is not in the required syntax (when type is email or url).
valid Boolean The element meets all constraint validations, and is therefore considered to be valid.
valueMissing Boolean The element has a required attribute, but no value.

更多内容: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/Data_form_validation

http://cssor.com/validitystate-for-html5-form-validation.html

参与评论

电子邮件地址不会被公开。 必填项已用*标注

*

全部分类
Books(4)code(7)database(6)html&css(24)java(11)JavaScript(48)jQuery(24)linux(20)python(1)React(1)share(1)soft(4)solution(53)thinking(17)vim(9)WordPress(8)前端优化(12)拓展(33)服务器(31)移动开发(4)自然(22)