<!DOCTYPE html>
<html lang="en">
<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="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>
