正則表達(dá)式進(jìn)行頁(yè)面表單驗(yàn)證功能
一般做到注冊(cè)頁(yè)面的時(shí)候,當(dāng)用戶填完信息,都需要對(duì)他們的信息進(jìn)行驗(yàn)證,這就要用到正則表達(dá)式,具體看下面這個(gè)例子。
效果圖:(當(dāng)用戶填寫的信息不符合規(guī)范時(shí)顯示錯(cuò)誤提示)
我只提供了html結(jié)構(gòu)和js,樣式你們按照自己的設(shè)計(jì)稿自己寫,我是分別給正確的時(shí)候和錯(cuò)誤的時(shí)候加了不同的class,用了不同的高度,正確是高度小,可以把提示的紅字隱藏。
html結(jié)構(gòu):
<div id="wrap"> <h1>注冊(cè)</h1> <div> <input type="text" class='match' name='user' placeholder='請(qǐng)輸入用戶名' /> <span>字母開頭,長(zhǎng)度5-10位字母數(shù)字下劃線</span> </div> <div> <input type="password" class='match' name='pwd' placeholder='請(qǐng)輸入密碼' /> <span>字母數(shù)字長(zhǎng)度6-18位</span> </div> <div> <input type="password" name='pwd2' placeholder='請(qǐng)?jiān)俅屋斎朊艽a' /> <span>兩次密碼不一致</span> </div> <div> <input type="text" class='match' name="tel" placeholder='請(qǐng)輸入電話' /> <span>電話號(hào)碼格式不正確</span> </div> <div> <input type="text" class='match' name="mail" placeholder='請(qǐng)輸入e-mail' /> <span>郵箱格式不正確</span> </div> <div> <input type="text" class='match' name="IDCard" placeholder='請(qǐng)輸入身份證' /> <span>證件格式不正確</span> </div> <div class='submit'> <input type="submit" value='注冊(cè)' /> </div> <p id='tip'>請(qǐng)先輸入密碼</p> </div>
js:
//正則表達(dá)式已//雙斜杠開始和結(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}$/, //用來判斷電話號(hào)碼,通常手機(jī)號(hào)第一位為1,第二位只可能出現(xiàn)3.4.5.7.8,后面剩下的9位數(shù)字隨機(jī) mail:/^[1-9a-zA-Z_]\w*@[a-zA-Z0-9]+(\.[a-zA-Z]{2,})+$/, //用來判斷郵箱,通常郵箱沒有以0開頭的,所以第一位為1-9數(shù)字或者小寫字母或者大寫字母,第二位開始任意字符 //也可以只有第一位沒有第二位,*表示至少0個(gè),@后面同理,小寫字母或者大寫字母或者數(shù)字,.需要轉(zhuǎn)意符,所以寫成\. //點(diǎn)后面通常是com或者cn或者com.cn,所以是小寫字母或者大寫字母至少兩位 IDCard:/^[1-9]\d{16}[\dxX]$/, //用來判斷身份證,通常第一位不為零,所以取1-9的數(shù)字,中間的16位數(shù)字隨機(jī),最后一位要么是數(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'; //判斷正確的時(shí)候加的class }else{ this.parentNode.className = 'wrong'; //判斷錯(cuò)誤的時(shí)候加的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>
以上所述是小編給大家介紹的正則表達(dá)式進(jìn)行頁(yè)面表單驗(yàn)證功能,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
JavaScript中的正則表達(dá)式使用及驗(yàn)證qq號(hào)碼的正則
這篇文章給大家介紹了javascript中的正則表達(dá)式使用及驗(yàn)證qq號(hào)碼的正則表達(dá)式,涉及到手機(jī)號(hào)、姓名、qq相關(guān)知識(shí)驗(yàn)證,感興趣的朋友一起學(xué)習(xí)吧2015-11-11最常用的15個(gè)前端表單驗(yàn)證JS正則表達(dá)式
在表單驗(yàn)證中,使用正則表達(dá)式來驗(yàn)證正確與否是一個(gè)很頻繁的操作,本文收集整理了15個(gè)常用的JavaScript正則表達(dá)式,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友參考下吧2017-07-07正則表達(dá)式初運(yùn)用之認(rèn)證界面的實(shí)現(xiàn)代碼
這篇文章主要介紹了正則表達(dá)式初運(yùn)用之認(rèn)證界面的實(shí)現(xiàn)代碼,代碼簡(jiǎn)單易懂,非常不錯(cuò),具有參考借鑒價(jià)值,感興趣的朋友一起看看吧2016-09-09正則表達(dá)式在網(wǎng)頁(yè)處理中的應(yīng)用四則
正則表達(dá)式(Regular Expression)為字符串模式匹配提供了一種高效、方便的方法。幾乎所有高級(jí)語言都提供了對(duì)正則表達(dá)式的支持,或者提供了現(xiàn)成的代碼庫(kù)供調(diào)用。本文以ASP環(huán)境中常見的處理任務(wù)為例,介紹正則表達(dá)式的應(yīng)用技巧。2008-04-04JavaScript 實(shí)現(xiàn)基礎(chǔ) 正則表達(dá)式
正則表達(dá)式用來從某一段字符串中匹配所需要的字符,這些字符可以非常簡(jiǎn)單,也可以非常復(fù)雜。JavaScript生來就對(duì)正則表達(dá)式有著良好的支持,在網(wǎng)絡(luò)的字符搜索匹配中發(fā)揮著重要的作用。2009-08-08