<html> <head> <title>注册页面</title> <meta charset="UTF-8"/> <script type="text/javascript"> // 校验用户名 function checkUname(){ // 获取用户名对象 var uname=document.getElementById("uname").value; // 创建校验正则表达式判断条件 var reg=https://www.jb51.net/^[\u4e00-\u9fa5]{2,4}$/; //其中前面的一部分是汉字的正则表达式，后面的是汉字的合法范围,（第一次因为,正则表达式写错了） // 获取后面的提示字 var nameSpan=document.getElementById("nameSpan"); //span是一个没有特殊含义的自定义标签用来辅助设计 // 进行校验 if(uname=="" || uname ==null){ nameSpan.innerHTML="用户名不能为空"; nameSpan.style.color="red"; return false; }else if(reg.test(uname)){ nameSpan.innerHTML="用户名合法"; nameSpan.style.color="green"; return true; }else{ nameSpan.innerHTML="用户名不合法"; nameSpan.style.color="red"; return false; } } function checkPassword(){ // 获取用户名对象 var password1=document.getElementById("pws1").value; //我们是通过对象的value值（文本输入框的内容）进行判断的 // 创建校验正则表达式判断条件 var reg=https://www.jb51.net/^[a-z]\w{4,8}$/; //首位为字母，后面为数字4到8位 () // 获取后面的提示字 var pwsSpan=document.getElementById("passwordSpan"); //span是一个没有特殊含义的自定义标签用来辅助设计 // 进行校验 if(password1=="" || password1 ==null){ pwsSpan.innerHTML="*密码不能为空"; pwsSpan.style.color="red"; return false; }else if(reg.test(password1)){ pwsSpan.innerHTML="*密码合法"; pwsSpan.style.color="green"; return true; }else{ pwsSpan.innerHTML="*密码不合法"; pwsSpan.style.color="red"; return false; } // return password1.value; checkPassworded(); //在失去焦点的时候(调用该函数时，也进行确认密码的校验)，如果没有这个操作，当重新修改用户密码时，其不会在进行确认密码(即修改密码后即使不相同也不会报错) } // 校验确定密码 function checkPassworded(){ // 获取确认密码对象 var password2=document.getElementById("pws2").value; // 获取第一次密码对象,以进行比较 var password1=document.getElementById("pws1").value; // 获取提示语的对象 var pwslSpan=document.getElementById("passwordlSpan"); // reg=checkPassword(); // if(reg="" || reg=null) //没能实现 if(password2=="" || password2==null){ //null就是字符串类型，表示空字符串 pwslSpan.innerHTML="*确认密码不能为空"; pwslSpan.style.color="red"; return false; }else if(password1 == password2){ pwslSpan.innerHTML="*两次密码相同"; pwslSpan.style.color="green"; return true; }else{ pwslSpan.innerHTML="*两次密码不相同"; pwslSpan.style.color="red"; return false; } } //-------------------------------------------------------------------------------------------------------- // 考虑到有很多的校验方法都用到相同的方法和结构,所以我们在此对其进行封装 function checkAll(id,reg){ //封装的基本思想：相同的直接写入，不同的利用参数转换 //接收传递的对象 var inp=document.getElementById(id); //我们传的参数是带双引号的 var ie=inp.value; //我们通过对象的值进行判断 var alt=inp.alt; //通过对象来获得其对应的一些值 //接收传递的提示框对象 var span=document.getElementById(id+"Span"); if(ie=="" || ie==null){ span.innerHTML=alt+"不能为空"; span.style.color="red"; return false; }else if(reg.test(ie)){ span.innerHTML=alt+"合法"; span.style.color="green"; return true; }else{ span.innerHTML=alt+"不合法"; span.style.color="red"; return false; } } // 手机号的校验 function checkPhone(){ return checkAll("phone",/^1[3,4,5,7,8]\d{9}$/); } // 邮箱的校验 function checkMail(){ return checkAll("mail",/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+$/); } // 添加验证码 function checkCode(){ // 获取验证码填写对象 var code=document.getElementById("code1"); // 获取验证显示对象 var codeSpan=document.getElementById("codeSpan"); var tag=Math.floor(Math.random()*9000+1000); //产生四位的整数，Math.floor表示向下取整， codeSpan.innerHTML=tag; } // 校验验证码 function checkCoded(){ // 获取输入的验证码对象 var code2=document.getElementById("code1").value; // 获取显示的验证码对象,以进行比较 var codeSpan1=document.getElementById("codeSpan"); var code1=codeSpan1.innerHTML; //通过对象利用其innerHTML属性进行获得，其利用value不正确，没进一步探索 // 获取提示语的对象 var codeSpan2=document.getElementById("codeSpan2"); // alert(code1); //得到的值是undefined // alert(code2); if(code2=="" || code2==null){ codeSpan2.innerHTML="*验证码不能为空"; codeSpan2.style.color="red"; return false; }else if(code1 == code2){ codeSpan2.innerHTML="*验证码相同"; codeSpan2.style.color="green"; return true; }else{ codeSpan2.innerHTML="*验证码不相同"; codeSpan2.style.color="red"; return false; } } // 校验选择框 function checkSelect(){ // 获取选择框对象 var select=document.getElementById("select").value; // 获取选择框提示对象 var selectSpan=document.getElementById("selectSpan"); // selectSpan.style.fontSize="15px"; if(select==0){ selectSpan.innerHTML="地址选择不能为空"; selectSpan.style.color="red"; return false; }else{ selectSpan.innerHTML=select; selectSpan.style.color="green"; return true; } } // 检测多选框 function checkFav(){ // 获取多选框对象 var fav=document.getElementsByName("fav"); // 获取多选框提示对象 var favSpan=document.getElementById("favSpan"); favSpan.style.fontSize="10px"; for(var i=0;i<fav.length;i++){ if(fav[i].checked){ //fav[i]是一个对象，fav[i].checked是一个值 favSpan.innerHTML="选择成功"; favSpan.style.color="green"; return true; //选择成功后直接返回 } } //在整个循环结束后都没有进行选择，才进行不符合提示 favSpan.innerHTML="至少选择一个"; favSpan.style.color="red"; return false; } function checkAgree(){ // 当同意公司协议的时候才能进行提交操作 document.getElementById("pop").disabled=!document.getElementById("agree").checked; // 当同意公司协议的时候,对应的submit的对应值是true,所以我们利用!把disabled的值赋值为false } function checkSub(){ // 校验是否可以提交 // 对于所有的校验函数,只要有一个不满足条件,就不能提交 checkUname(); checkPassword(); checkPassworded(); checkPhone(); checkMail(); checkCoded(); checkSelect(); checkFav(); //当所有值都为true的时候才能进行提交，所以对应的函数有返回值，不满足时返回false，满足时返回true return checkUname()&&checkPassword()&&checkPassworded()&&checkPhone()&&checkMail()&&checkCoded()&&checkSelect()&&checkFav(); } </script> <style type="text/css"> tr,td,table{ background-color: transparent; border 0px; } span{ font-size: 10px; } #codeSpan{ width: 30px; height: 25px; font-size: 20px; color: black; background-size: 100%,100%; /*后面三行是使背景图片占满整个区域*/ background-repeat: no-repeat; background-image: url(../img/0.jpg); } #selectSpan{ font-size: 15px; } #showdiv{ width: 30%; height: 100%; background-image: url(../img/5.jpg); background-size: cover; background-repeat: no-repeat; margin-left: 33%; } input,select,[type=checkbox],#bigText{ background-color: transparent; /* 把一些边框背景变为透明的以显示背景*/ } </style> </head> <body> <form action="#" action="get"> <div> <table cellpadding="5px" cellspacing="0px"> <tr> <td>姓名</td> <td> <input type="text" value="" onblur="checkUname()"/> <span></span> <!-- 以焦点的有无来进行判断--> </td> </tr> <tr> <td>邮箱</td> <td> <input type="text" value="" alt="邮箱" onblur="checkMail()"/> <span></span> </td> </tr> <tr> <td>手机号</td> <td> <!--查了很长时间的错误，就因为调用的函数没有用""包含，""在外面了--> <input type="text" value="" alt="手机号" onblur="checkPhone()"/> <span></span> </td> </tr> <tr> <td>密码</td> <td> <input type="password" value="" onblur="checkPassword()"/> <span></span> </td> </tr> <tr> <td>确认密码</td> <td> <input type="password" value="" onblur="checkPassworded()"/> <span></span> </td> </tr> <tr> <td>性别</td> <td> 男<input type="radio" value="1" checked="checked" /> 女<input type="radio" value="0" /> </td> </tr> <tr> <td>所在地</td> <td> <select onchange="checkSelect()"> <option value="0"></option> <option value="山东">山东</option> <option value="北京">北京</option> <option value="河南">河南</option> </select> <span></span> </td> </tr> <tr> <td>爱好</td> <td> <!--我们对每一个都进行事件触发检验，因为每个选项都是平等的--> 动漫<input type="checkbox" value="animation"/> 游戏<input type="checkbox" value="game" /> 打球<input type="checkbox" value="ball" /> <span></span> </td> </tr> <tr> <td>个人简介</td> <td> <textarea rows="7px" cols="25px"></textarea> </td> </tr> <tr> <td>验证码</td> <td> <input type="password" value="" onblur="checkCoded()"/> <span></span><br /> <span></span> <!--<a href=""><spanexternal nofollow" codeSpan"></span></a>--> <!-- 行内显示一定的距离，可以直接用 --> </td> <!--可以用a标签把鼠标的图标变成一个小手，但是会触发超链接事件，感觉不提倡--> </tr> <tr> <td colspan="2"> <input type="checkbox" value="1" />是否同意我们的协议 <!--<input type="radio" value="1" />是否同意我们的协议--> <!--radio是互斥选择，当只有一个的时候，选中了，就取消不了了，要进行一些处理--> </td> </tr> <tr> <td colspan="2"> <input type="submit" value="注册" disabled="true"/> <!--我们可不是所有的情况都可以进行submit--> </td> </tr> </table> </div> </form> </body> </html>
运行效果：
