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

时间2024-01-26 19:43:03发布访客分类HTML浏览351

导读：收集整理的这篇文章主要介绍了html5教程-html5自带表单验证体验优化及提示气泡修改，觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 htML5...

收集整理的这篇文章主要介绍了html5教程-html5自带表单验证体验优化及提示气泡修改，觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。

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 ] ); }
这里列举了一种方式，其实还有很多种方式！不过都大同小异，这里就不在举例了！