用神奇的 form 验证 API 来优化你的表单验证
发布时间：2022-10-22 11:26:00 所属栏目：PHP教程 来源：
导读： github：KRISACHAN前言
鱼头曾在 『极限版』不掺水，用纯 CSS 来实现超飒的表单验证功能 一文中分享过一个花里胡哨的 纯 CSS 的表单验证功能 。虽然仅仅依赖 CSS 是无法满足我们的日常开发需求的，但是配
鱼头曾在 『极限版』不掺水，用纯 CSS 来实现超飒的表单验证功能 一文中分享过一个花里胡哨的 纯 CSS 的表单验证功能 。虽然仅仅依赖 CSS 是无法满足我们的日常开发需求的，但是配
|
github：KRISACHAN前言 鱼头曾在 『极限版』不掺水，用纯 CSS 来实现超飒的表单验证功能 一文中分享过一个花里胡哨的 纯 CSS 的表单验证功能 。虽然仅仅依赖 CSS 是无法满足我们的日常开发需求的，但是配合着各种原生的 form 验证 API ，情况又不一样了。 下面就让我们来了解一下 。 相关的 APIValidityState 每一个原生的表单组件都会有一个用于描述元素的验证状态的对象 —— ValidityState 。 账号： 请输入正确的账号 willValidate 一个只读属性，当表单元素需要验证时返回 true ，否则则为 false 。 setCustomValidity() setCustomValidity() 用于设置表单元素 validationMessage 的值。当设置 setCustomValidity() 之后，validity.customError 就会变成 true 。如果需要重置，则输入空字符串即可。 账号： 请输入正确的账号 checkValidity() checkValidity() 用于检查当前表单元素或整个表单的值是否通过验证，如果是则为 true，否则则为 false 。 reportValidity() 用于触发以及检查表单元素的值是否通过验证，如果是则为 true，否则则为 false 。 账号： 请输入正确的账号 以上 API 兼容性如下： 一个简单的 form 提交例子 账号： 请输入正确的账号 密码： 请输入正确的密码 以上例子可以在鱼头的 Codepen ：codepen.io/krischan77/pen/RwGLaxa 上查看。点击「阅读原文」也可以看哦～ 鱼头注：Mmmmm，功能倒是挺好的，如果不是原生的组件样式太丑，不同浏览器的表现不一致，而且样式还不能修改，我想用原生 API 开发的人应该会很多。。。搞不懂为啥 W3C 不暴露出样式修改的属性。。。 参考资料『极限版』不掺水，用纯 CSS 来实现超飒的表单验证功能『真香警告』这33个超级好用的CSS选择器PHP表单验证，你可能见都没见过。form-control-infrastructureValidityStateHTMLFormElementConstraint validation API后记 如果你喜欢探讨技术，或者对本文有任何的意见或建议，非常欢迎加鱼头微信好友一起探讨，当然，鱼头也非常希望能跟你一起聊生活，聊爱好，谈天说地。 （编辑：开发网_新乡站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
站长推荐
浙公网安备 33038102330465号