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中所有的验证UIvar forms = document.querySelectorAll( "form" );for ( var i = 0; i < forms.length; i++ ) {    replaceValidationUI( forms[ i ] );}