實驗：驗證使用者資訊的合法性
阿新 • • 發佈：2018-12-18
宣告：該程式碼還在更新中如有錯誤請見諒....
程式碼如下：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>使用者註冊頁面</title> <style> #main ul{ list-style:none; background-image:url(../111.jpg); padding-top: 0; } #main li{ padding:5px; } body{ background-image:url(../111.jpg); margin:0px; /*設定外邊距*/ padding:0px; /*設定內邊距*/ font-size:9pt; /*設定字型大小*/ } header{ background-image: url(../111.gif);/*設定背景*/ height:168px; } section{ margin:0 auto auto auto; /*設定外邊距*/ width:694px; clear: both; /*兩側均不可以有浮動內容*/ background-color: #ffffff; border:1px solid #407d2a; /*設定顯示1畫素的外邊框*/ height:545px; } aside{ width:170px; float:left; /*浮動在左側*/ border-right:1px solid #407d2a; /*設定右側顯邊框*/ padding-right: 5px; } #left{ float:right; /*浮動在左側*/ } #right{ float:right; /*浮動在右側*/ } #main{ float:left; /*浮動在左側*/ } </style> <script language="javascript"> /*檢驗全部表單元素是否為空*/ function checkBlank(Form){ var v=ture; for(i=0;i<Form.length;i++){ if(Form.elements[i].value==" "){ alter(Form.elements[i].title+"不能為空！"); Form.elements[i].focus(); v=false; return false; } } return v; } /*驗證使用者名稱是否合法*/ function checkuesrname(username){ var str=username; var Expression=/^(\w){3,20}$/; var objExp=new RegExp(Expression); return objExp.test(str); /*通過正則表示式驗證*/ } /*驗證密碼是否合法*/ function checkPWD(PWD){ var str=PWD; var Expression=/^[A-za-z]{1}([A-Za-Z0-9]|[._]){5,19}$/; var objExp=new RegExp(Expression); return objExp.test(str); } /*驗證E-mail是否合法*/ function checkmail(email){ var str=email; var Expression=/\w+([-+.']\w+)*@\w+([-.])\w+)*\.\w+([-.]\w+)*/; var objExp=new RegExp(Expression); return objExp.test(str); } function check(Form){ if(checkBlank(Form)){ if(checkusername(Form.username.value)){ /*驗證使用者名稱*/ if(checkPWD(Form.pwd.value)){ /*驗證密碼*/ if(Form.pwd.value==Form.repwd.value){ /*驗證兩次密碼輸入*/ if(checkmail(Form.email.value)){ /*驗證郵箱*/ return ture; }else{ alert("請輸入正確E-mail地址！"); Form.email.focus(); return false; } }else{ alert("兩次密碼輸入不一致，請重新輸入！"); return false; } }else{ alert("您的密碼輸入不合法！"); Form.pwd.focus(); return false; } }else{ alert("您輸入的使用者名稱不合法！"); Form.username.focus(); return false; } }else return false; } </script> </head> <body> <section style="background-image: url(../112.gif)"> <header></header> <div id="left"><img src="../112.png" width="0" height="0"></div> <aside style="background-image: url(../111.jpg)"> <img src="../111.jpg" width="44" height="54"> <b>註冊幫助</b> <ul style="background-image: url(../112.png)" > <li> 會員名：為會員登入網站的通行證，長度控制在3-20個字元之內。<br><br> </li> <li> 密碼：請設定在6-20位之間。<br><br> </li> <li> 確定密碼：確定密碼必須與密碼一致。<br><br> </li> <li> Email：請輸入有效的Email地址，以便於與您聯絡。 </li> </ul> </aside> <div id="main"> <form name="form1" method="post" action="" onSubmit="return check(this)"> <ul> <li> 用 戶 名 <input type="text" name="username" id="username" placeholder="長度控制3-20字元之間" autofocus size="23" title="使用者名稱"> </li> <li> 密 碼 <input name="pwd" type="password" id="pwd" placeholder="請設定在6-20位之間" size="23" title="密碼"> </li> <br> <li> 確認密碼： <input type="password" name="repwd" id="repwd" size="23" title="確認密碼" > </li> <li> 性 別 <input type="radio" name="sex" id="sex_0" form="form1" value="男" checked > 男 <input type="radio" name="sex" value="女" id="sex_1"> 女 </li> <li> E-mail: <input type="email" name="email" id="email" size="40" title="E-mail 地址"> </li> <li> <input type="submit" name="submit" id="submit" value="提交"> <input type="reset" name="reset" id="reset" value="重置"> </li> </ul> </form> </div> <div id="right"> <img src="../111.jpg" width="44" height="89"></div> </section> </body> </html>
