html5自帶表單驗(yàn)證體驗(yàn)優(yōu)化及提示氣泡修改功能
發(fā)布時(shí)間：2017-09-12 11:20:28 作者：佚名 
我要評(píng)論
我要評(píng)論很多朋友進(jìn)行表單驗(yàn)證的時(shí)候，都是自己用jquery或者js手工驗(yàn)證，或者用一下jquery插件進(jìn)行驗(yàn)證。感覺html5自帶驗(yàn)證不是很好用，下面小編給大家分享使用純html5編寫的一個(gè)表單驗(yàn)證功能，需要的朋友參考下吧
html5自帶表單驗(yàn)證
很多朋友進(jìn)行表單驗(yàn)證的時(shí)候，都是自己用jquery或者js手工驗(yàn)證，或者用一下jquery插件進(jìn)行驗(yàn)證。因?yàn)榇蠹矣X得html5自帶驗(yàn)證不是很好！其實(shí)，現(xiàn)在html5自帶表單驗(yàn)證，目前已經(jīng)蠻強(qiáng)大了。我們來看下我用純html5寫的一個(gè)表單驗(yàn)證吧！體驗(yàn)一下！
大家覺得這個(gè)效果怎么樣呢？
這個(gè)效果的精華是加了三個(gè)圖片！
.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
}
然后做了一個(gè)監(jiān)聽事件：
oninvalid="this.setCustomValidity('請(qǐng)輸入正確的號(hào)碼');" oninput="setCustomValidity('')"
驗(yàn)證密碼是否一致的時(shí)候，用了一個(gè)js
function checkPassword() {
var pass1 = document.getElementById("Password");
var pass2 = document.getElementById("Repassword");
if (pass1.value != pass2.value)
pass2.setCustomValidity("兩次輸入的密碼不匹配");
else
pass2.setCustomValidity("");
}
這樣就完成了效果！
假如你覺得，這個(gè)自帶的氣泡也很難看！如下圖： 
我想換掉！
在谷歌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; }
但是呢，這個(gè)方法后面被廢棄掉了！你會(huì)發(fā)現(xiàn)修改氣泡沒有反應(yīng)！那么怎么修改氣泡樣式呢？這里就稍微麻煩一些了！思路大概是我們先阻止默認(rèn)氣泡，然后創(chuàng)建新的氣泡！
阻止默認(rèn)氣泡
<form>
<input required>
<button>Submit</button>
</form>
<script>
document.querySelector( "input" ).addEventListener( "invalid",
function( event ) {
event.preventDefault();
});
</script>
創(chuàng)建新的UI
代碼大致如下：
function replaceValidationUI( form ) {
//阻止氣泡
form.addEventListener( "invalid", function( event ) {
event.preventDefault();
}, true );
// 支持Safari, iOS Safari, Android 瀏覽器
// 默認(rèn)提交表格
form.addEventListener( "submit", function( event ) {
if ( !this.checkValidity() ) {
event.preventDefault();
}
});
// 新增錯(cuò)誤提示的容器
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>";
}
// 把錯(cuò)誤的信息放到錯(cuò)誤容器里面
errorMessages.innerHTML = listHtml;
// 給第一個(gè)錯(cuò)誤的input選中
// 錯(cuò)誤信息容器顯示
if ( invalidFields.length > 0 ) {
invalidFields[ 0 ].focus();
errorMessages.style.display = "block";
}
});
}
// 替換form中所有的驗(yàn)證UI
var forms = document.querySelectorAll( "form" );
for ( var i = 0; i < forms.length; i++ ) {
replaceValidationUI( forms[ i ] );
}
總結(jié)
以上所述是小編給大家介紹的html5自帶表單驗(yàn)證體驗(yàn)優(yōu)化及提示氣泡修改功能，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
HTML5表單驗(yàn)證特性(知識(shí)點(diǎn)小結(jié))
這篇文章主要介紹了HTML5表單驗(yàn)證特性的一些知識(shí)點(diǎn)，本文通過實(shí)例代碼截圖的形式給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-03-10- 這篇文章主要介紹了HTML5 表單驗(yàn)證失敗的提示語問題的相關(guān)資料,需要的朋友可以參考下2017-07-13
這篇文章主要介紹了使用HTML5和CSS3表單驗(yàn)證功能,需要的朋友可以參考下2017-05-05HTML5實(shí)現(xiàn)表單自動(dòng)驗(yàn)證功能實(shí)例代碼
在HTML5 中，在增加了大量的表單元素與屬性的同時(shí)，也增加了大量在提交時(shí)對(duì)表單與表單內(nèi)新增元素進(jìn)行內(nèi)容有效性驗(yàn)證的功能，接下來我們來講一下自動(dòng)驗(yàn)證，需要的朋友參考2017-01-11HTML5利用約束驗(yàn)證API來檢查表單的輸入數(shù)據(jù)的代碼實(shí)例
這篇文章不會(huì)去討論簡單的input type，本文想把重點(diǎn)放在HTML5表單驗(yàn)證機(jī)制上。主要介紹是HTML5是如何利用約束驗(yàn)證API來檢查表單的輸入數(shù)據(jù)的，當(dāng)然，本文會(huì)涉及到很多其它2016-12-20html5的input的required使用中遇到的問題及解決方法
這篇文章主要介紹了h5的input的required使用中遇到的問題及解決方法，文中給大家介紹的非常詳細(xì)，具有參考借鑒價(jià)值，需要的朋友參考下吧2018-04-24html5中valid、invalid、required的定義
HTML5的出現(xiàn)為我們提供一些屬性，不用編寫js和正則即可解決這個(gè)檢驗(yàn)表單內(nèi)容，下面為大家介紹下valid、invalid、required的定義2014-02-21
wordpress添加Html5的表單驗(yàn)證required方法小結(jié)
這篇文章主要介紹了wordpress添加Html5的表單驗(yàn)證required方法小結(jié),本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參2020-08-18
