//博客園注冊頁面<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>博客園注冊頁面</title> <style type="text/css"> table{ margin: 0 auto; } </style> <script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script> $(document).ready(function(){ //表單單擊事件 ? ?$("#submit").click(function(){ var names=document.getElementById("name");//獲取用戶名 if(names.validity.valueMissing==true){ names.setCustomValidity("用戶名不能為空"); } else if(names.validity.patternMismatch==true){ names.setCustomValidity("用戶名必須以英文開頭4-16個英文字母或數字"); } else{ names.setCustomValidity(""); } var pwd=document.getElementById("pwd");//獲取密碼 if(pwd.validity.valueMissing==true){ pwd.setCustomValidity("密碼不能為空"); } else if(pwd.validity.patternMismatch==true){ pwd.setCustomValidity("密碼必須4-10個英文字母或數字"); } else{ pwd.setCustomValidity(""); } var quepas=document.getElementById("quepwd");//確認密碼 if(!quepas.equals(pwd)){ quepas.setCustomValidity("兩次輸入的密碼不一致"); } var email=document.getElementById("email");//獲取郵箱 if(email.validity.valueMissing==true){ email.setCustomValidity("郵箱不能為空"); } else if(email.validity.patternMismatch==true){ email.setCustomValidity("郵箱格式不正確"); } else{ email.setCustomValidity(""); } var phone=document.getElementById("phone");//獲取手機號 if(phone.validity.valueMissing==true){ phone.setCustomValidity("手機號不能為空"); } else if(phone.validity.patternMismatch==true){ phone.setCustomValidity("手機號只能是1開頭的11位數字"); } else{ phone.setCustomValidity(""); ? ?} var bith=document.getElementById("bith");//獲取生日 if(bith.validity.valueMissing==true){ bith.setCustomValidity("生日不能為空"); } else if(bith.validity.patternMismatch==true){ bith.setCustomValidity("生日的年份為1900~2016，格式為1980-5-12或1988-02-04"); } else{ bith.setCustomValidity(""); } });? }); </script> </head> <body> <h2>博客園</h2> <h4>新用戶注冊</h4><hr /> <form action="" method="post"> <table> <tr> <td>用戶名：</td><td><input ?placeholder="以英文開頭4-16個英文字母或數字" required="" style="width: 200px;" pattern="[a-zA-Z][a-zA-Z0-9]{3,15}" id="name"/></td> </tr> <tr> <td>密碼：</td><td><input type="password" placeholder="4-10個英文字母或數字" required="" style="width: 200px;" pattern="[a-zA-Z0-9]{4,10}" id="pwd"/></td> </tr> <tr> <td>確認密碼：</td><td><input type="password" placeholder="" required="" style="width: 200px;" id="quepwd"/></td> </tr> <tr> <td>電子郵箱：</td><td><input placeholder="" required="" style="width: 200px;" pattern="\w+@\w+(\.[a-zA-Z]{2,3}){1,2}" id="email"/></td> </tr> <tr> <td>手機號：</td><td><input placeholder="" required="" style="width: 200px;" pattern="1\d{10}" id="phone"/></td> </tr> <tr> <td>生日：</td><td><input placeholder="" required="" style="width: 200px;" pattern="((19\d{2})|(201\d))-(0?[1-9]|1[0-2])-(0?[1-9]|[1-2]\d|3[0-1])" id="bith"/></td> </tr> <tr> <td colspan="2" align="center"><input ?type="submit" id="submit"/></td> </tr> </table> </form> </body></html>//<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>百度注冊頁面</title> <style type="text/css"> .reg-inpiut { margin-top: 20px; } .input-label { display: inline-block; text-align: right; width: 100px; } .reg-inpiut { height: 30px; line-height: 30px; } .reg-inpiut i { color: #f00; vertical-align: middle; padding-right: 5px; } #tel-tip { font-size: 12px; color: #f00; } </style> <script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript"> $(function(){ $("#submit").click(function(){ var uname=document.getElementById("uname"); var names=document.getElementById("names"); if(uname.validity.valueMissing==true){ //uname.setCustomValidity("用戶名不能為空"); names.innerHTML="用戶名不能為空"; }else if(uname.validity.patternMismatch==true){ //uname.setCustomValidity("英文，數字長度為4-12個字符"); names.innerHTML="英文，數字長度為4-12個字符"; }else{ //uname.setCustomValidity(""); names.innerHTML="ok"; } var pwd=document.getElementById("pwd");//獲取密碼 var pwds=document.getElementById("pwds"); if(pwd.validity.valueMissing==true){ //pwd.setCustomValidity("密碼不能為空"); pwds.innerHTML="密碼不能為空"; } else if(pwd.validity.patternMismatch==true){ //pwd.setCustomValidity("密碼必須4-10個英文字母或數字"); pwds.innerHTML="密碼必須4-10個英文字母或數字"; } else{ //pwd.setCustomValidity(""); pwds.innerHTML=""; } var quepas=document.getElementById("quepwdsss");//確認密碼 （//這里總是無緣無故報錯，我剛開始的時候是對的，但后來就不行了） if(!quepas.equals(pwd)){ quepas.setCustomValidity("兩次輸入的密碼不一致"); } var email=document.getElementById("email");//電子郵件 var emsil=document.getElementById("emsil"); if(email.validity.valueMissing==true){ //email.setCustomValidity("郵箱不能為空"); emsil.innerHTML="郵箱不能為空"; } else if(email.validity.patternMismatch==true){ //email.setCustomValidity("郵箱格式必須包含“@”和“."); emsil.innerHTML="郵箱格式必須包含“@”和“.”"; } else{ //email.setCustomValidity(""); emsil.innerHTML=""; } var bith=document.getElementById("both");//獲取生日 if(bith.validity.valueMissing==true){ bith.setCustomValidity("生日不能為空"); } else if(bith.validity.patternMismatch==true){ bith.setCustomValidity("生日的年份為1900~2016，格式為1980-5-12或1988-02-04"); } else{ bith.setCustomValidity(""); } }); }); </script> </head> <body> <h3>用戶注冊</h3> <form action="" method="post"> <div class="reg-inpiut"> <label class="input-label"><i>*</i>用戶名：</label> <input type="text" id="uname" placeholder="英文，數字長度為4-12個字符" style="width: 200px;" required pattern="\w{4,12}"/> <span id="names"></span> </div> <div class="reg-inpiut"> <label class="input-label"><i>*</i>密碼：</label> <input type="password" id="pwd" placeholder="英文，數字長度為6-12個字符" style="width: 200px;" required pattern="[a-z-A-Z0-9]{6,12}"/> <span id="pwds"></span> </div> <div class="reg-inpiut"> <label class="input-label"><i>*</i>確認密碼：</label> <input type="password" id="quepwdsss" placeholder="" style="width: 200px;" required/> <span id="quepwds"></span> </div> <div class="reg-inpiut"> <label class="input-label"><i>*</i>性別：</label> <input type="radio" name="sex" checked="checked"/>男 <input type="radio" name="sex" />女 <span>請選擇性別</span> </div> <div class="reg-inpiut"> <label class="input-label"><i>*</i>電子郵件：</label> <input type="text" id="email" placeholder="" style="width: 200px;" required pattern="\w+@\w+(\.[a-zA-Z]{2,3}){1,2}"/> <span id="emsil"></span> </div> <div class="reg-inpiut"> <label class="input-label"><i>*</i>出生日期：</label> <input type="text" id="both" placeholder="" style="width: 200px;" required pattern="((19\d{2})|(201\d))-(0?[1-9]|1[0-2])-(0?[1-9]|[1-2]\d|3[0-1])"/> <span id="btith"></span> </div> <div class="reg-inpiut"> <input type="submit" id="submit" value="注冊" style="margin-left: 100px;"/> <input type="reset" value="清除" ?/> </div> </form> </body></html>
為什么寫的兩段驗證確認密碼的代碼都一樣，但第二個一直報錯，為什么
qq_Dreamy_舊城_0
2017-07-07 11:59:03
