一般做到注冊頁面的時候，當(dāng)用戶填完信息，都需要對他們的信息進(jìn)行驗(yàn)證，這就要用到正則表達(dá)式，具體看下面這個例子。
效果圖：（當(dāng)用戶填寫的信息不符合規(guī)范時顯示錯誤提示）
我只提供了html結(jié)構(gòu)和js，樣式你們按照自己的設(shè)計稿自己寫，我是分別給正確的時候和錯誤的時候加了不同的class，用了不同的高度，正確是高度小，可以把提示的紅字隱藏。
html結(jié)構(gòu)：
div id="wrap">
h1>注冊/h1>
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：
//正則表達(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}$/,
//用來判斷電話號碼，通常手機(jī)號第一位為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個，@后面同理，小寫字母或者大寫字母或者數(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;iarr.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>
以上所述是小編給大家介紹的正則表達(dá)式進(jìn)行頁面表單驗(yàn)證功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
您可能感興趣的文章:- 利用jquery正則表達(dá)式在頁面驗(yàn)證url網(wǎng)址輸入是否正確
- js正則表達(dá)式注冊頁面表單驗(yàn)證
- Java使用正則表達(dá)式對注冊頁面進(jìn)行驗(yàn)證功能實(shí)現(xiàn)
- Python正則表達(dá)式匹配HTML頁面編碼
- 動態(tài)向頁面添加控件和使用正則表達(dá)式的代碼
- 使用正則表達(dá)式驗(yàn)證登錄頁面輸入是否符合要求
