5.5 表单校验原理,正则表达式

最新推荐文章于 2022-07-03 18:37:02 发布

杵意

最新推荐文章于 2022-07-03 18:37:02 发布

阅读量431

点赞数

分类专栏： java基础（前后端）文章标签：正则表达式前端 javascript

王锡豪

本文链接：https://blog.csdn.net/wang121213145/article/details/122133832

版权

java基础（前后端）专栏收录该内容

61 篇文章 5 订阅

订阅专栏

文章目录

1 表单校验

1.1 表单提交原理

在这里插入图片描述
使用submit按钮结合表单的onsubmit事件进行校验并提交数据
使用js代码进行校验，并通过表单的submit方法进行提交

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			span {
				display: none;
				color: red;
			}
		</style>
	</head>
	<body>
		<form action="https://www.baidu.com/" method="post" onsubmit="return verify()">
			账号：<input type="text" name="" id="username" onblur="userverify()" value="" /><span id="usermsg">用户名不能为空</span><br/>
			密码：<input type="text" name="" id="password" onblur="pwdverify()" value="" /><span id="pwdmsg">密码不能为空</span><br/>
			<input type="submit" value="提交"/>
		</form>
		<script type="text/javascript">
			function verify(){
				if(userverify() & pwdverify()){
					return true;
				}else{
					return false;
				}
			}
			function userverify(){
				if(username.value == ""){
					usermsg.style.display = "inline"
					return false;
				}else{
					usermsg.style.display = "none"
					return true;
				}
			}
			function pwdverify(){
				if(password.value == ""){
					pwdmsg.style.display = "inline"
					return false;
				}else{
					pwdmsg.style.display = "none"
					return true;
				}
			}
		</script>
	</body>
</html>

&：不管前面的条件是否正确，后面都执行。
&&：前面条件正确时，才执行后面，不正确时，就不执行，就效率而言，这个更好。
&&是逻辑运算中的“短路”，若"&&“前的条件为false时判断结果为false，不再执行”&&“后的语句块。”&&"前为true则继续进行进行后半部分的判断。

1.2 用字符串方法进行表单校验

表单校验的内容:
非空校验:是否填写了内容
格式校验:长度是否在范围内，格式是否符合规则
存在性校验:数据在数据库服务器端是否已经存在
因为表单中的内容很多都是字符串，所以可以使用字符串方法完成一些表单校验的功能，如下是常用的字符串方法:
在这里插入图片描述

2 正则表达式

正则表达式:定义一个规则去校验目标内容是否符合这个规则。用于字符串的校验，查找，替换。

正则表达式的常用方法:

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			let str = "410726200012146213";
			// let zz = new RegExp("wang","i")//i
			// let zg = new RegExp("wang","gi")//i
			// alert(zz.exec(str))//返回匹配到的值
			// alert(zg.exec(str))
			// let zz = /wang/gi;
			 let zz = /^[0-9]{6}[0-9]{2}[19|20]{1}[0-9]{2}[0-9]{2}[0-9]{3}[0-9]{1}$/;
			// alert(zz.exec(str));1
			let newstr = zz.test(str);
			alert(newstr)
			// document.write("匹配的内容是："+newstr + "匹配的位置"+newstr.index + "下次匹配的位置"+zz.lastIndex)
			
		</script>
	</body>
</html>

在这里插入图片描述
限定符：



第一种是：    *：匹配0至多个在它之前的子表达式，和通配符*没关系。 如 zoo* ,*表示可以出现0次，也可以出现多次。（可有可无，可多可少）

第二种是：    + ：匹配前面的子表达式一次或多次  如zoo+  ,+表示可以出现一次，或者是多次。（至少得出现一次。）  注意：*  +只表示o的出现次数，要是想表示前面的整个表达式，得用小括号括起来。

第三种是：    ? ：匹配前面的子表达式零次或一次。  如zoo? ，要么0次，要么1次。

第四种是：    {n} ：匹配确定的 n 次。

第五种是：    {n,m} ：最少匹配 n 次且最多匹配 m 次。

开头结尾

第一种是：    ^（shift+6） ：匹配一行的开始。如^xxx.   表示字符串必须以三个先开头，后面跟任意的单个字符。

它还有一个意思就是取反的意思，如 a[^a-zA-Z0-9]b  表示中间去大小写字符和数字都不行。

第二种是：    $ ：匹配行结束符。    如xxx.$  表示结尾必须以xxx加任意字符结束。

常用元字符

接下来我们再看一些个元字符（一些简写的方式）：

第一种是：    \d：代表一个数字，等同于[0-9]   如a[0-9]b   a\db

第二种是：    \D：代表非数字，等同于[^0-9]

第三种是：    \s：代表换行符、Tab制表符等空白字符 ,(空格、回车、制表符)

第四种是：    \S：代表非空白字符（a0%$@@）

第五种是：    \w：匹配字母或数字或下划线或汉字，即能组成单词的字符,除%&#@!$等字符。[a-zA-Z0-9_汉字]

第六种是：    \W：非\w ，等同于[^\w] %