checkValidity等form原生JS验证方法和属性详细介绍
一、先从 form 内置验证的外部表现说起
说起 form 内置验证,很多人想到的是设置 required 这样的 HTML 属性,然后表单提交的时候出现这样的提示效果:
实际上,这只是表象,只是 form 表单原生验证的一小部分。form 内置验证的精髓其实不止这点表面的东西。
例如 CSS 侧有诸多匹配的伪类,如:required 伪类, :optional 伪类或是:valid,:invalid 伪类等。
又例如 JS DOM 事件这块表单元素可以监听’invalid’和’valid’事件。
又例如 JS DOM API 这一块则有诸多内置的验证方法和属性,这就是本文要介绍的知识点。
二、form 表单元素内置验证方法和属性
开门见山不打弯,共 3 个方法和 1 个属性。
3 个方法分别是 checkValidity(), reportValidity(), setCustomValidity()方法,1 个属性是 validity 属性。
具体如下:
checkValidity()方法
checkValidity()方法可以用来验证当前表单控件元素,或者整个表单是否验证通过,返回值是布尔值,true 或者 false。
例如,某下拉框元素是否验证通过:
var isSelectPassing = document.querySelector('select').checkValidity(); // true 或 false
或者整个表单元素是否验证通过:
var isFormPassing = document.forms[0].checkValidity(); // true 或 false
reportValidity()方法
reportValidity()方法可以触发浏览器的内置的验证提示交互,返回布尔值,true 或者 false。例如:
document.querySelector('select').reportValidity()
会触发下拉框的错误提示,如下图所示:
另外,reportValidity()方法 IE 浏览器并不支持,Edge 17+开始支持。
setCustomValidity()方法
顾名思义就是设置自定义的验证,我们可以使用这个方法自定义提示文字。
语法如下:
ele.setCustomValidity(str);
其中,str 为字符串,表示出错提示的文字信息,如果是空字符串,则表示不使用自定义的错误提示。
例如上面的 reportValidity()方法的下拉出错提示是“请在列表中选择一项”。
如果我们希望改成“请选择城市”,则可以下面这样:
var eleSelect = document.querySelector('select'); if (eleSelect.validity.valueMissing == true) { eleSelect.setCustomValidity('请选择城市'); } eleSelect.reportValidity();
此时,提示效果就是:
validity 属性与 ValidityState 对象
每一个标准的表单控件,例如输入框,下拉框以及单复选框都内置一个 validity 属性,这是个只读属性,可以返回当前元素各种验证状态,例如:
console.dir(document.querySelector('select').validity);
在 Chrome 浏览器下返回的结果是一个 ValidityState 对象,包含的属性和属性值如下:
badInput: false customError: false patternMismatch: false rangeOverflow: false rangeUnderflow: false stepMismatch: false tooLong: false tooShort: false typeMismatch: false valid: false valueMissing: true
控制台输出截图如下:
其中,
badInput
只读。属性值为布尔类型。输入框里面的值浏览器没办法进行转换。例如’number’类型输入框里面是中文字符(MDN 上说法,但是自己测试无法复现),此时值是 true。此属性 IE 浏览器并不支持。此属性建议了解即可。
customError
只读。属性值为布尔类型。如果元素调用 setCustomValidity()方法设置了自定义的验证信息则值是 true。
patternMismatch
只读。属性值为布尔类型。和指定的 pattern 正则属性值不匹配的时候值是 true。会匹配:invalid 这个 CSS 伪类。
rangeOverflow
只读。属性值为布尔类型。超过 max 属性设置的值的时候会是 true。同时会匹配 CSS:invalid 和:out-of-range 伪类。
rangeUnderflow
只读。属性值为布尔类型。小于 min 属性设置的值的时候会是 true。同时会匹配 CSS:invalid 和:out-of-range 伪类。
stepMismatch
只读。属性值为布尔类型。输入框当前值和 step 属性值不匹配的时候 stepMismatch 的值会是 true。同时元素会匹配 CSS:invalid 和:out-of-range 伪类。
tooLong
只读。属性值为布尔类型。输入内容长度超出 maxlength 的限制时候会是 true。同时会匹配 CSS:invalid 和:out-of-range 伪类。
tooShort
只读。属性值为布尔类型。输入内容长度不足 minlength 的限制时候会是 true。同时会匹配 CSS:invalid 和:out-of-range 伪类。此属性 IE 浏览器并不支持,因为不支持 minlength 属性。
typeMismatch
只读。属性值为布尔类型。输入框的值和输入框类型不匹配的时候该属性值会是 true。例如输入框 type 类型是 email 或者 url 时候。如果值是 true,会匹配:invalid 这个 CSS 伪类。
valid
只读。属性值为布尔类型。当前元素是否完全验证通过,通过是 true,会匹配:valid 这个 CSS 伪类;不通过是 false,会匹配:invalid 这个 CSS 伪类。
valueMissing
只读。属性值为布尔类型。如果元素设置了 required 属性,同时输入框的值为空,则该属性值是 true。如果值是 true,会匹配:invalid 这个 CSS 伪类。
IE9 浏览器的 polyfill
如果想要 IE9 浏览器也支持,需要写个 polyfill,我大概搜索了下,checkValidity()等几个方法并没有合适的 polyfill,已有的一些项目为了兼容 IE8,更像是 shim,没有专门为 IE9 打造了 polyfill。
倒是 validity 属性找到个看上去有些靠谱的 polyfill。您可以狠狠地点击这里(可以右键→另存为):validity-polyfill.js。这个 polyfill 出自这里,不过我并没有仔细验证过其正确性。
之后我会自己针对 IE9 浏览器吧 checkValidity()等几个方法给补上。
结束语
本文下笔之处还以为会发现一些好玩的东西,例如自定义表单验证逻辑,后来发现自己想多了,setCustomValidity()方法并没有自己预想的那么强大,就是个改变提示文字信息的方法。
整理来整理去,最后就成了一个比较详尽的关于表单原生验证的文档了。
之后写验证组件,我会借助这些原生的已经内置好的验证方法来实现,可以省去不少功夫,会很有意思。
日后的精彩演绎源自平时平淡的积累。
对于大部分的人,对于本文这些 API 是无感的,想不到如何在实际项目中应用,觉得很鸡肋,实际上大有可为的,我已经想要跃跃欲试了,嘿嘿。
码云笔记 » checkValidity等form原生JS验证方法和属性详细介绍