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

表单验证1.什么是表单验证表单：搜集用户信息，并且将信息发送给指定的服务器程序处理。信息必须格式才能向后台提交。如果没有javaScript此时数据的校验只能在后台服务器端完成，后果：浪费资源，浪费时间，降低服务器的效率。在js校验数据格式。如果符合格式，可以提交，否则，不能提交。如果有javaScript :直接在客户端进行数据格式的校验，不需要经过后台，也就是说，只要数据能发送倒到后台，就

Zoro26

3587人浏览 · 2021-04-08 08:45:32

Zoro26 · 2021-04-08 08:45:32 发布

表单验证

1.什么是表单验证

表单：搜集用户信息，并且将信息发送给指定的服务器程序处理。信息必须格式才能向后台提交。

如果没有javaScript 此时数据的校验只能在后台服务器端完成，

后果：浪费资源，浪费时间，降低服务器的效率。在js校验数据格式。如果符合格式，可以提交，否则，不能提交。

如果有javaScript : 直接在客户端进行数据格式的校验，不需要经过后台，也就是说，只要数据能发送倒到后台，就说明这个数据一定是后台需要的数据。

表单验证的作用：验证数据的格式，将后台需要的数据格式发送到后台。

**例如：**手机号，身份证号，邮箱等。

搭载ui界面

进行表单验证首先搭载好自己的ui页面

<style type="text/css">
			fieldset{
				width:600px;
				margin: auto;
			}
			table input{
				width: 400px;
				height: 20px;
				border-radius: 10px;
				outline: none;
			}
			.div1{
				width: 390px;
				height: 20px;	
				position: absolute;
				top:38px;
			}
			td{
				position: relative;
			}
			tr{
				height: 50px;
			}
			.div1 div{
				display: none;
			}
		</style>
	</head>
	<body>
		<form action="http://www.baidu.com" method="post" onsubmit="return submi()">
		<fieldset id="">
			<legend>表单验证</legend>
			<table width="580px">
				<tr>
					<td align="right" width="70px">用户名：</td>
					<td><input type="text" class="inpu" onblur="firstInput(this)" placeholder="请输入用户名" required/>
						<div class="div1">
							<div>开头必须用字母，总体长度6--16位</div>
							<div>格式输入有问题</div>
							<div>格式输入正确</div>
						</div>
					</td>
				</tr>
				<tr>
					<td align="right" width="70px">密 &nbsp;&nbsp;码：</td>
					<td><input type="password" onblur="secondInput(this)" class="inpu" placeholder="请输入密码" required/>
						<div class="div1">
							<div>开头必须用字母，总体长度6--16位</div>
							<div>密码输入有问题</div>
							<div>密码输入正确</div>
						</div>
					</td>
				</tr>
				<tr>
					<td align="right" width="70px">邮&nbsp;&nbsp;箱 ：</td>
					<td><input type="text" class="inpu" onblur="thirdInput(this)" placeholder="请输入邮箱号" required/>
						<div class="div1">
							<div>输入正确的邮箱号</div>
							<div>邮箱输入有问题</div>
							<div>邮箱输入正确</div>
						</div>
					</td>
				</tr>
			</table>
			<input type="submit"/>
		</fieldset>
		</from>
	</body>

在这里插入图片描述

聚焦事件

当鼠标点进去输入框的时候，显示出提示信息，例如提示所需要的格式

这个时候我们可以先遍历所有的输入框

然后对输入框绑定聚焦的匿名函数

//获得所有的类名为inpu的input标签
		var inp=document.getElementsByClassName("inpu");
		//对获得的进行遍历
		for(var i=0;i<inp.length;i++){
			//对输入框进行聚焦事件，用匿名函数
			inp[i].onfocus=function(){
				//把input下面的div中的第一个div赋值给first
				var first=this.nextElementSibling.children[0];
				//修改第一个div的样式，变成可见
				first.style.display='block';
				//修改背景颜色
				first.style.backgroundColor='black';
				//修改字体颜色
				first.style.color='white';
				//让另外两个变成不可见
				this.nextElementSibling.children[1].style.display='none';
				this.nextElementSibling.children[2].style.display='none';	
			}
		}

当鼠标点击进去时候，将一开始Input下面的div中的第一个子div显示出来，其他的继续进行隐藏，代码的最后两个是因为当我们后面写到失焦事件的时候，再次聚焦会使聚焦的框也显示出来所以在此加上了使后面两个框隐藏.

在这里插入图片描述

失焦事件

当鼠标从输入框挪出来，失去焦点的时候，此时需要将聚焦的框进行隐藏

但是我们需要的功能是当输入值的时候，把正确或者错误的框显示出来，所以可以进行判断

如果输入框中有内容，则失焦时候显示正确或者错误的框

如果没有内容，则把聚焦的框隐藏

首先我们要先把每一个输入框都绑定一个失焦事件这样做的不足就是需要写很多重复的代码并且每一个都要绑定

其次，绑定时候传入参数（this）然后在函数中接参调用

再判断是否有值以后也要对所需要的内容进行二次判断，这里判断的就是输入的内容是否满足正则表达式

所谓的正则表达式可以参考百度的文献

大概就是 var reg=/ /;

这就是百度的正则表达式

如果满足正则表达式则将正确的框弹出来

否则就是将错误的框弹出来

function firstInput(finpu){
			//判断 如果这个input的值不为空
			if(finpu.value!=""){
				//设置正则表达式
				var reg=/^[a-zA-Z]\w{5,15}$/;
				//判断这个值是否满足正则表达式
				if(reg.test(finpu.value)){
					//满足进入一下操作
					var three=finpu.nextElementSibling.children[2];
					three.style.display='block';
					three.style.backgroundColor='lightblue';
					three.style.color='white';
					finpu.style.borderColor='deepskyblue';
				}else{
					//不满足就将第二个子div的内容显示出来
					var two=finpu.nextElementSibling.children[1];
					two.style.display='block';
					two.style.backgroundColor='orangered';
					two.style.color='white';
					finpu.style.borderColor='red';				
				}
			}
			//如果不是空 则失去焦点时候隐藏
			var one = finpu.nextElementSibling.children[0];
			one.style.display = 'none';
		}

错误的格式
在这里插入图片描述

正确的格式
在这里插入图片描述

提交

提交的时候需要注意因为是表单的方式进行提交所以要对提交的内容进行判断，如果输入的是错误的信息，则就提示再修改，不允许提交，如果信息全部正确则可以进行提交

是否提交就是form表头中添加return 加上一个函数

如果函数的返回值为false则不可以提交

如果函数的返回值为true 则可以提交

正确与否的判断可以借助第三方变量由于前面我们添上了当正确或者错误的时候改变了Input边框的颜色，所以可以根据颜色判断

当然，如果全是空就用required

function submi(){
			var flag=false;
			for(var i=0;i<inp.length;i++){
				if(inp[i].style.borderColor=="red"){
					flag=true;
					break;
				}
			}
			if(flag==true){
				alert("请检查你的数据格式");
				return false;
			}else{
				return true;
			}
		}