<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script type="application/javascript"> //驗證碼 function createCode(){ var code = Math.floor(Math.random()*9000+1000) var span = document.getElementById("codeSpan") span.innerHTML=code return code } //驗證用戶名 function codeUser(){ return codedata("user",/^[\u4e00-\u9fa5]{2,4}$/) } //驗證密碼 function codePassword(){ return codedata("password",/^(?:\d+|[a-zA-Z]+|[!@#$%^&*]+)$/) return codePassword2() } //校驗密碼 function codePassword2(){ //獲取第一次密碼 var pwd =document.getElementById("password").value //獲取第二次密碼 var pwd2 =document.getElementById("password2").value //比較兩次密碼是否相同 var span =document.getElementById("password2Span") if(pwd2==""||pwd2==null){ span.innerHTML="確認密碼不能為空" return false }else if(pwd2=pwd){ span.innerHTML="ok" return true }else{ span.innerHTML="兩次密碼不一致" return false } } //驗證手機號 function codePhone(){ return codedata("phone",/^[+]{0,1}(\d){1,3}[ ]?([-]?((\d)|[ ]){1,12})+$/) } //驗證郵箱 function codeEmail(){ return codedata("email",/^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/) } //封裝 function codedata(a,reg1){ //獲取用戶的用戶信息 var user = document.getElementById(a).value var span = document.getElementById(a+"Span") var alt = document.getElementById(a).alt //創建校驗規則 var reg=reg1; //校驗 if(user==""|| user==null){ span.innerHTML=alt+"不能為空" return false }else if(reg.test(user)){ span.innerHTML=alt+"ok" return true }else{ span.innerHTML=alt+"不符合規則" return false } } //驗證籍貫 function codeCity(){ //獲取用戶選擇的數據 var sel=document.getElementById("city").value; //獲取span var span=document.getElementById("citySpan"); //校驗 if(sel!=0){ span.innerHTML="籍貫選擇成功" return true }else{ span.innerHTML="籍貫不能為空" return false } } //驗證愛好 function codeHobby(){ //獲取愛好 var hobbys = document.getElementsByName("hobby") var span = document.getElementById("hobbySpan") for(var i =0;i<hobbys.length;i++){ if(hobbys[i].checked){ span.innerHTML="選擇愛好成功" return true } } span.innerHTML="愛好至少選擇一項" return false } //校驗是否同意公司協議 function checkAgree(){ document.getElementById("zc").disabled=!document.getElementById("agree").checked; } //提交判斷 function checkSub(){ codeUser(); codePassword(); codePassword2(); codePhone(); codeEmail(); codeCity(); codeHobby(); return codeUser()&&codePassword()&&codePassword2()&&codePhone()&&codeEmail()&&codeCity()&&codeHobby(); } </script> </head> <body onload="createCode()"> <div> <form name="" action="demo01.html" onsubmit="return checkSub()"> 用戶名：<input type="text" name="user" id="user" value="" onblur="codeUser()" alt="用戶名"><span id="userSpan"></span><br> 密碼：<input type="password" name="password" id="password" onblur="codePassword()" alt="密碼"><span id="passwordSpan"></span><br> 確認密碼：<input type="password" name="password2" id="password2" onblur="codePassword2()"><span id="password2Span"></span><br> 手機號：<input type="text" name="phone" id="phone" alt="手機號" onblur="codePhone()" alt="手機號"><span id="phoneSpan"></span><br> 郵箱：<input type="text" name="email" id="email" alt="郵箱" onblur="codeEmail()"><span id="emailSpan"></span><br> 性別： 男<input type="radio" name="sex" id="man" checked="checked"> 女<input type="radio" name="sex" id="feman"><br> 籍貫：<select id="city" name="city" onchange="codeCity()"> <option value="0">-請選擇-</option> <option value="1">廣州</option> <option value="2">上海</option> <option value="3">北京</option> </select><span id="citySpan"></span><br> 愛好：<input type="checkbox"name="hobby" value="lol" onclick="codeHobby()">LOL <input type="checkbox"name="hobby" value="sleep" onclick="codeHobby()">睡覺 <input type="checkbox"name="hobby" value="eat" onclick="codeHobby()">吃飯 <input type="checkbox"name="hobby" value="listen" onclick="codeHobby()">聽歌 <span id="hobbySpan"></span> <br> 個人介紹:<textarea name="inc"></textarea><br> 驗證碼：<input type="text" name="code" id="code" ><span id="codeSpan" onclick="createCode()"></span><br> <input type="checkbox"name="agree" id="agree" onclick="checkAgree()" >是否同意本公司協議<br> <input type="submit" name="zc" id="zc" value="立即注冊" disabled="disabled"> </form> </div> </body> </html>