首页 > 代码库 > 一个简单且完善的表单验证(毕老师的)
一个简单且完善的表单验证(毕老师的)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<!--
案例四：表单校验。
1,明确事件源和事件。
事件源：表单中的组件。
事件：失去焦点后，就立刻做校验，这样用户体验效果很好。
2,提示信息展示方式。
不要弹出信息，而是在组件的旁边显示文字或者图片。需要定义一个显示区域。
-->
<script type="text/javascript">
/*
//校验方法。
function checkUser() {
var flag = false;
//1,获取文本框节点对象。
var userNode = document.getElementsByName("user")[0];
var username = userNode.value;
//获取提示信息存储的位置节点。
var spanNode = document.getElementById("userspan");
//对用户名进行正则表达式的判断。要求：四位字母。
//创建一个正则对象。
var regex = new RegExp("^[a-zA-Z]{4}$");
if (regex.test(username)) {
spanNode.innerHTML = "用户名正确".fontcolor("green");
flag = true;
} else {
spanNode.innerHTML = "用户名错误".fontcolor("red");
}
return flag;
}
//密码校验。四位数字。
function checkPsw(){
var flag = false;
var passNode = document.getElementsByName("psw")[0];
var pass = passNode.value;
var regex = new RegExp("^\\d{4}$");
var spanNode = document.getElementById("pswspan");
if (regex.test(pass)) {
spanNode.innerHTML = "密码正确".fontcolor("green");
flag = true;
} else {
spanNode.innerHTML = "密码错误".fontcolor("red");
}
return flag;
}
*/
//提高代码的复用性。
function check(name,regex,spanid,okinfo,errinfo){
var flag = false;
var val = document.getElementsByName(name)[0].value;
var spanNode = document.getElementById(spanid);
if(regex.test(val)){
spanNode.innerHTML = okinfo.fontcolor("green");
flag = true;
} else {
spanNode.innerHTML = errinfo.fontcolor("red");
}
return flag;
}
//校验用户名。
function checkUser(){
var regex = new RegExp("^[a-zA-Z]{4}$");
return check("user",regex,"userspan","用户名正确","用户名错误");
}
//校验密码。
function checkPsw(){
var regex = new RegExp("^\\d{4}$");
return check("psw",regex,"pswspan","密码正确","密码错误");
}
//校验确认密码.
function checkRepsw(){
var flag = false;
//1,获取密码和确认密码框的值。
var pass = document.getElementsByName("psw")[0].value;
var repass = document.getElementsByName("repsw")[0].value;
//2,获取span
var spanNode = document.getElementById("repswspan");
//3,判断。
if(pass == repass){
spanNode.innerHTML = "密码一致".fontcolor("green");
flag = true;
}else{
spanNode.innerHTML = "密码不一致".fontcolor("red");
}
return flag;
}
//校验邮件。
function checkMail(){
var regex = new RegExp("^\\w+@\\w+(\\.\\w+)+$");
return check("mail",regex,"mailspan","邮件正确","邮件错误");
}
function checkSex(){
var flag = false;
//获取所有的单选按钮。
var radioNodes = document.getElementsByName("sex");
for(var x=0; x<radioNodes.length; x++){
if(radioNodes[x].checked){
flag = true;
break;
}
}
var spanNode = document.getElementById("sexspan");
if(!flag){
spanNode.innerHTML="请选择性别".fontcolor(‘red‘);
}
return flag;
}
//校验国家。
function checkCountry(){
var flag = true;
//1,获取下拉菜单对象。
var selNode = document.getElementsByName("country")[0];
//2，获取所有的option对象的集合。
var optNodes = selNode.options;
//for(var x=0; x<optNodes.length; x++){
// alert(optNodes[x].innerHTML);
//}
//alert(optNodes[selNode.selectedIndex].innerHTML);//获取下拉菜单中选中的国家。
//获取选择的下拉菜单项的值 只要不是none就可以提交。是none给提示。
var spanNode = document.getElementById("countryspan");
var val = optNodes[selNode.selectedIndex].value;
if(val=="none"){
spanNode.innerHTML = "必须选择一个国家".fontcolor("red");
flag = false;
}
return flag;
}
function checkForm(){
if(checkUser() && checkPsw() && checkRepsw() && checkMail()&&checkSex()&&checkCountry()){
return true;
}
return false;
}
//练习：多复选框进行校验，必须选择。
</script>
<form id="formid" onsubmit="return checkForm()">
用户名称：<input type="text" name="user" onblur="checkUser()" />
<span id="userspan"></span><br />
输入密码：<input type="text" name="psw" onblur="checkPsw()" />
<span id="pswspan"></span><br />
确认密码：<input type="text" name="repsw" onblur="checkRepsw()" />
<span id="repswspan"></span><br />
电子邮件：<input type="text" name="mail" onblur="checkMail()" />
<span id="mailspan"></span><br />
选择性别：
<input type="radio" name="sex" value="http://www.mamicode.com/nan" />男
<input type="radio" name="sex" value="http://www.mamicode.com/nv" />女
<span id="sexspan"></span><br/>
选择国家：
<select name="country" >
<option value="http://www.mamicode.com/none">--选择国家--</option>
<option value="http://www.mamicode.com/cn">中国</option>
<option value="http://www.mamicode.com/usa">美国</option>
<option value="http://www.mamicode.com/en">英国</option>
</select>
<span id="countryspan" ></span><br/>
<input type="submit" value="http://www.mamicode.com/提交数据" />
<!-- 提交按钮上默认有就提交事件，将form组件中的name和value都提交到服务器端。 -->
</form>
<hr>
<input type="button" value="http://www.mamicode.com/自定义提交" onclick="myCheckForm()" />
</body>
</html>
一个简单且完善的表单验证(毕老师的)