阻止默认气泡
| <form> <input required> <button>Submit</button> </form> <script> document.querySelector( "input" ).addEventListener( "invalid", function( event ) { event.preventDefault(); }); </script> |
创建新的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", "<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 ] ); } |
总结
以上所述是小编给大家介绍的html5自带表单验证体验优化及提示气泡修改功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对易采站长站网站的支持！
