這篇文章給大家分享的是有關如何使用正則表達式實現(xiàn)認證界面的內容。小編覺得挺實用的,因此分享給大家做個參考,一起跟隨小編過來看看吧。
公司主營業(yè)務:網站設計、成都網站建設、移動網站開發(fā)等業(yè)務。幫助企業(yè)客戶真正實現(xiàn)互聯(lián)網宣傳,提高企業(yè)的競爭能力。成都創(chuàng)新互聯(lián)是一支青春激揚、勤奮敬業(yè)、活力青春激揚、勤奮敬業(yè)、活力澎湃、和諧高效的團隊。公司秉承以“開放、自由、嚴謹、自律”為核心的企業(yè)文化,感謝他們對我們的高要求,感謝他們從不同領域給我們帶來的挑戰(zhàn),讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。成都創(chuàng)新互聯(lián)推出湖里免費做網站回饋大家。
先給大家展示下效果圖:
關鍵代碼如下所示:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples</title> <meta name="description" content=""> <meta name="keywords" content=""> <link href="" rel="stylesheet"> </head> <body> <form action="" name="form1"> <table> <tr> <td>用戶名</td> <td><input type="text" name="input1" onblur="check1()"/></td><td><div id="div1" ></div></td> </tr> <tr> <td>密碼</td> <td><input type="password" name="input2" onblur="check2()"/></td><td><div id="div2" ></div></td> </tr> <tr> <td>再次輸入密碼</td> <td><input type="password" name="input3" onblur="check3()"/></td><td><div id="div3" ></div></td> </tr> <tr> <td>請輸入郵政編碼</td> <td><input type="text" name="input4" onblur="check4()"/></td><td><div id="div4" ></div></td> </tr> <tr> <td>輸入手機號碼</td> <td><input type="text" name="input5" onblur="check5()"/></td><td><div id="div5" ></div></div></td> </tr> <tr> <td> 郵箱地址</td> <td><input type="text" name="input6" onblur="check6()"/></td><td><div id="div6" ></div></td> </tr> <tr> <td>生日</td><td><input type="text" name="input7" onclick="check7()"/></td><td><div id="div7" ></div></td> </tr> <tr><td><input type="submit" value="完成注冊" onclick="sub()"></td></tr> </table> </form> <script type="text/javascript"> var p = false; function check1() { var reg=/^[a-zA-Z][a-zA-Z0-9]{3,15}$/; var div1=document.getElementById("div1"); if(!reg.test(document.form1.input1.value)){ div1.innerHTML="用戶名必須是4-16字母或數(shù)字組成且以字母開始"; }else{ div1.innerHTML="√"; return true; } } function check2() { var reg=/[a-zA-Z0-9]{4,10}/; var div2=document.getElementById("div2"); if(!reg.test(document.form1.input2.value)){ div2.innerHTML="密碼只能由英文字母和數(shù)字組成,長度為4-10個字符"; }else{ div2.innerHTML="√"; return true; } } function check3() { var div3=document.getElementById("div3"); if(document.form1.input3.value==0){ div3.innerHTML="請再次輸入密碼"; }else if(document.form1.input3.value!=document.form1.input2.value){ div3.innerHTML="密碼不一致"; }else { div3.innerHTML="√"; return true; } } function check4() { var reg=/^\d{6}$/; var div4=document.getElementById("div4"); if(!reg.test(document.form1.input4.value)){ div4.innerHTML="郵政編碼必須是6個數(shù)字"; } else{ div4.innerHTML="√"; return true; } } function check5() { var reg=/^1\d{10}$/; var div5=document.getElementById("div5"); if(!reg.test(document.form1.input5.value)){ div5.innerHTML="手機號必須是11個數(shù)字且1開始"; }else{ div5.innerHTML="√"; return true; } } function check6() { var reg=/^[a-zA-Z][a-zA-Z0-9_]+@([a-zA-Z0-9]+.)+(com|cn)$/; var div6=document.getElementById("div6"); if(!reg.test(document.form1.input6.value)){ div6.innerHTML="郵箱地址不是這種格式"; }else{ div6.innerHTML="√"; return true; } } function check7() { var reg=/^(\d{4})-(\d{1,2})-(\d{1,2})$/; var div7=document.getElementById("div7"); var arr=reg.exec(document.form1.input7.value); if(arr==null){ div7.innerHTML="生日格式為1980-05-12或1988-05-04的形式"; }else if (arr[1]<1900||arr[1]>2016) { div7.innerHTML="生日必須在1900-2014"; }else if (arr[2]<1||arr[2]>12) { div7.innerHTML="生日的月份在01~12之間"; }else if (arr[3]<1||arr[3]>31) { div7.innerHTML="生日的日期必須在01-31之間"; }else { div7.innerHTML="√"; p = true; } } function sub(){ if(check1()==true&&p==true&& check2()==true&&check3()==true&&check4()==true&&check5()==true&&check6()==true){ alert("注冊成功"); }else{ alert("注冊失敗,你還有信息沒填或不符合格式"); } } </script> </body> </html>
感謝各位的閱讀!關于“如何使用正則表達式實現(xiàn)認證界面”這篇文章就分享到這里了,希望以上內容可以對大家有一定的幫助,讓大家可以學到更多知識,如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!
分享標題:如何使用正則表達式實現(xiàn)認證界面
網頁地址:http://chinadenli.net/article4/iheooe.html
成都網站建設公司_創(chuàng)新互聯(lián),為您提供、小程序開發(fā)、標簽優(yōu)化、電子商務、網站策劃、網站收錄
聲明:本網站發(fā)布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創(chuàng)新互聯(lián)