JS表单验证(用正则表达式,用字符串验证)

最新推荐文章于 2024-07-03 14:13:51 发布

原创最新推荐文章于 2024-07-03 14:13:51 发布 · 3.2k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#js表单验证 #正则表达式

javascript 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了如何使用JavaScript和正则表达式进行表单验证，包括用户输入的格式检查、字符串方法的应用及验证规则的设定，确保数据合法性，减轻服务器负担。

JS表单验证

JS运行在客户端的代码，通过在客户端对表单进行格式的验证可以避免大量不合法的数据提交到服务器，这样就可以减轻服务器端的压力。

表单的验证可以使用正则表达式进行验证

正则表达式对象的创建分为两种方法
1 . var regobj = /表达式内容/;
2. var regobj = new RegExp(“表达式内容”);

一般使用第一种方法创建

正则表达式的内容可以是简单的也可以是复合的
简单内容直接就是一个字符串: var regobj = /^xiaoli$/;

最简单的一个验证方法:

<script language="JavaScript">
			function checkName(){
				//定义验证规则
				var namereg = /^xiaoli$/;
				//namereg = new RegExp();
				//获取表单上某一个空间的值存在两种方法: 1: getElementById()的方法获取，需要为控件指定一个ID值
				//通过document.表单名.控件名.value的方法获取，需要为form标签提供name属性，需要为控件提供name属性
				//获取用户输入的用户名信息
				//var namestr = document.getElementById("txtName").value;
				//通过表单的名称获取控件的值
				var namestr = document.regForm.txtName.value;
				//验证处理  利用正则表达式对象的 test 方法去验证目标字符串是否符合验证的规则，返回值为boolean
				if(namereg.test(namestr)){
					alert("验证成功");
					return true;
				}else{
					alert("验证失败");
					return false;
				} 
			}
		</script>
	</head>
	<body>
		<form action="index.html" method="post" name="regForm" onsubmit="return checkName()">
			用户名:<input type="text" name="txtName" id="txtName" /><br/>
			<input type="submit" value="提交" />
		</form>
	</body>

注意的点:
一:获取表单上某一个空间的值存在两种方法: 1: document.getElementById()的方法获取，需要为控件指定一个ID值
通过document.表单名.控件名.value的方法获取，需要为form标签提供name属性，需要为控件提供name属性
二:如果进行表单验证，验证方法必须要返回一个boolean类型的结果
三:调用验证的验证的方法，是在form表单的onsubmit事件中调用，且调用的时候必须添加return <form οnsubmit=”return checkFomr()”>
四:如果使用正则表达式验证，一般需要设定头和尾的结束表示 var regname=/^验证规则$/
^表示以什么开头, $表示以什么结尾.
五:验证的时候需要使用的是正则表达式的test 方法获取验证的结果

正则表达式通过内容需要添加一些通配符实现规则验证

^ 必须以表达式开始
$必须以表达式结束
//正则表达式通配符的标识
//\s 单个空白字符
//\S 单个非空白字符
//\d 单个数字
//\D 单个非数字
//\w 单个字符(数字，字母，下划线)
//\W 非单个字符(除去数字，字母，下划线)
//[a,b,c,1-9] 单个a,b,c和1到9中任意字符
//次数
//{n} 固定n次
//{n,} 最少n次
//{n,m} 最少n次最多m次
//{,m} 最多m次
//+ 最少1次最多不限制,等同于{1,}
//? 0次或1次 ,等同于{0,1}
//* 0次或多次 ,等同于{0,}

利用正则表达式实现表单的验证

//用户名只能有数组字母下划线组成，长度4-6位
			function checkName(){
				//定义验证规则
				var namereg=/^\w{4,6}$/;
			 	//获取验证内容
			 	var namestr=document.regForm.txtName.value;
			 	//实现验证
			 	if(!namereg.test(namestr)){
			 		document.getElementById("namespan").innerHTML="用户名只能是数字字母下划线组成，长度4-6位";
			 		document.getElementById("namespan").className="info_error";
			 		return false;
			 	}
			 	document.getElementById("namespan").innerHTML="验证成功";
			 	document.getElementById("namespan").className="info_success";			 	
			 	return true;
			}
			//用户年龄必须是数字最多两位
			function checkAge(){
				//定义验证规则
				var agereg=/^\d{2}$/;
			 	//获取验证内容
			 	var agestr=document.regForm.txtAge.value;
			 	//实现验证
			 	if(!agereg.test(agestr)){
			 		document.getElementById("agespan").innerHTML="用户的年龄必须是两位数";
			 		document.getElementById("agespan").className="info_error";
			 		return false;
			 	}
			 	document.getElementById("agespan").innerHTML="验证成功";
			 	document.getElementById("agespan").className="info_success";			 	
			 	return true;
			}
			function checkForm(){
				if(checkName() && checkAge())
				{
					return true;
				}
				return false;
			}
	</script>

样式表效果

	<style type="text/css">
			.info_success{ background-color: #7FFF00; color: green;}
			.info_error{ color: red; background-color: #808080;}
			
		</style>

页面效果

<form action="index.html" method="post" name="regForm" onsubmit="return checkForm()">
			用户名:<input type="text" name="txtName" id="txtName" /><span id="namespan"></span> <br/>
			用户年龄:<input type="text" name="txtAge" id="txtAge" /><span id="agespan"></span> <br/>
			<input type="submit" value="提交" />
		</form>

表单的验证需要在表单的onSubmit 中添加方法,如果验证的方法返回为false则表单不提交，如果返回值为true 则表单提交

<form action="head.html" method="get" name="registerForm" 
onsubmit="return checkForm()">

正则表达式的简单用法

		//只能出现字母,一次到多次
				var namereg = /^[a-z,A-Z]+$/;
				//定义AGE的正则表达式(年龄必须在10-29之间)
				var ageReg = /^[1,2]\d$/;
				//密码必须是数字字母下划线，数字不能开头，长度6-8位
				var passReg = /^[a-z,A-Z,_]\w{5,7}$/;
				//定义正则表达式对象(汉字的范围是\u4e00-\u9fa5)4-6个汉字
				var realnameReg = /^[\u4e00-\u9fa5]{4,6}$/;
				//邮箱的验证规则
				var emailReg = /^\w+@\w+(\.[a-z,A-Z]{2,3}){1,2}$/;

实际使用(利用表单控件的onBlur事件调用验证的方法)

真实姓名:
<input type="text" name="urealname" onblur="checkRealName()" />
<span id="errorRealname">2-4位汉字</span><br/>

	function checkRealName() {
				//定义正则表达式对象(汉字的范围是\u4e00-\u9fa5)
				var realnameReg = /^[\u4e00-\u9fa5]{4,6}$/;
				//获取密码对象
				var realnameStr = document.registerForm.urealname.value;
				//验证
				if(realnameReg.test(realnameStr)) {
					document.getElementById("errorRealname").className = "span_success";
					document.getElementById("errorRealname").innerHTML = "成功";
					return true;
				}
				document.getElementById("errorRealname").className = "span_error";
				document.getElementById("errorRealname").innerHTML = "真实姓名必须4-6位汉字";
				return false;
			}

使用字符串的方法实现表单的验证

在javaScript中字符串的方法和JAVA中字符串的方法基本一致
Length 属性获取字符串的长度
CharAt() 获取指定位置的单个字符
indexOf() 判断某一个子字符串出现的位置
subString 从字符串中截取子字符串

利用字符串的方法实现密码的验证
（密码必须包含数字字母下划线，数字不能开头,必须6-8位）

请输入密码:
<input type="text" name="upass" onblur="checkPass()" />
<span id="errorPass">密码必须包含数字字母下划线，数字不能开头,必须6-8位</span><br/>

			function checkPass(){
				//密码必须包含数字字母下划线，数字不能开头,必须6-8位
				var passstr = document.registerForm.upass.value;
				//长度必须6-8为
				if(!(passstr.length >=6 && passstr.length<=8))
				{
					document.getElementById("errorPass").innerHTML="长度必须6-8位";
					document.getElementById("errorPass").className="span_error";
					return false;
				}
				//数字不能开头
				if(passstr.charAt(0)>='0' && passstr.charAt(0)<='9')
				{
					document.getElementById("errorPass").innerHTML="数字不能开头";
					document.getElementById("errorPass").className="span_error";
					return false;
				}
				//是否包含了非法字符
				for(var i =0;i<passstr.length;i++){
					var char_temp = passstr.charAt(i);
					if(!(char_temp>='A' && char_temp<='Z' || char_temp=='_' ||passstr.charAt(i)>='0' && passstr.charAt(i)<='9'
					||char_temp>='a' && char_temp<='z' )){
								document.getElementById("errorPass").innerHTML="不能包含非法字符";
						document.getElementById("errorPass").className="span_error";
						return false;
					}
				}
				//验证是否包含所有的（数字，字母，下划线）
				var count  = 0;
				var numReg = /\d/;
				if (numReg.test(passstr)){
					count++;
				}
				var charReg = /[a-z,A-Z]/;
				if(charReg.test(passstr)){
					count++;
				}
				var xiaReg = /[_]/;
				if(xiaReg.test(passstr)){
					count++;
				} 
				if(count!=3){
						document.getElementById("errorPass").innerHTML="密码中必须包含三种字符";
						document.getElementById("errorPass").className="span_error";
						return false;
				}
				document.getElementById("errorPass").innerHTML="密码成功";
				document.getElementById("errorPass").className="span_success";
				return true;
			}