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('')"

function checkPassword() {
  var pass1 = document.getElementById("Password");
  var pass2 = document.getElementById("Repassword");

  if (pass1.value != pass2.value)
    pass2.setCustomValidity("两次输入的密码不匹配");
  else
    pass2.setCustomValidity("");
}

::-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();
    });
</script>

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", "<ul class='error-messages'></ul>" );
  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 += "<li>" + 
        label.innerHTML +
        " " +
        invalidFields[ i ].validationMessage +
        "</li>";
    }
    // 把错误的信息放到错误容器里面
    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 ] );
}