一个简单且完善的表单验证(毕老师的)

时间：2014-12-02 00:00:33 阅读：747 评论：0 收藏：0 [点我收藏+]

<!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>

一个简单且完善的表单验证(毕老师的)

标签：des http io ar color os sp java for

原文地址：http://www.cnblogs.com/jamsbwo/p/4136160.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行