您好,登錄后才能下訂單哦!
這篇文章主要為大家展示了“javascript中表單正則應用的示例分析”,內容簡而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領大家一起研究并學習一下“javascript中表單正則應用的示例分析”這篇文章吧。
以下是之前練習正則表達式時候做的js表單測試.
input里的value用.test()比較以后,處理正則和需求,反饋,代碼欠優化,但功能完善,僅供參考學習
html部分
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>新用戶注冊</title> <link rel="stylesheet" href="./css/regForm.css" type="text/css"> <script type="text/javascript" src="js/regForm.js"></script> <!--外部樣式和JS*--> </head> <body> <div id="section"> <form action="" method="get" id="form"> <table id="table"> <tr> <td>用戶名</td> <td><input id="username" type="text" class="text"></td> <td><div class="icon" id="usernameicon"></div></td> </tr> <tr> <td>Email</td> <td><input type="text" class="text" id="email"></td> <td><div class="icon" id="emailicon">(請輸入正確的Email地址)</div></td> </tr> <tr> <td>密碼</td> <td><input type="password" id="password"></td> <td><div id="pwicon" class="icon">(請輸入強度較高的密碼)</div></td> </tr> <tr> <td>密碼強度</td> <td> <div class="pwstrength" id="low">弱</div> <div class="pwstrength" id="middle">中</div> <div class="pwstrength" id="strong">強</div> </td> <td></td> </tr> <tr> <td>確認密碼</td> <td><input id="cfpw" type="password" class="text" value=""></td> <td><div class="icon" id="cfpwicon"></div></td> </tr> <tr> <td>MSN</td> <td><input id="msn" type="text" class="text"> </td> <td><div class="icon" id="msnicon"></div></td> </tr> <tr> <td>QQ</td> <td><input type="text" class="text" id="qq"> </td> <td><div id="qqicon" class="icon">(請輸入正確的QQ號碼)</div></td> </tr> <tr> <td>辦公電話</td> <td><input id="offphone" type="text" class="text"></td> <td><div class="icon" id="offphoneicon"></div></td> </tr> <tr> <td>家庭電話</td> <td><input id="homephone" type="text" class="text"> </td> <td><div class="icon" id="homephoneicon"></div></td> </tr> <tr> <td>手機</td> <td ><input type="text" class="text" id="phone"></td> <td><div class="icon" id="phoneicon">(請輸入正確的手機號)</div></td> </tr> <tr> <td>密碼提示問題</td> <td> <select class="text" name="question" value=""> <option value="" selected>請選擇密碼提示問題</option> <option value="">你熱愛編程嗎?</option> <option value="">你的中學名字是?</option> <option value="">最開心的事是什么?</option> </select> </td> <td></td> </tr> <tr> <td>密碼問題答案</td> <td><input id="answer" type="text" class="text"></td> <td><div class="icon" id="answericon"></div></td> </tr> <tr> <td></td> <td class="lasttext"><input type="radio">我已看過并接受《<a href="">用戶協議</a>》</td> <td></td> </tr> <tr> <td></td> <td><input type="image" src="image/login.png" id="login"></td> <td></td> </tr> </table> </form> </div> </body> </html>
css部分>>
body{ background:url("../image/10.png") repeat-x; } #section{ width:1002px; height:612px; margin:15px auto; position:relative; } #table{ width:600px; height:550px; background-color:#fff; position:absolute; font-size:18px; line-height:5px; border-radius: 5px; box-shadow: 0 0 15px 2px rgba(0, 0, 0, 0.4); padding: 20px 30px; box-sizing: border-box; width: 80%; margin: 0 10%; } #table .pwstrength{ float:left; height:30px; width:60px; line-height:30px; text-align:center; border-radius:4px; color:#000; } #table .text{ width:215px; height:32px; } #password{ width:215px; height:32px; } #table .lasttext{ font-size:14px; } #table tr td{ width:180px; } #table .icon{ width:175px; height:24px; float:left; background:no-repeat; font-size:12px; color:#000; text-align:right; line-height:24px; }
javascript部分,這邊使用的是dom2級操作,先封裝好事件對象,在IE和非IE的情況下進行操作
//封裝一下兼容性函數 var EV ={ //綁定事件兼容 addEvent:function(node,ename,fn){ if(navigator.userAgent.toLowerCase().indexOf("ie")!=-1){ //在ie下添加綁定事件 node.attachEvent("on"+ename,fn); }else{ node.addEventListener(ename,fn,false); } }, removeEvent:function(node,ename,fn){ if(navigator.userAgent.toLowerCase().indexOf("ie")!=-1){ //在ie下添加綁定事件 node.detachEvent("on"+ename,fn); }else{ node.removeEventListener(ename,fn,false); } } } window.onload=function(){ //email地址檢測 html事件處理 var eMail = document.getElementById("email"); EV.addEvent(eMail,"blur",checkEmail); function checkEmail(){ var email = document.getElementById("email").value; var emailicon = document.getElementById("emailicon"); var epatt = new RegExp("\\w+@[a-zA-Z0-9]+\\.[a-zA-Z0-9]{2,14}"); //利用正則表達式 if(epatt.test(email)){ emailicon.style.backgroundImage="url('image/tick.png')"; emailicon.innerHTML=""; } else{ emailicon.style.backgroundImage="url('image/cross.png')"; emailicon.innerHTML="請輸入正確的郵箱地址!"; emailicon.style.color="#dd0000"; } } //密碼強度檢測 var pwd =document.getElementById("password"); EV.addEvent(pwd,"blur",checkCode); function checkCode(){ var pwdv =document.getElementById("password").value; var low =document.getElementById("low"); var middle =document.getElementById("middle"); var strong =document.getElementById("strong"); var pwssicon =document.getElementById("phoneicon"); var pwdpatt1 = /\d+/g; //數字 var pwdpatt2 = /[a-zA-Z]+/g; //字母 var pwdpatt3 = /(\W)+/g; //特殊字符 var booldata1,booldata2,booldata3; if(pwdv.length<6){ pwicon.style.backgroundImage="url('image/cross.png')"; pwicon.innerHTML="密碼不得少于6位數!"; pwicon.style.color="#dd0000"; } if(pwdv==""){ pwicon.style.backgroundImage="url('image/cross.png')"; pwicon.innerHTML="密碼項不能為空!"; pwicon.style.color="#dd0000"; } if(pwdpatt1.test(pwdv)){ booldata1 = true; } if(pwdpatt2.test(pwdv)){ booldata2 = true; } if(pwdpatt3.test(pwdv)){ booldata3 = true; } if(booldata1||booldata2||booldata3){ low.style.backgroundColor="#CB4042"; pwicon.style.backgroundImage="url('image/tick.png')"; pwicon.innerHTML=""; } //強度低 if((booldata1&&booldata2)||(booldata1&&booldata3)||(booldata3&&booldata2)){ middle.style.backgroundColor="#F7C242"; pwicon.style.backgroundImage="url('image/tick.png')"; pwicon.innerHTML=""; //強度中 } if(booldata1&&booldata2&&booldata3){ strong.style.backgroundColor="#227D51"; pwicon.style.backgroundImage="url('image/tick.png')"; pwicon.innerHTML=""; //強度強 } } //檢測QQ號碼 var qq =document.getElementById("qq"); EV.addEvent(qq,"blur",checkQQ); function checkQQ(){ var qqicon =document.getElementById("qqicon"); var qqtext =document.getElementById("qq").value; var qqpatt = /^[1-9](\d{5,10})$/; if(qqpatt.test(qqtext)){ qqicon.style.backgroundImage="url('image/tick.png')"; qqicon.innerHTML=""; } else{ qqicon.style.backgroundImage="url('image/cross.png')"; qqicon.innerHTML="請輸入5至11位數的QQ號碼"; qqicon.style.color="#dd0000"; } } //檢測手機號 var phone = document.getElementById("phone"); EV.addEvent(phone,"blur",checkPhone); function checkPhone(){ var phoneicon =document.getElementById("phoneicon"); var phonenum = document.getElementById("phone").value; var phonepatt = /^0?(13|15|14|18)[0-9]{9}$/; if(phonepatt.test(phonenum)){ phoneicon.style.backgroundImage="url('image/tick.png')"; phoneicon.innerHTML=""; } else{ phoneicon.style.backgroundImage="url('image/cross.png')"; phoneicon.innerHTML="請輸入正確的手機號!"; phoneicon.style.color="#dd0000"; } } //檢測用戶名 var username = document.getElementById("username"); EV.addEvent(username,"blur",checkUser); function checkUser(){ var usercon = document.getElementById("username").value; var usernameicon =document.getElementById("usernameicon"); var unpatt = /[A-Za-z0-9_\-\u4e00-\u9fa5]{6,18}/; if(unpatt.test(usercon)){ usernameicon.style.backgroundImage="url('image/tick.png')"; usernameicon.innerHTML=""; } else{ usernameicon.style.backgroundImage="url('image/cross.png')"; usernameicon.innerHTML="用戶名至少大于6個字符!"; usernameicon.style.color="#dd0000"; if(usercon==""){ usernameicon.style.backgroundImage="url('image/cross.png')"; usernameicon.innerHTML="用戶名不能為空!"; usernameicon.style.color="#dd0000"; } } //確認密碼 var Cfpw =document.getElementById("cfpw"); EV.addEvent(Cfpw,"blur",cfPw); function cfPw(){ var cfpw =document.getElementById("cfpw").value; var cfpwicon=document.getElementById("cfpwicon"); var pwd =document.getElementById("password").value; if(cfpw==pwd&&cfpw!=""){ cfpwicon.style.backgroundImage="url('image/tick.png')"; cfpwicon.innerHTML=""; }else{ cfpwicon.style.backgroundImage="url('image/cross.png')"; cfpwicon.innerHTML="輸入的密碼不一致!"; cfpwicon.style.color="#dd0000"; } } //MSN var Msn = document.getElementById("msn"); EV.addEvent(Msn,"blur",checkMsn); function checkMsn(){ var msn =document.getElementById("msn").value; var msnicon =document.getElementById("msnicon"); var msnpatt = /\w+@[a-zA-Z0-9]+\.[a-zA-Z0-9]{2,14}/; if(msnpatt.test(msn)){ msnicon.style.backgroundImage="url('image/tick.png')"; msnicon.innerHTML=""; }else{ msnicon.style.backgroundImage="url('image/cross.png')"; msnicon.innerHTML="msn應為正確郵箱地址!"; msnicon.style.color="#dd0000"; } } //辦公電話 var officephone =document.getElementById("offphone"); EV.addEvent(officephone,"blur",checkoffPhone); function checkoffPhone(){ var offphone = document.getElementById("offphone").value; var offphoneicon =document.getElementById("offphoneicon"); var offpatt = /(\(\d{3,4}\)|\d{3,4}-)?\d{8}/; if(offpatt.test(offphone)){ offphoneicon.style.backgroundImage="url('image/tick.png')"; offphonecon.innerHTML=""; }else{ offphoneicon.style.backgroundImage="url('image/cross.png')"; offphoneicon.innerHTML="例:010-88888888"; offphoneicon.style.color="#dd0000"; } } //家庭電話 var Homephone =document.getElementById("homephone"); EV.addEvent(Homephone,"blur",checkHomephone); function checkHomephone(){ var homephone =document.getElementById("homephone").value; var homephoneicon =document.getElementById("homephoneicon"); var homepatt = /(\(\d{3,4}\)|\d{3,4}-)?\d{8}/; if(homepatt.test(homephone)){ homephoneicon.style.backgroundImage="url('image/tick.png')"; homephonecon.innerHTML=""; }else{ homephoneicon.style.backgroundImage="url('image/cross.png')"; homephoneicon.innerHTML="例:010-88888888"; homephoneicon.style.color="#dd0000"; } } //問題答案 function checkAnswer(){ var answer =document.getElementById("answer").value; var answericon =document.getElementById("answericon"); if(answer!=""){ answericon.style.backgroundImage="url('image/tick.png')"; answercon.innerHTML=""; }else{ answericon.style.backgroundImage="url('image/cross.png')"; answericon.innerHTML="密碼問題答案不能為空!"; answericon.style.color="#dd0000"; } } //登錄注冊 var login =document.getElementById("login"); EV.addEvent(login,"click",Login); function Login(){ var form =document.getElementById("form"); if(username.value==""){ alert("用戶名不能為空!"); this.value.focus(); return false; } if(password.value==""){ alert("密碼不能為空!"); this.value.focus(); return false; } if(email.value==""){ alert("email不能為空!"); this.value.focus(); return false; } else{ var info =confirm("信息填寫完整,確定注冊嗎?"); if(info==true){ window.open("http://www.eduasksz.com","_blank"); } } } } }
以上是“javascript中表單正則應用的示例分析”這篇文章的所有內容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內容對大家有所幫助,如果還想學習更多知識,歡迎關注億速云行業資訊頻道!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。