html5教程-html5自带表单验证体验优化及提示气泡修改

小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。

ht ML 5 自带 表单验证

很多 朋友 进行表单验证的时候，都是自己用 jq uery 或者 js 手工 验证，或者用一下jquery插件进行验证。因为大家 觉得 html5自带验证不是很好！其实，现在html5自带表单验证，目前已经蛮强大了。我们来看下我用纯html5写的一个表单验证吧！体验一下！

大家觉得这个效果怎么样呢？

这个效果的精华是加了三个图片！

 .myform select:requi red , .myform input:required, .myform textarea:required {     background:  # fff url(https://sandbox.runjs.cn/uploads/rs/216/0y89gzo2/star. jpg ) no-re PE at 99%  center ; }  .myform select:required:valid, .myform input:required:valid, .myform textarea:required:valid {     background: #fff url(https://sandbox.runjs.cn/uploads/rs/216/0y89gzo2/right.png) no-repeat 99% center;     box -s hadow: 0 0 5px #5cd053;     border-color: #28921f; }  .myform select:focus:invalid, .myform input:focus:invalid, .myform textarea:focus:invalid {     background: #fff url(https://sandbox.runjs.cn/uploads/rs/216/0y89gzo2/error.png) no-repeat 99% center;     box-shadow: 0 0 5px #d45252;     border-color: #b03535 }

然后做了一个监听事件：

 oninvalid="this.setCustomValid IT y('请输入正确的号码');" 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-b ub ble { min-width:152px; m arg in -t op: -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; }

但是呢，这个方法后面被废弃掉了！你会发现修改气泡没有反应！那么怎么修改气泡样式呢？这里就稍微麻烦一些了！思路大概是我们先阻止默认气泡，然后创建新的气泡！

阻止默认气泡

 <form>  <input required="" /><button>Submit</button></form> <script>     document.querySelector( "input" ).addEventListener( "invalid",         function( event ) {             event.p rev entDefault();         });

创建新的UI

代码大致如下：

 function replaceValidationUI( form ) {     //阻止气泡     form.addEventListener( "invalid", function( event ) {         event. PR eventDefault();     }, true );      // 支持Safari, iOS Safari, And ROI d 浏览器     // 默认提交表格     form.addEventListener( "submit", function( event ) {         if ( !this.checkValidity() ) {             event.preventDefault();         }     });      // 新增 错误提示 的容器     form.insertAdjacentHTML( "afterbe gin ", "

" ); var submitButton = form.querySelector( "button:not([type=button]), input[type=submit]" ); submitButton.addEventListener( "click", function( event ) { var invali DF ields = form.querySelectorAll( ":invalid" ), listHtml = "", errorMessages = form.querySelector( ".error-messages" ), label; for ( var i = 0; i < invalidFields.length; i++ ) { label = form.querySelector( "label[for=" + invalidFields[ i ].id + "]" ); listHtml += " " + label.inner HTML + " " + invalidFields[ i ].validationMessage + " "; } // 把错误的信息放到错误容器里面 errorMessages.innerHTML = listHtml; // 给第一个错误的input选中 // 错误信息容器显示 if ( invalidFields.length > 0 ) { invalidFields[ 0 ].focus(); errorMessages.style.dis play = "block"; } }); } // 替换form中所有的验证UI var forms = document.querySelectorAll( "form" ); for ( var i = 0; i < forms.length; i++ ) { replaceValidationUI( forms[ i ] ); }

这里列举了一种方式，其实还有很多种方式！ 不过 都大同小异，这里就不在举例了！

html5自带表单验证

很多朋友进行表单验证的时候，都是自己用jquery或者js手工验证，或者用一下jquery插件进行验证。因为大家觉得html5自带验证不是很好！其实，现在html5自带表单验证，目前已经蛮强大了。我们来看下我用纯html5写的一个表单验证吧！体验一下！

大家觉得这个效果怎么样呢？

这个效果的精华是加了三个图片！

 .myform select:required, .myform input:required, .myform textarea:required {     background: #fff url(https://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(https://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(https://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; }

但是呢，这个方法后面被废弃掉了！你会发现修改气泡没有反应！那么怎么修改气泡样式呢？这里就稍微麻烦一些了！思路大概是我们先阻止默认气泡，然后创建新的气泡！

阻止默认气泡

 <form>  <input required="" /><button>Submit</button></form> <script>     document.querySelector( "input" ).addEventListener( "invalid",         function( event ) {             event.preventDefault();         });

创建新的UI

代码大致如下：

 function replaceValidationUI( form ) {     //阻止气泡     form.addEventListener( "invalid", function( event ) {         event.preventDefault();     }, true );      // 支持Safari, iOS Safari, Android 浏览器     // 默认提交表格     form.addEventListener( "submit", function( event ) {         if ( !this.checkValidity() ) {             event.preventDefault();         }     });      // 新增错误提示的容器     form.insertAdjacentHTML( "afterbegin", "

" ); var submitButton = form.querySelector( "button:not([type=button]), input[type=submit]" ); submitButton.addEventListener( "click", function( event ) { var invalidFields = form.querySelectorAll( ":invalid" ), listHtml = "", errorMessages = form.querySelector( ".error-messages" ), label; for ( var i = 0; i < invalidFields.length; i++ ) { label = form.querySelector( "label[for=" + invalidFields[ i ].id + "]" ); listHtml += " " + label.innerHTML + " " + invalidFields[ i ].validationMessage + " "; } // 把错误的信息放到错误容器里面 errorMessages.innerHTML = listHtml; // 给第一个错误的input选中 // 错误信息容器显示 if ( invalidFields.length > 0 ) { invalidFields[ 0 ].focus(); errorMessages.style.display = "block"; } }); } // 替换form中所有的验证UI var forms = document.querySelectorAll( "form" ); for ( var i = 0; i < forms.length; i++ ) { replaceValidationUI( forms[ i ] ); }

这里列举了一种方式，其实还有很多种方式！不过都大同小异，这里就不在举例了！

觉得可用，就经常来吧！ 欢迎评论哦！&nbs p; html5教程 ，巧夺天工，精雕玉琢。小宝典献丑了！

总结

以上是 为你收集整理的 html5教程-html5自带表单验证体验优化及提示气泡修改 全部内容，希望文章能够帮你解决 html5教程-html5自带表单验证体验优化及提示气泡修改 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于html5教程-html5自带表单验证体验优化及提示气泡修改的详细内容...