运用正则做简单的表单验证(二)

最新推荐文章于 2023-01-13 21:23:11 发布

ontheway1215

最新推荐文章于 2023-01-13 21:23:11 发布

阅读量758

点赞数

分类专栏： javascript RegExp 文章标签： JavaScript 正则表单

本文链接：https://blog.csdn.net/qq_24997339/article/details/51225420

版权

javascript 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

RegExp

3 篇文章 0 订阅

订阅专栏

前天总结了一下运用正则做出的表单验证基本完成了一般的表单验证，但是仍有点缺陷，如果能把验证规则封装成一个函数，直接在前台调用那就更方便了，所以就有了如下的封装函数checkForm.js:

var json={
	mail: 	/^\w+@\w+\.[a-zA-Z]{2,3}\.[a-zA-Z]{1,2}$/,
	tel:	/^(0[1-9]\d{1,2}-?)?[1-9]\d{6,7}$/,
	age:	/^(1[6-9]|[2-9]\d|100)$/,
	user:	/^[\u4e00-\u9fa5]+$/,
	qq:		/^[0-9]{5,}$/,
	pass:	/^.{6,}$/,
	pass2:	/^.{6,}$/	
};

function checkForm(id,fn){
	var oFm=document.getElementById(id);
	var aIpt=document.getElementsByTagName('input');
	oFm.οnsubmit=function(){
		
		var bOk=true;//假设校验合格
		
		for(var i=0;i<aIpt.length;i++){
			if(aIpt[i].name){//有name属性再向下走
				var re = json[aIpt[i].name];
				if(!check(re,aIpt[i])){//校验后如果返回false
					bOk=false;	
				}
			}
		}
		
		if(bOk==false){//如果校验不合格
			return false;	
		}
		
	};
	
	for(var i=0;i<aIpt.length;i++){
		if(aIpt[i].name){
			var re = json[aIpt[i].name];
			(function(re){
				aIpt[i].οnblur=function(){
					check(re,this);
				};	
			})(re);
		}
	}
	
	function check(re,oIpt){
		if(!re.test(oIpt.value)){//代表第一次校验失败了
			oIpt.className='error';
			return false;
		}else{//代表第一次校验成功了
			if(oIpt.name=='pass2'){
				if(fn && fn(oIpt)==false){//pass2,他的2次校验失败了
					//2失败	
					oIpt.className='error';
					return false;
				}else{//pass2,他的2次校验成功
					//2成功
					oIpt.className='ok';
					return true;
				}	
			}else{
				oIpt.className='ok';//除pass2以外第一次校验成功了
				return false;
			}	
			
			
		}	
	}	
}

在表单中增加了密码设置和密码确定的表单的验证，密码设置的验证很简单，但是密码确定需要第二次验证，就要判断第一次密码与第二次密码是否相同，如果不相同则提示二次验证出错，确定密码的提示框变红并阻止表单的提交。其HTML代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{ margin:0; padding:0; list-style:none;}
input{ border:#999 solid 1px;}
.error{ border:#F00 solid 1px;}
.ok{ border:green solid 1px;}
</style>
<script src="checkForm2.js"></script>
<script>
window.οnlοad=function(){
	checkForm('fm1',function(obj){
		//obj	==	第2个输入框
		
		var oPass1=document.getElementsByName('pass')[0];	
		if(oPass1.value!=obj.value){
			//alert('.');
			return false;	
		}
	});
	//checkForm('fm1'); 第一种需求，不需要进行密码确认，只要有两层密码就行
};
</script>
</head>

<body>

<form action="http://www.baidu.com" id="fm1">
	邮箱:<input type="text" id="mail" name="mail" value="chen@qq.com.cn"><br>
    电话:<input type="text" id="tel" name="tel" value="027-87654321"><br>
    年龄:<input type="text" id="age" name="age" value="18"><br>
    用户名:<input type="text" id="user" name="user" value="大帅哥"><br>
    qq:<input type="text" id="qq" name="qq" value="3503716"><br>
    密码:<input type="text" id="pw" name="pass"><br>
    确认密码:<input type="text" id="pw2" name="pass2"><br>
    <input type="submit" value="注册" id="btn1">
</form>

</body>
</html>

在运用checkform的时候有一个回调函数fn。1.当产品的需求不需要密码确认这个功能时就说明两次密码可以不同，此时就不需要回调函数了，此时checkForm()返回undefined，则直接运行

if(fn && fn(oIpt)==false){//pass2,他的2次校验失败了
					//2失败	
					oIpt.className='error';
					return false;
				}else{//pass2,他的2次校验成功
					//2成功
					oIpt.className='ok';
					return true;
				}

中的else部分并返回true，就直接进入成功部分直接提交表单。2.当产品的需求为需要密码验证时就要调用fn函数，并给fn函数传参，判断第一次输入的密码和第二次输入的密码是否相同，如果不相同，则返回false，而在formFalse.js中判断，如果前面的回调函数存在，并且它的值为false，则说明第一次输入的密码的第二次输入的密码相同，则进入OK判断并且返回true，而其他的判断如果是正确的话，就提交表单。在check()函数中返回的是true或false，则在提交的时候根据bOk的值来判断是否提交表单。

在这次的表单验证中主要有几个要注意的点，1：在刚开始判断的表单的是否填写正确，如果仅仅在表单的判断的最后面添加return false则无法阻止表单的提交，需要先声明一个变量bOk，根据表单验证的结果来修改bOk的值，最后根据bOk的真假来提交表单。2：在回调函数中如果没有没有添加回调函数，则checkFalse的返回值为undefined，在函数这边则直接进入OK部分。3：如果传了回调函数，判断两次的密码输入是否相同，如果不相同则返回false，函数这边就判断fn如果存在的时候且值为false时就说明密码不同，没有通过验证，则返回false阻止表单提交。