<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> </style> </head>
<body> <form action="ok.html" id="r"> <table cellspacing=0 cellpadding=0 border="1px solid black" align="center" height=568px padding-left=10px> <tr> <td colspan="2" align="center">用户名注册</td> </tr> <tr> <td align="right">姓名：</td> <td><input type="text" id="name"><span></span></td> </tr> <tr> <td align="right">性别：</td> <td><input type="radio" name="sex" id="sexnan" checked>男 <input type="radio" name="sex" id="sexnv">女 </td> </tr> <tr> <td align="right">年龄：</td> <td><input type="text" id="age"><span></span></td> </tr> <tr> <td align="right">密码：</td> <td><input type="text" id="psd1"><span></span></td> </tr> <tr> <td align="right">确认密码：</td> <td><input type="text" id="psd2"><span></span></td> </tr> <tr> <td align="right">手机：</td> <td><input type="text" id="tel"><span></span></td> </tr> <tr> <td align="right">QQ:</td> <td><input type="text" id="qq"><span></span></td> </tr> <tr> <td align="right">邮箱：</td> <td><input type="text" id="email"><span></span></td> </tr> <tr> <td align="right">邮编：</td> <td><input type="text" id="pc"><span></span></td> </tr> <tr> <td align="right">身份证：</td> <td><input type="text" id="Id"><span></span></td> </tr> <tr> <td align="right">验证码</td> <td><input type="text" id="yzm"> <span style="width:80px;height:20px;border:1px solid red;display: inline-block;"></span> <a href="#" id="btn">看不清</a><span class="tit"></span> </td> </tr> <tr> <td align="right">爱好</td> <td id="hobby"> <input type="checkbox" name="zuqiu" id="zuqiu">足球 <input type="checkbox" name="lanqiu" id="lanqiu" checked>篮球 <input type="checkbox" name="paiqiu" id="paiqiu">排球 <input type="checkbox" name="wangqiu" id="wangqiu">网球 </td> </tr> <tr> <td colspan="2" align="center"> <input type="submit" id="sub" value="提交"> </td> </tr> </table> </form>
</body>
</html> <script> //名字验证:单词字符组成 6-10位 ，不能用数字开头 var flagename = false; var oname = document.querySelector("#name"); oname.onblur = function () { var reg = /^[a-zA-Z]{6,10}$/; var ospan = oname.nextElementSibling; if (reg.test(oname.value)) { ospan.innerHTML = "输入正确"; ospan.style.color = "green"; flagename = true; } else { ospan.innerHTML = "请输入6-10位单词字符"; ospan.style.color = "red"; flagename = false; } } //年龄： 只能由数字组成 年龄不能为负数 var flageage = false; var oage = document.querySelector("#age"); oage.onblur = function () { var reg = /^[1-9][0-9]?$/; var ospan = oage.nextElementSibling; if (reg.test(oage.value)) { ospan.innerHTML = "输入正确"; ospan.style.color = "green"; flageage = true; } else { ospan.innerHTML = "输入数字，不能为负数"; ospan.style.color = "red"; flageage = false; } } //密码：6-18位字符组成 有密码强弱验证 var flagepsd1 = false; var opsd1 = document.querySelector("#psd1"); opsd1.onblur = function () { var ospan = opsd1.nextElementSibling; var nreg = /^\d{6,18}$/; //只有数字 var zreg = /^[a-zA-Z]{6,18}$/;//只有字母 var treg = /^[！@#￥%&*-]{6,18}$/;//只有特殊字符 var _nreg = /\d{6,18}/; //包含数字 var _zreg = /[a-zA-Z]{6,18}/;//包含字母 var _treg = /[！@#￥%&*-]{6,18}/;//包含特殊字符 console.log((opsd1.value).length) if ((opsd1.value).length > 5 && (opsd1.value).length < 19) {//先判断密码长度，再进入强弱分支 if (nreg.test(opsd1.value) || zreg.test(opsd1.value) || nreg.test(opsd1.value)) { ospan.innerHTML = "弱"; ospan.style.color = "red"; flagepsd1 = true; } else if (_nreg.test(opsd1.value) && _zreg.test(opsd1.value) && _treg.test(opsd1.value)) { ospan.innerHTML = "强"; ospan.style.color = "green"; flagepsd1 = true; } else { ospan.innerHTML = "中"; ospan.style.color = "yellow"; flagepsd1 = true; } } else { ospan.innerHTML = "请输入长度6-18位的密码"; ospan.style.color = "red"; flagepsd1 = false; } } //3、确认密码和密码相同 var flagepsd2 = false; var opsd2 = document.querySelector("#psd2"); var ospan = opsd2.nextElementSibling; opsd2.onblur = function () { if (opsd2.value == opsd1.value) { ospan.innerHTML = "输入正确"; ospan.style.color = "green"; flagepsd2 = true; } else { ospan.innerHTML = "密码不符"; ospan.style.color = "red"; flagepsd2 = false; } } //4、手机号： 15 13 18 开头 var flagtel = false; var otel = document.querySelector("#tel"); var ospan = otel.nextElementSibling; otel.onblur = function () { var reg = /^1[5|3|8]{1}\d{9}$/; if (reg.test(otel.value)) { ospan.innerHTML = "输入正确"; ospan.style.color = "green"; flagtel = true; } else { ospan.innerHTML = "请输入13,15,18开头的11位号码"; ospan.style.color = "red"; flagtel = false; } } //5、qq ： 5-12位数字 第一位不能是0 var flagqq = false; var oqq = document.querySelector("#qq"); oqq.onblur = function () { var reg = /^[1|2|3|4|5|6|7|8|9]\d{4,11}$/; var ospan = oqq.nextElementSibling; if (reg.test(oqq.value)) { ospan.innerHTML = "输入正确"; ospan.style.color = "green"; flagqq = true; } else { ospan.innerHTML = "q请输入5-12位，首字母不为0的qq号"; ospan.style.color = "red"; flagqq = false; } } //6、邮箱： 必须有@符号 var flagemail = false; var oemail = document.querySelector("#email"); oemail.onblur = function () { var reg = /^\w+@(qq|163).com$/; var ospan = oemail.nextElementSibling; if (reg.test(oemail.value)) { ospan.innerHTML = "输入正确"; ospan.style.color = "green"; flagemail = true; } else { ospan.innerHTML = "请输入包含@邮箱号"; ospan.style.color = "red"; flagemail = false; } } //7、邮编：6为数字 var flagpc = false; var opc = document.querySelector("#pc"); opc.onblur = function () { var reg = /^\d{6}$/; var ospan = opc.nextElementSibling; if (reg.test(opc.value)) { ospan.innerHTML = "输入正确"; ospan.style.color = "green"; flagpc = true; } else { ospan.innerHTML = "请输入6位数字的邮编"; ospan.style.color = "red"; flagpc = false; } } //8、身份证： 18位 最后一位考虑有x var flagid = false; var oid = document.querySelector("#Id"); oid.onblur = function () { var reg = /^\d{17}(\d|X)$/; var ospan = oid.nextElementSibling; if (reg.test(oid.value)) { ospan.innerHTML = "输入正确"; ospan.style.color = "green"; flagid = true; } else { ospan.innerHTML = "18位身份证，最后一位可以有X"; ospan.style.color = "red"; flagid = false; } } // 9、验证码 // 输入的验证码必须和红色框中的相同， 点击看不清可以实现验证码的切换 // 验证码由字母 数字组成 var flagoyzm = false; //随机函数 function getRandom(min, max) { if (min > max) { var ls = min; min = max; max = ls; } return Math.floor(Math.random() * (max - min + 1)) + min; } //随机验证码 function randomYzm() { var str = ""; for (var i = 1; i <= 4; i++) { var num1 = getRandom(0, 9); var num2 = String.fromCharCode(getRandom(65, 90)); var num3 = String.fromCharCode(getRandom(97, 122)); str += num1 + num2 + num3 } var str1 = "" for (var j = 1; j <= 4; j++) { str1 += str[j]; } return str1; }
var obtn = document.querySelector("#btn"); yzm.nextElementSibling.innerHTML = randomYzm();
obtn.onclick = function () { yzm.nextElementSibling.innerHTML = randomYzm(); } var oyzm = document.querySelector("#yzm"); oyzm.onblur = function () { var otit = document.querySelector(".tit") if (oyzm.value == oyzm.nextElementSibling.innerHTML) { otit.innerHTML = "输入正确"; otit.style.color = "green"; flagoyzm = true; } else { otit.innerHTML = "请重新输入"; otit.style.color = "red"; flagoyzm = false; } } //判断提交 var or = document.querySelector("#r") or.onsubmit = function () { if (flagename && flageage && flagepsd1 && flagepsd2 && flagtel && flagqq && flagemail && flagpc && flagid && flagoyzm) { return true; } return false; } </script>