您好,登錄后才能下訂單哦!
這篇文章主要為大家展示了“正則表達式如何進行頁面表單驗證功能”,內(nèi)容簡而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“正則表達式如何進行頁面表單驗證功能”這篇文章吧。
一般做到注冊頁面的時候,當(dāng)用戶填完信息,都需要對他們的信息進行驗證,這就要用到正則表達式,具體看下面這個例子。
效果圖:(當(dāng)用戶填寫的信息不符合規(guī)范時顯示錯誤提示)
我只提供了html結(jié)構(gòu)和js,樣式你們按照自己的設(shè)計稿自己寫,我是分別給正確的時候和錯誤的時候加了不同的class,用了不同的高度,正確是高度小,可以把提示的紅字隱藏。
html結(jié)構(gòu):
<div id="wrap"> <h2>注冊</h2> <div> <input type="text" class='match' name='user' placeholder='請輸入用戶名' /> <span>字母開頭,長度5-10位字母數(shù)字下劃線</span> </div> <div> <input type="password" class='match' name='pwd' placeholder='請輸入密碼' /> <span>字母數(shù)字長度6-18位</span> </div> <div> <input type="password" name='pwd2' placeholder='請再次輸入密碼' /> <span>兩次密碼不一致</span> </div> <div> <input type="text" class='match' name="tel" placeholder='請輸入電話' /> <span>電話號碼格式不正確</span> </div> <div> <input type="text" class='match' name="mail" placeholder='請輸入e-mail' /> <span>郵箱格式不正確</span> </div> <div> <input type="text" class='match' name="IDCard" placeholder='請輸入身份證' /> <span>證件格式不正確</span> </div> <div class='submit'> <input type="submit" value='注冊' /> </div> <p id='tip'>請先輸入密碼</p> </div>
js:
//正則表達式已//雙斜杠開始和結(jié)束,限制必須要以什么什么開頭要在之前加^,限制必須要以什么什么結(jié)尾要在后面加$,例:/^正則$/ <script type="text/javascript"> var reg = { user:/^[a-zA-Z]\w{4,9}$/, //用來判斷用戶名,第一位不能為數(shù)字,也就是小寫字母或者大寫字母,后面的內(nèi)容\w表示字符(數(shù)字字母下劃線) //要求是5-10位字符,所以出去第一位,還需要4-9位的\w pwd:/^[\da-zA-Z]{6,18}$/, //用來判斷密碼,html結(jié)構(gòu)中要求是數(shù)字字符6到18位,\d表示數(shù)字 tel:/^1[34578]\d{9}$/, //用來判斷電話號碼,通常手機號第一位為1,第二位只可能出現(xiàn)3.4.5.7.8,后面剩下的9位數(shù)字隨機 mail:/^[1-9a-zA-Z_]\w*@[a-zA-Z0-9]+(\.[a-zA-Z]{2,})+$/, //用來判斷郵箱,通常郵箱沒有以0開頭的,所以第一位為1-9數(shù)字或者小寫字母或者大寫字母,第二位開始任意字符 //也可以只有第一位沒有第二位,*表示至少0個,@后面同理,小寫字母或者大寫字母或者數(shù)字,.需要轉(zhuǎn)意符,所以寫成\. //點后面通常是com或者cn或者com.cn,所以是小寫字母或者大寫字母至少兩位 IDCard:/^[1-9]\d{16}[\dxX]$/, //用來判斷身份證,通常第一位不為零,所以取1-9的數(shù)字,中間的16位數(shù)字隨機,最后一位要么是數(shù)字要么是X }; var arr = [ document.getElementsByName('user')[0], document.getElementsByName('pwd')[0], document.getElementsByName('tel')[0], document.getElementsByName('mail')[0], document.getElementsByName('IDCard')[0] ]; for(var i=0;i<arr.length;i++){ arr[i].onblur = function(){ if(this.value){ if(reg[this.name].test(this.value)){ this.parentNode.className = 'right'; //判斷正確的時候加的class }else{ this.parentNode.className = 'wrong'; //判斷錯誤的時候加的class this.focus(); }; }; }; }; var oTip = document.getElementById('tip'); var opwd = document.getElementsByName('pwd2')[0]; opwd.onfous = function(){ if(!arr[1].value){ arr[1].focus(); oTip.className = 'show'; setTimeout(function () { oTip.className = ''; },1000); }; }; opwd.onblur = function(){ if(this.value){ if(this.value != arr[1].value){ this.focus(); this.parentNode.className ='wrong'; }else{ this.parentNode.className ='right'; }; }; }; </script>
以上是“正則表達式如何進行頁面表單驗證功能”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。