这是一个表单验证的demo,虽然现在就已经很少直接写js进行表单验证了,但还是可以用来考验和锻炼大家的js功力,如果有改进的地方,还望大家多多反馈!
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
table {
width: 80%;
}
th {
width: 150px;
}
.spanred {
color: red;
}
.spangreen {
color: green;
}
</style>
<script type="text/javascript">
var globalCode = "";
function generateCode() {
//随机生成1000到9999的验证码
globalCode = parseInt(Math.random() * 9000 + 1000);
//将验证码显示到span
document.getElementById("randomCode").innerHTML = globalCode;
}
function checkUname() {
//定义正则表达式对象
var reg = /^\w{4,12}$/ig;
return checkField("uname", reg);
}
function checkPwd() {
//定义正则表达式对象
var reg = /^\w{4,12}$/ig;
return checkField("pwd", reg) && checkPwd2();
}
function checkPwd2() {
var pwd = document.getElementById("pwd");
var pwd2 = document.getElementById("pwd2");
var span = document.getElementById("pwd2Span");
if (pwd2.value.length == 0) {
span.className = "spanred";
span.innerHTML = "数据项[确认密码]不能为空";
return false;
} else if (pwd.value == pwd2.value) {
span.className = "spangreen";
span.innerHTML = "数据项[确认密码]ok";
return true;
} else {
span.className = "spanred";
span.innerHTML = "数据项[密码]和[确认密码]不一致";
return false;
}
}
function checkRealname() {
//定义正则表达式对象
var reg = /^[\u4e00-\u9fa5]{2,6}$/ig;
return checkField("realname", reg);
}
function checkEmail() {
//定义正则表达式对象
var reg = /^\w{5,12}@\w{2,10}(\.[a-z]{2,3}){1,2}$/ig;
return checkField("email", reg);
}
function checkPhone() {
//定义正则表达式对象
var reg = /^1[3458]\d{9}$/ig;
return checkField("phone", reg);
}
function checkIntro() {
//定义正则表达式对象
var reg = /^.{0,500}$/ig;
//获取表单域的
var obj = document.getElementById("intro");
//获取表单域的值
var val = obj.value;
//获取表单域的文本描述
var alt = obj.alt;
//获取span
var span = document.getElementById("introSpan");
//对表单域的值进行验证
if (reg.test(val)) {
span.className = "spangreen";
span.innerHTML = "数据项[个人介绍]ok";
return true;
} else {
span.className = "spanred";
span.innerHTML = "数据项[个人介绍]不符合规则";
return false;
}
}
function checkField(objId, reg) {
//获取表单域的
var obj = document.getElementById(objId);
//获取表单域的值
var val = obj.value;
//获取表单域的文本描述
var alt = obj.alt;
//获取span
var span = document.getElementById(objId + "Span");
//对表单域的值进行验证
if (val == null || val.length == 0) {
span.className = "spanred";
span.innerHTML = "数据项[" + alt + "]不能为空";
return false;
} else if (reg.test(val)) {
span.className = "spangreen";
span.innerHTML = "数据项[" + alt + "]ok";
return true;
} else {
span.className = "spanred";
span.innerHTML = "数据项[" + alt + "]不符合规则";
return false;
}
}
function checkFav() {
//获取对象
var fav = document.getElementsByName("fav");
var span = document.getElementById("favSpan");
//遍历并判断
for (var i = 0; i < fav.length; i++) {
if (fav[i].checked) {
span.className = "spangreen";
span.innerHTML = "数据项[爱好]ok";
return true;
}
}
span.className = "spanred";
span.innerHTML = "数据项[爱好]至少选择一项";
return false;
}
function checkAddress() {
//获取对象
var address = document.getElementById("address");
var span = document.getElementById("addressSpan");
//判断是否为正确选项
if (address.value == "") {
span.className = "spanred";
span.innerHTML = "数据项[户籍地址]不能为请选择";
return false;
} else {
span.className = "spangreen";
span.innerHTML = "数据项[户籍地址]ok";
return true;
}
}
function checkCode() {
//获取CODE
var code = document.getElementById("code");
var span = document.getElementById("codeSpan");
//验证长度
if (code.value.length == 4 && code.value == globalCode) {
span.className = "spangreen";
span.innerHTML = "数据项[验证码]ok";
return true;
} else {
span.className = "spanred";
span.innerHTML = "数据项[验证码]输入错误";
return false;
}
}
function checkAgree() {
//获取是否同意
var agree = document.getElementById("agree");
//获取提交按钮
var sub = document.getElementById("sub");
sub.disabled = !agree.checked;
}
function testReset() {
var flag = window.confirm("您确定要重置注册信息吗?");
return flag;
}
function testSubmit() {
var unameFlag = checkUname();
var pwdFlag = checkPwd();
var pwd2Flag = checkPwd2();
var emailFlag = checkEmail();
var realnameFlag = checkRealname();
var phoneFlag = checkPhone();
var favFlag = checkFav();
var addressFlag = checkAddress();
var introFlag = checkIntro();
var codeFlag = checkCode();
return unameFlag && pwdFlag && pwd2Flag && emailFlag && realnameFlag && phoneFlag && favFlag && addressFlag && introFlag && codeFlag;
}
</script>
</head>
<body onload="generateCode();">
<h1>表单数据验证</h1>
<form action="#" method="get" name='frm' onsubmit="return testSubmit();" onreset="return testReset();">
<table border="1">
<tr>
<th>用户名</th>
<td>
<input type="text" id="uname" alt="用户名" name="uname" value="" onblur="checkUname();" />
<span id="unameSpan"></span>
</td>
</tr>
<tr>
<th>密码</th>
<td>
<input type="password" id="pwd" alt="密码" name="pwd" value="" onblur="checkPwd();" />
<span id="pwdSpan"></span>
</td>
</tr>
<tr>
<th>确认密码</th>
<td>
<input type="password" id="pwd2" value="" onblur="checkPwd2();" />
<span id="pwd2Span"></span>
</td>
</tr>
<tr>
<th>真实姓名</th>
<td>
<input type="text" id="realname" name="realname" alt="真实姓名" value="" onblur="checkRealname();" />
<span id="realnameSpan"></span>
</td>
</tr>
<tr>
<th>电子邮箱</th>
<td>
<input type="text" id="email" name="email" alt="电子邮箱" value="" onblur="checkEmail();" />
<span id="emailSpan"></span>
</td>
</tr>
<tr>
<th>手机号码</th>
<td>
<input type="text" id="phone" name="phone" alt="手机号码" value="" onblur="checkPhone();" />
<span id="phoneSpan"></span>
</td>
</tr>
<tr>
<th>性别</th>
<td>
<input type="radio" name="gender" value="1" checked />男
<input type="radio" name="gender" value="2" />女
</td>
</tr>
<tr>
<th>爱好</th>
<td>
<input type="checkbox" name="fav" value="1" onclick="checkFav();" />足球
<input type="checkbox" name="fav" value="2" onclick="checkFav();" />篮球
<input type="checkbox" name="fav" value="3" onclick="checkFav();" />乒乓球
<input type="checkbox" name="fav" value="4" onclick="checkFav();" />羽毛球
<span id="favSpan"></span>
</td>
</tr>
<tr>
<th>户籍地址</th>
<td>
<select name="address" id="address" onchange="checkAddress();">
<option value="">--请选择--</option>
<option value="1">河南</option>
<option value="2">河北</option>
<option value="3">湖南</option>
<option value="4">湖北</option>
</select>
<span id="addressSpan"></span>
</td>
</tr>
<tr>
<th>个人介绍</th>
<td>
<textarea id="intro" name="intro" rows="5" cols="80" alt="个人介绍" onblur="checkIntro();"></textarea>
<span id="introSpan"></span>
</td>
</tr>
<tr>
<th>验证码</th>
<td>
<input type="text" id="code" size="4" maxlength="4" value="" onblur="checkCode();" /><span id="randomCode" onclick="generateCode();"></span>
<span id="codeSpan"></span>
</td>
</tr>
<tr>
<th colspan="2">
<input type="checkbox" id="agree" checked="checked" onclick="checkAgree();" /> 是否阅读并同意协议
</th>
</tr>
<tr>
<th colspan="2">
<input type="submit" id="sub" value="提交" />
<input type="reset" value="重置" />
</th>
</tr>
</table>
</form>
</body>
</html>