<!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-zd]+([-_.][A-Za-zd]+)*@([A-Za-zd]+[-.])+[A-Za-zd]{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>