html5自带表单验证
很多朋友进行表单验证的时候，都是自己用jquery或者js手工验证，或者用一下jquery插件进行验证。因为大家觉得html5自带验证不是很好！其实，现在html5自带表单验证，目前已经蛮强大了。我们来看下我用纯html5写的一个表单验证吧！体验一下！
大家觉得这个效果怎么样呢？
这个效果的精华是加了三个图片！
| .myform select:required, .myform input:required, .myform textarea:required { background: #fff url(http://sandbox.runjs.cn/uploads/rs/216/0y89gzo2/star.jpg) no-repeat 99% center; } .myform select:required:valid, .myform input:required:valid, .myform textarea:required:valid { background: #fff url(http://sandbox.runjs.cn/uploads/rs/216/0y89gzo2/right.png) no-repeat 99% center; box-shadow: 0 0 5px #5cd053; border-color: #28921f; } .myform select:focus:invalid, .myform input:focus:invalid, .myform textarea:focus:invalid { background: #fff url(http://sandbox.runjs.cn/uploads/rs/216/0y89gzo2/error.png) no-repeat 99% center; box-shadow: 0 0 5px #d45252; border-color: #b03535 } |
然后做了一个监听事件：
| oninvalid="this.setCustomValidity('请输入正确的号码');" oninput="setCustomValidity('')" |
验证密码是否一致的时候，用了一个js
| function checkPassword() { var pass1 = document.getElementById("Password"); var pass2 = document.getElementById("Repassword"); if (pass1.value != pass2.value) pass2.setCustomValidity("两次输入的密码不匹配"); else pass2.setCustomValidity(""); } |
这样就完成了效果！
假如你觉得，这个自带的气泡也很难看！如下图： 
我想换掉！
在谷歌29之前的版本，我们是可以用伪元素来修改气泡！
| ::-webkit-validation-bubble { min-width:152px; margin-top: -1px;} ::-webkit-validation-bubble-arrow { border: 1px solid #F7CE39; background: #FFFBC7; /* position:relative; */ top: 4px; left: 0px; } ::-webkit-validation-bubble-arrow-clipper { text-align: center; } ::-webkit-validation-bubble-heading { color: #444; } ::-webkit-validation-bubble-message { border: 1px solid #F7CE39; background: #FFFBC7; border-radius: 3px; } ::-webkit-validation-bubble-text-block { font-size: 12px; } |
但是呢，这个方法后面被废弃掉了！你会发现修改气泡没有反应！那么怎么修改气泡样式呢？这里就稍微麻烦一些了！思路大概是我们先阻止默认气泡，然后创建新的气泡！
