纯CSS实现表单验证

作者：陈大羽头github：KRISACHAN关于表单验证在我们日常业务中，表单验证是一个很常见的设计需求，比如一些登录注册框，问卷调查也需要用到表单验证。一般我们的实现思路是，JS监听输入框的输入内容，判断用户输入的内容，从而决定下一步的操作。例如：（以下示例来自优秀的开源UI库element）提交重置以上是我们的正则表达式校验，基本都是用JS来完成的，那么我们是不是可以用CSS来实现呢？答案是肯定的。这里先去DEMOCSS实现表单验证。上面的表单验证完全由CSS实现。核心属性是CSSLevel4的Validity，思路是用:valid和:invalid来判断的值。这是完整的代码/**css*/:root{--error-color:red;}.form>input{margin-bottom:10px;}.form>.f-tips{color:var(--error-color);显示：无；}input[type="text"]:invalid~input[type="submit"],input[type="password"]:invalid~input[type="submit"]{display:none;}input[required]:invalid+span{display:inline;}/**html*/帐户：请输入正确的账号密码：请输入正确的密码效果截图用到的知识点1.HTML5新属性：patternMDN说明：检查控件值的正则表达式..patternmustmatchthe整个值，而不仅仅是一些子集。使用title属性来描述帮助用户的模式。当type属性的值为text、search、tel、url或email时，此属性适用，否则将被忽略。（兼容ie10+）备注：如果pattern中的校验规则不合法，比如长度校验中空格过多，会在控制台报错。具体如下：CSS和JS中的校验规则不一样，下面的写法会失效，核心验证规则需要用[]package起来（目前测试的几个例子都是这样的，具体细节需要自己去查。如果有大佬知道的多具体信息请告知，谢谢！）2.CSSLevel4选择器新属性：invalid详见我的博文[[翻译]19CSSLevel4选择器](https://juejin.im/post/5ce3b3...如果喜欢讨论技术，或者对本文有什么意见或建议，非常欢迎您加鱼头微信好友一起讨论。当然鱼头也非常希望能和大家一起聊聊生活，聊聊爱好，聊聊世界。鱼头的微信号是:krisChans95也可以扫描二维码加好友，备注“顺丰”即可