JavaScript实现简单的表单验证

发表于   |   分类于   |     |  

最近开始学习一些前端的知识了，主要有HTML、CSS、JavaScript、DOM、XML等，东西都不难，只是这茫茫多的标签、属性、对象、方法…真的是好烦好烦啊~每写一小段都要翻半天W3的帮助文档，因为不熟悉，所以还不一定能找得到，不过总算是能自己写一些简单的小程序出来。稍微有一点逻辑性的东西主要集中在JS了，对这些新东西，还是有必要记录一下。于是就写了一个简单的表单验证，一方面巩固一下学习的东西，一方面以后要用到表单验证，应该能直接拿来用了。

##用HTML绘出表单##

既然是表单验证，首先肯定是要创建表单，这部分与JS也没什么关系，主要就是HTML标签的堆砌，主要就考察对标签及其属性的熟练程度了。当然如果对CSS很精通的话，可以做出来非常好看，效果很炫的表单，我压根也就没用CSS，单纯地实现了功能。代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<html>
  <head>
    <title>FormConfirm</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="表单验证">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  </head>
  <body>
  <form action="#" method="get" onsubmit="return check()" name="form">
  	<table border="1px" align="center" style="width:700px" cellspacing='0'>
  		<tr>
  			<th style="width:200px;height:35px" colspan="2">用户注册</th>
  		</tr>
  		<tr>
  			<th style="width:200px;height:35px">用户名</th>
  			<td>
				<input type="text" style="width:200px" name="userName" />
			</td>
  		</tr>
  		<tr>
  			<th style="width:200px;height:35px">密码</th>
  			<td>
  				<input type="text"  style="width:200px" name = "password" />
  			</td>
  		</tr>
  		<tr>
  			<th style="width:200px;height:35px">年龄</th>
  			<td>
  				<input type="text" style="width:200px" name = "age" />
  			</td>
  		</tr>
  		<tr>
  			<th style="width:200px;height:35px">性别</th>
  			<td>
  				<input type="radio" name = "sex" value="0" checked/>男
  				<input type="radio" name = "sex" value="1"/>女
  			</td>
  		</tr>
  		<tr>
  			<th style="width:200px;height:35px">爱好</th>
  			<td>
	  			<input type="checkbox" name="hobby"  value = "0" >阅读
	  			<input type="checkbox" name="hobby"  value = "1" >旅行
	  			<input type="checkbox" name="hobby"  value = "2" >体育
	  			<input type="checkbox" name="hobby"  value = "3" >音乐
	  			<input type="checkbox" name="hobby"  value = "4" >电影
	  		</td>
  		</tr>
  		<tr>
  			<th style="width:200px;height:35px">学历</th>
  			<td>
  				<select name="education">
  					<option value="" selected>- 请选择 -</option>
  					<option value="0" >大专</option>
  					<option value="1" >本科</option>
  					<option value="2" >硕士</option>
  				</select>
  			</td>
  		</tr>
  		<tr>
  			<th style="width:200px;height:35px" colspan="2">
  				<input type="submit" value="注册"/>
  			</th>
  		</tr>
  	</table>
 </form>
 </body>
</html>

<script type="text/javascript">

</script>

画出了个模子，接下来就是重头戏了，用JS实现表单的验证。JS代码可以放在html结束标签后面，也可以通过外部引入的方式引入，我这里是直接写在了html结束标签的后面。

##验证之前的分析##

在做验证写代码之前，我们先要做一些准备工作，理清思路，然后根据思路去一步步实现。

  • 首先，我们要明确这表单验证需要验证哪些内容，很明显，这里需要验证“用户名”“密码”“年龄”“性别”“爱好”“学历”，一共是这六项内容；
  • 然后，明确验证失败后我们得到怎样的提示；
  • 为了减少工作量，我们可以分析一下这么多的验证里，在实现上某几项有什么共性，如果有共性，怎么把这些共性抽取出来。

在这里我希望得到的失败提示是在各项的后面出现红色字体的错误提示，其中“爱好”比较特殊，因为是复选框，若失败直接alert弹出错误提示即可；还有“用户名”“密码”“年龄”这三项在鼠标移出输入框就进行判断，如果与期望值不符，就提示错误。明确前面的东西，就很容易想到他们的共性，在“用户名”“密码”“年龄”“学历”验证失败后，都需要在右侧出现红色的错误提示。

##实现被验证项的共性##

可以定义一个方法实现错误提示的共性，共性的错误提示中不同之处分别是错误提示出现的位置和错误提示的内容，因此可以将出现的位置（where）和提示内容（what）作为方法的两个参数传进去。红色错误提示即红色文本，可以创建一个font标签再设置其颜色属性来实现。当然，当用户输入正确信息后，要删除这些错误信息，删除错误信息只需要明确错误信息出现的位置（where）即可。明确这些，这个方法就容易写了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
//验证错误，添加错误信息
function addError(where,what){
	//获取通过父节点的font子节点数组，如果font数组的长度为0，则创建font标签
	if(!where.parentNode.getElementsByTagName("font").length){
		//创建font标签 并添加提示信息
		var font  = document.createElement("font");
        //设置font标签的颜色
		font.setAttribute("color","red");
        //设置font标签的内容
		font.innerHTML = what;
		//将font标签添加到td上
		where.parentNode.appendChild(font);
	}
}


//验证正确后，删除错误信息
function removeError(where){
	//存在错误信息，获取父节点的子节点数组，此数组只有一个元素，因此font标签为arr[0]
	var font =  where.parentNode.getElementsByTagName("font")[0];
    //如果设置错误信息的font标签存在，就删除这个font标签
	if(font){
		font.parentNode.removeChild(font);
	}
}

OK，到这里，就实现了添加删除错误信息的方法，接下来验证“用户名”“密码”“年龄”“学历”的时候，就可以直接调用这两个方法了。

##验证用户名##

验证用户名，其实就是拿用户输入的信息与期望用户输入的信息进行比较，因此首先需要有一个预定义的正则表达式，规定用户必须按照这个正则来输入信息。如果校验通过，就返回true，如果有错误信息，就删除错误信息；如果校验不通过，就返回false，并添加上错误信息。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
//验证用户名
function checkUserName(){
	//1 根据验证规则创建正则表达式
	var nameReg = /^[a-zA-Z][a-zA-Z0-9_]{5,14}$/g;
	//2 获得用户填写的用户名，这里可以直接使用document.form来获取表单对象
	var userName = document.form.userName.value;
	//3 校验
	if(nameReg.test(userName)){
    	//调用removeError方法，传入where方法
		removeError(document.form.userName);
		return true;
	}else{
    	//调用addError方法，传入where和what对应的实际参数
		addError(document.form.userName,"用户名首字母必须为英文,长度必须在6~15之间");
	return false;
	}
}

//当鼠标移出输入框，即失去输入框焦点时验证输入，调用checkUserName方法
document.form.userName.onblur =function(){
	checkUserName();
}

##验证密码、年龄和学历##

实现了用户名的校验，那密码、年龄和学历这三项的验证就简单多了，除了参数跟验证用户名的不一样，其他的基本一样。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
//验证密码
function checkPassWord(){
	//验证密码的正则表达式
	var pwdReg = /[a-zA-Z0-9_]{6,15}/g;
	var password = document.form.password.value;
	if(pwdReg.test(password)){
		removeError(document.form.password);
		return true;
	}else{
		addError(document.form.password,"密码长度必须在6~15之间");
		return false;
	}
}
document.form.password.onblur = function(){
	checkPassWord();
}

//验证年龄
function checkAge(){
	var age=document.form.age.value;
	if(+age >= 18 && age <= 120){
		removeError(document.form.age);
		return true;
	}else{
		addError(document.form.age,"输入的年龄必须在18~120之间");
		return false;
	}
}
document.form.age.onblur = function(){
	checkAge();
}

//验证学历
function checkEdu(){
	var index=document.form.education.value;
	if(index){
		removeError(document.form.education);
		return true;
	}else{
		addError(document.form.education,"请选择学历");
		return false;
	}
}

验证学历就不需要再考虑失去焦点时验证的问题了，只需要提交时验证即可。

##验证爱好##

只剩下最后一项验证爱好，同样是提交时后验证。由于“爱好”是复选框，有多个name属性，因此无法使用document.form.attribution来获取属性，这时就可以使用JavaScript警告提示框来输出错误信息了，当然获取habit属性也只能使用document的getElementsByName方法了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//验证爱好
function checkHabit(){
	var habits=document.getElementsByName("habit");
    //创建一个计数器
	var count = 0;
    //遍历habits数组
	for ( var i = 0; i < habits.length; i++) {
    	//当复选框被选中一个，计数器就加1
		if (habits[i].checked) {
			count++;
		}
	}
    //如果计数器大于等于2，就返回true，否则就使用js警告框输出警告信息
	if (count>=2) {
		return true;
	}else {
		alert("请至少选择两个爱好");
		return false;
	}
}

##返回验证结果##

最后一步就是返回验证结果了。调用之前定义的验证各项的方法，任何一项验证不通过都要返回false，即不提交表单。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function check(){
	var flag=true;
	if(!checkUserName()){
		flag=false;
	}
	if(!checkPassWord()){
		flag=false;
	}
	if(!checkAge()){
		flag=false;
	}
	if(!checkEdu()){
		flag=false;
	}
	if(!checkHabit()){
		flag=false;
	}
	return flag;
}