form表单前端验证 -

liqian5251

浏览: 17215 次
性别:
来自: 北京

最近访客更多访客>>

南迦阿

yjmyd1119

newfeel

LorneShen

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

form表单前端验证

博客分类：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>html02.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript">
function checkUname(){
return checkElement("uname","用户名",6,12,"用户名的长度6-12位之间");
}
function checkPwd(){
return checkElement("pwd","密码",4,12,"密码的长度4-12位之间")&&checkPwd2();
}
function checkPwd2(){
var pwd = document.getElementById("pwd").value;
var pwd2 = document.getElementById("pwd2").value;
var span = document.getElementById("pwd2Span");
if(pwd2==null||pwd2.length==0){
span.innerHTML="<font color='red'>数据项[重复密码]不能为空!!!</font>";
return false;
}else if(pwd2!=pwd){
span.innerHTML="<font color='red'>数据项[密码]和[重复密码]不一致!!!</font>";
return false;
}else{
span.innerHTML="<font color='green'>OK!!!</font>";
return true;
}
}
function checkEmail(){
return checkElement("email","邮箱",10,25,"邮箱的长度10-25位之间");
}
function checkGrjj(){
return checkElement("grjj","个人简介",10,200,"个人简介请保持在10-200字以内");
}
function checkElement(eleId,eleName,minLen,maxLen,errMsg){
var ov = document.getElementById(eleId).value;
var span = document.getElementById(eleId+"Span");
if(ov==null||ov.length==0){
span.innerHTML="<font color='red'>数据项["+eleName+"]不能为空!!!</font>";
return false;
}else if(ov.length<minLen||ov.length>maxLen){
span.innerHTML="<font color='red'>"+errMsg+"</font>";
return false;
}else{
span.innerHTML="<font color='green'>OK!!!</font>";
return true;
}
}

function checkFav(){
var favs = document.getElementsByName("fav");
var span = document.getElementById("favSpan");
for(var i=0;i<favs.length;i++){
if(favs[i].checked){
span.innerHTML="<font color='green'>OK!!!</font>";
return true;
}
}
span.innerHTML="<font color='red'>爱好至少选择一项</font>";
return false;
}

function checkAgree(){
var agree = document.getElementsByName("agree");
var span = document.getElementById("agreeSpan");
if(agree[0].checked){
span.innerHTML="<font color='green'></font>";
return true;
}else{
span.innerHTML="<font color='red'>为了更好的服务,请您务必同意服务条款</font>";
return false;
}
}

function checkSchool(){
var school = document.getElementById("school");
var span = document.getElementById("schoolSpan");
if(school.value==0){
span.innerHTML="<font color='red'>请选择正确的毕业学校</font>";
return false;
}else{
span.innerHTML="<font color='green'>OK!!!</font>";
return true;
}
}

function checkForm(){

var unameFlag = checkUname();
var pwdFlag = checkPwd();
var pwd2Flag = checkPwd2();
var emailFlag = checkEmail();
var grjjFlag = checkGrjj();
var favFlag = checkFav();
var schoolFlag= checkSchool();
var agreeFlag = checkAgree();

return unameFlag&&pwdFlag&&emailFlag&&grjjFlag&&favFlag&&schoolFlag&&pwd2Flag&&schoolFlag&&agreeFlag;
}
</script>
</head>
<body style="text-align: center;">
<form action="#" method="get" onsubmit="return checkForm();">
<h1>用户注册页面</h1>
<table border="1" style="margin: auto;width: 600px;">
<tr>
<th>用户名</th>
<td>
<input type="text" name="uname" id="uname" onblur="checkUname();"/>
<span id="unameSpan">用户名的长度6-12位之间</span>
</td>
</tr>
<tr>
<th>密码</th>
<td>
<input type="password" name="pwd" id="pwd" onblur="checkPwd();"/>
<span id="pwdSpan">密码的长度4-12位之间</span>
</td>
</tr>
<tr>
<th>重复密码</th>
<td>
<input type="password" id="pwd2" onblur="checkPwd2();"/>
<span id="pwd2Span">重复密码的长度4-12位之间</span>
</td>
</tr>
<tr>
<th>邮箱</th>
<td>
<input type="text" name="email" id="email" onblur="checkEmail();"/>
<span id="emailSpan">邮箱的长度10-25位之间</span>
</td>
</tr>
<tr>
<th>性别</th>
<td>
<input type="radio" name="gender" value="1" checked="checked"/>男
<input type="radio" name="gender" value="0"/>女
</td>
</tr>
<tr>
<th>婚否</th>
<td>
<input type="radio" name="marry" value="0" checked="checked"/>未婚
<input type="radio" name="marry" value="1"/>已婚
<input type="radio" name="marry" 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="school" id="school" onchange="checkSchool();">
<option value="0">--请选择--</option>
<option value="1">哈佛大学</option>
<option value="2">深泉学院</option>
<option value="3">伦敦小学</option>
<option value="4">剑桥大学</option>
<option value="5">慕尼黑大学</option>
</select>
<span id="schoolSpan">请选择正确的毕业学校</span>
</td>
</tr>
<tr>
<th>个人简介</th>
<td>
<textarea rows="5" cols="30" name="grjj" id="grjj" onblur="checkGrjj();"></textarea>
<span id="grjjSpan">个人简介请保持在10-200字以内</span>
</td>
</tr>
<tr>
<th colspan="2">
<input type="checkbox" name="agree" id="agree" checked="checked" onclick="checkAgree();">同意<a href="">服务条款</a>
<span id="agreeSpan"></span>
</th>
</tr>
<tr>
<th colspan="2">
<input type="submit" value="提交"/>
<input type="reset" value="重置"/>
<input type="button" value="表单验证" onclick="checkForm();"/>
</th>
</tr>
</table>
</form>
</body>
</html>