JavaScript ---[表单验证,正则表达式]

Posted 2021-06-30 小智RE0

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript ---[表单验证,正则表达式]相关的知识，希望对你有一定的参考价值。

表单验证

当在网页中完成表单内容,例如文本框,密码,选择框等;需要对输入的内容进行亚验证,(例如是否输入了数据,是否输入了指定数据);然后再向服务器发送数据.

在表单中使用onsubmit事件;点击submit时就会触发事件.

设置js中的checkForm函数;需要设置布尔值类型的返回值
若返回值为false,则不会同意向服务器发送表单的数据

注意,在使用onsubmit事件时需要用到return ;
例如:onsubmit="return checkForm()"

案例:账号框的输入验证;

表单的网页:

<!DOCTYPE html>
<!--需要写个假设的服务器-->
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			//在函数中需要设置布尔值类型的返回值;若返回值为false,则不会同意向服务器发送表单的数据;
			function checkForm(){
				//获取账号文本框中输入的值 valueforForm;
				var valueforForm=document.getElementById("textId").value;
				//获取span标签的id;
				var IdforSpan=document.getElementById("spanId");
				if(valueforForm.length==0){
				   IdforSpan.innerHTML="请输入账号!!!";
					return false;
				}
				if(valueforForm.length<8){
					IdforSpan.innerHTML="至少输入8位!!!";
					return false;
				}
			    //确认无误后,同意向服务器发送数据;	
				return true;
			}
		</script>
	</head>
	<body>
		<!--action;将数据发送给假设的服务器-->
		<!--onsubmit事件;点击submit时触发;-->
		<form action="假设的服务器.html" method="get" onsubmit="return  checkForm()">
			账号<input type="text" id="textId" />
			<!--在这个span标签显示,表单验证时提示的内容;-->
			<span id="spanId" style="color: crimson; font-family: "楷体";">
			</span><hr/>
			<input type="submit" value="保存一下"/>
		</form>
	</body>
</html>

-模拟的服务器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		假设的服务器
	</body>
</html>

演示:

表单验证案例演示

在了解表单验证的基本原理之后;那么在对表单中输入的数据,除了长度的验证,还有数据的格式验证,那么就得提出正则表达式的知识点了.

正则表达式

在学习Java语言的字符串时,就学习了正则表达式的知识点,来验证且判断输入的数据格式;

正则表达式(regular expression) :描述了一种字符串匹配的模式（pattern），可以用来检查一个串是否含有某种子串、将匹配的子串替换或者从某个串中取出符合某个条件的子串等。

基本语法：
var reg = new RegExp(“表达式”);

在js中,也可以直接用简单的语法:
var reg = /表达式/;

(var result=reg.test(标签的内容);
这个test方法会对标签中的内容值进行判断;返回布尔类型的值)

部分表达式

^匹配以指定字符开头的字符串
$匹配以指定字符结尾的字符串
*匹配前面的字符式零次或多次
? 允许出现一次或者一次都没有
+ 允许出现一次或者多次
{n}匹配确定的 n 次
{n,}至少匹配n 次
{n,m}匹配n-m次，包含n和m
[0-9]表示0-9之间的任意字符
\\d 匹配一个数字字符。等价于 [0-9]
\\D 匹配一个非数字字符。等价于 [^0-9]
[a-z]匹配 'a' 到 'z' 范围内的任意小写字母字符
[A-Z]匹配 ‘A’ 到 ‘Z’ 范围内的任意大写字母字符
[^a-z]匹配任何不在 'a' 到 'z' 范围内的任意字符
x|y匹配 x 或 y
\\w等价于'[A-Z,a-z,0-9,_(下划线)]‘
\\W 等价于 '[^A-Z,a-z,0-9,_(下划线)]‘
只能输入汉字:[\\u4e00-\\u9fa5]

(和Java语言不同的是,JS语言中单斜杠转义就可以了,而不是Java语言的正则表达式那种双斜杠)

案例:对一个文本框输入的内容使用正则表达式验证;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function checkForm(value){
				//使用规定的表达式指定格式;
				//规定文本框内容 以'a' 到 'z' 范围内的任意小写字母字符 开头;且至少8次;且以678结尾;
				var reg=/^[a-z]{8,}678$/;
				//用test方法对这个标签的内容进行格式判断;
				var result=reg.test(value);
				//将返回的布尔值输出;
				console.log(result);
			}
		</script>
	</head>
	<body>
		<!--this 表示文本框对象,this.value来获取文本框中的内容-->
		<!--使用onchange事件,当标签失去焦点且内容值被改变时就会触发;-->
		<input type="text" onchange="checkForm(this.value)"/>
	</body>
</html>