要求:
1、使用失去焦点事件完成表单验证 每一项验证失去焦点时都可以即时验证
2、姓名: 单词字符组成 6--10为 ,不能用数字开头
年龄: 只能由数字组成 年龄不能为负数
密码:6--18位字符组成 有密码强弱验证
3、确认密码和密码相同
4、手机号: 15 13 18 开头
5、qq : 5--12位数字 第一位不能是0
6、邮箱: 必须有@符号
7、邮编:6为数字
8、身份证: 18位 最后一位考虑有x
9、验证码
输入的验证码必须和红色框中的相同, 点击看不清可以实现验证码的切换
验证码由字母 数字组成
10、爱好和性别必选
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>
<body>
<form action="http://www.baidu.com" method="get" id="mf">
<table width="449" height="530" border="1" align='center'>
<tr>
<td colspan="2" align="center">用户名注册</td>
</tr>
<tr>
<td width="116" align="right">姓名:</td>
<td width="323"><label>
<input type="text" name="" id="name" />
<span id="nameSpan" style="color: red;font-size: 12px;"></span>
</label></td>
</tr>
<tr>
<td width="116" align="right">性别:</td>
<td width="323"><label>
<input type="radio" name="rad" class="sex" />男
<input type="radio" name="rad" class="sex" />女
<span id="sexSpan" style="color: red;font-size: 12px;"></span>
</label></td>
</tr>
<tr>
<td align="right">年龄:</td>
<td><label>
<input type="text" name="" id="age" />
<span id="ageSpan" style="color: red;font-size: 12px;"></span>
</label></td>
</tr>
<tr>
<td align="right">密码:</td>
<td><label>
<input type="password" name="" id="pwd" />
<span id="pwdSpan" style="color: red;font-size: 12px;"></span>
</label></td>
</tr>
<tr>
<td align="right">确认密码:</td>
<td><label>
<input type="password" name="" id="qpwd" />
<span id="qpwdSpan" style="color: red;font-size: 12px;"></span>
</label></td>
</tr>
<tr>
<td align="right">手机:</td>
<td><label>
<input type="text" name="" id="tel" />
<span id="telSpan" style="color: red;font-size: 12px;"></span>
</label></td>
</tr>
<tr>
<td align="right">QQ:</td>
<td><label>
<input type="text" name="" id="qq" />
<span id="qqSpan" style="color: red;font-size: 12px;"></span>
</label></td>
</tr>
<tr>
<td align="right">邮箱:</td>
<td><label>
<input type="text" name="" id="email" />
<span id="emailSpan" style="color: red;font-size: 12px;"></span>
</label></td>
</tr>
<tr>
<td align="right">邮编:</td>
<td><label>
<input type="text" name="" id="eml" />
<span id="emlSpan" style="color: red;font-size: 12px;"></span>
</label></td>
</tr>
<tr>
<td align="right">身份证:</td>
<td><label>
<input type="text" name="" id="sname" />
<span id="snameSpan" style="color: red;font-size: 12px;"></span>
</label></td>
</tr>
<tr>
<td align="right">验证码:</td>
<td><label>
<input type="text" id="yzm" />
<span id="yzmName" style="width:60px;height: 15px;border: 1px solid red;display: inline-block;font-size: 12px;"></span>
<a href="#" id="look" style="font-size: 12px;">看不清</a>
<span id="yzmSpan" style="color: red;font-size: 12px;"></span>
</label></td>
</tr>
<tr>
<td align="right">爱好:</td>
<td><label>
<input type="checkbox" name="a" id="c1">
足球
<input type="checkbox" name="a" id="c2">
篮球
<input type="checkbox" name="a" id="c3">
排球
<input type="checkbox" name="a" id="c4">
网球<span id="aSpan" style="color: red;font-size: 12px;"></span>
</label></td>
</tr>
<tr>
<td height="36" colspan="2" align="center"><label>
<input type="submit" value="注册" id="sbt" />
<span id="sbtSpan" style="color: red;font-size: 12px;"></span>
</label></td>
</tr>
</table>
</form>
</body>
</html>
//姓名
var _name = document.getElementById("name");
var nameSpan = document.getElementById("nameSpan");
var flagname = false;
_name.onblur = function() {
var reg = /^\D[a-zA-Z]{6,10}$/i;
var str = _name.value;
if (!reg.test(str)) {
nameSpan.innerText = "请输入正确格式";
flagname = false;
} else {
nameSpan.innerText = "";
flagname = true;
}
}
//年龄
var _age = document.getElementById("age");
var ageSpan = document.getElementById("ageSpan");
var flagage = false;
_age.onblur = function() {
var reg = /^\d{1,3}$/;
var str = _age.value;
if (!reg.test(str)) {
ageSpan.innerText = "请输入正确格式";
flagage = false;
} else {
ageSpan.innerText = "";
flagage = true;
}
}
//密码
var pwd = document.getElementById("pwd");
var pwdSpan = document.getElementById("pwdSpan");
var flagpwd = null;
pwd.onblur = function() {
var str = pwd.value;
var regpwd = /^.{6,18}$/;
var _regNum = /\d+/; //字符串中包含至少一个数字
var _regLetter = /[a-zA-Z]+/; //至少包含一个字母
var _regChar = /[!@#$%]+/; //至少包含一个其他字符
//纯
var regNum = /^\d+$/;
var regLetter = /^[a-zA-Z]+$/;
var regChar = /^[!@#$%]+$/;
if (regpwd.test(str)) {
flagpwd = true;
if (regNum.test(str) || regLetter.test(str) || regChar.test(str)) {
pwdSpan.innerText = "密码强度:弱";
} else if (_regNum.test(str) && _regLetter.test(str) && _regChar.test(str)) {
pwdSpan.innerText = "密码强度:强";
} else {
pwdSpan.innerText = "密码强度:中";
}
} else {
flagpwd = false;
pwdSpan.innerText = "密码格式不正确";
}
}
//确认密码
var _qpwd = document.getElementById("qpwd");
var qpwdSpan = document.getElementById("qpwdSpan");
var flagqpwd = false;
_qpwd.onblur = function() {
var str = _qpwd.value;
if (str == pwd.value) {
qpwdSpan.innerText = "";
flagqpwd = true;
} else {
qpwdSpan.innerText = "请确认密码";
flagqpwd = false;
}
}
//手机
var _tel = document.getElementById("tel");
var telSpan = document.getElementById("telSpan");
var flagtel = false;
_tel.onblur = function() {
var reg = /^1(5|3|8){1}\d{9}$/;
var str = _tel.value;
if (reg.test(str)) {
telSpan.innerText = "";
flagtel = true;
} else {
telSpan.innerText = "请输入正确的电话号码";
flagtel = false;
}
}
// QQ
var _qq = document.getElementById("qq");
var qqSpan = document.getElementById("qqSpan");
var flagqq = false;
_qq.onblur = function() {
var reg = /^\D{1}\d{4,11}$/;
var str = _qq.value;
if (reg.test(str)) {
qqSpan.innerText = "";
flagqq = true;
} else {
qqSpan.innerText = "请输入正确的QQ";
flagqq = false;
}
}
//邮箱
var _email = document.getElementById("email");
var emailSpan = document.getElementById("emailSpan");
var flagemail = false;
_email.onblur = function() {
var reg = /^\w+@\w+(\.\w+)+$/
var str = _email.value;
if (reg.test(str)) {
emailSpan.innerText = "";
flagemail = true;
} else {
emailSpan.innerText = "请输入正确的邮箱";
flagemail = false;
}
}
//邮编
var _eml = document.getElementById("eml");
var emlSpan = document.getElementById("emlSpan");
var flageml = false;
_eml.onblur = function() {
var reg = /^[^0]{1}\d{5}$/;
var str = _eml.value;
if (reg.test(str)) {
emlSpan.innerText = "";
flageml = true;
} else {
emlSpan.innerText = "请输入正确的邮编";
flageml = false;
}
}
//身份证
var _sname = document.getElementById("sname");
var snameSpan = document.getElementById("snameSpan");
var flagsname = false;
_sname.onblur = function() {
var reg = /^\d{17}(\d|x)$/;
var str = _sname.value;
if (reg.test(str)) {
snameSpan.innerText = "";
flagsname = true;
} else {
snameSpan.innerText = "请输入正确的身份证号";
flagsname = false;
}
}
//验证码
var yzmname = document.getElementById("yzmName");
var yzmSpan = document.getElementById("yzmSpan");
var yzm = document.getElementById("yzm");
var a = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 'a', 'b', 'c', 'd', 'e', 'f', 1, 2, 3,
'q', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'
];
var sum = "";
for (var i = 0; i < 4; i++) {
var index = parseInt(Math.random() * a.length);
sum += a[index];
}
yzmname.innerHTML = sum;
var look = document.getElementById("look"); //看不清
look.onclick = function(){
var a = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 'a', 'b', 'c', 'd', 'e', 'f', 1, 2, 3,
'q', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'
];
var sum = "";
for (var i = 0; i < 4; i++) {
var index = parseInt(Math.random() * a.length);
sum += a[index];
}
yzmname.innerHTML = sum;
yzm.value = "";
}
var flagyzm = false;
yzm.onblur = function() {
if (yzm.value == yzmname.innerHTML) {
yzmSpan.innerText = "";
flagyzm = true;
} else {
yzmSpan.innerText = "不正确";
flagyzm = false;
}
}
//性别必选项
var sex = document.getElementsByName("rad");
var sexSpan = document.getElementById("sexSpan");
for (var i = 0; i < sex.length; i++) {
var flagsex = false;
if(sex[i].checked ==false){
sexSpan.innerHTML = "至少选择一项";
}else{
}
sex[i].onclick = function(){
sexSpan.innerHTML = "";
}
}
//爱好必选项
var aspan = document.getElementById("aSpan");
var hob = document.getElementsByName("a");
for(var i =0;i<hob.length;i++){
if(hob[i].checked ==false){
aspan.innerHTML = "至少选择一项";
}
hob[i].onclick = function(){
aspan.innerHTML = "";
}
}
//提交
mf.onsubmit = function() {
if (flagyzm && flagqpwd && flagage && flagname && flagpwd && flagsname &&
flageml && flagemail && flagqq && flagtel && flagyzm) {
return true;
} else {
return false;
}
}