Form表单校验

最新推荐文章于 2023-06-15 17:29:04 发布

原创最新推荐文章于 2023-06-15 17:29:04 发布 · 451 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

WEB前端@DHTML 专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了如何通过复用校验逻辑来减少冗余代码，并优化了表单校验流程，具体包括用户名、密码、确认密码和邮件地址的验证规则。同时，通过引入统一的校验函数，实现了表单提交前的全面校验，确保了数据的有效性和一致性。此外，还展示了两种表单提交方式，即通过表单的默认提交行为和自定义函数触发的提交，以提高灵活性和用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

正则表达式的两种使用方式及其用法上的区别

表单提交的两种方式

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单校验</title>

<script type="text/javascript">
	function checkUname(node) {
		var flag = false;
		if(node==undefined) {
			node = document.getElementById("uname");
		}
		var uname = node.value;
		var unameSpan = document.getElementById('unameSpan');
		
		//限定只能为字母，不区分大小写，长度4位
		var reg = /^[a-z]{4}$/i;
		//var reg = new RegExp("^[a-z]{4}$","i");//匹配模式 i 忽略大小写 
		
		//正则表达式的2中定义方式
		//var reg = /^\d{4}$/i;//不需要对\d转义
		//var reg = new RegExp("^\\d{4}$","i");//由于在字符串中定义正则，所以需要对\d进行转义，这就是两种定义方式的区别  
		
		if(reg.test(uname)) {
			flag = true;
			unameSpan.innerHTML = "<b>ok</b>".fontcolor("green");
			//unameSpan.innerHTML = "<img src='ok.jpg' alt='ok'/>";
		}else {
			unameSpan.innerHTML = "<b>用户名不符合要求</b>".fontcolor("red");
		}
		
		return flag;
	}
	
	
	//控制form表单的提交 
	function checkForm() {
		return checkUname();
	}
	
	//另一种表单提交方式:
		//通过form表单的submit方法进行提交（更灵活，可以通过外部的各种事件来完成 ，如按钮被点击，超链接/图片被点击 ，等等 ） 
	function mySubmit() {
		if(!checkForm())
			return;
		var fm = document.getElementById("form_1");
		fm.submit();
	}
</script>

</head>
<body>
	<div>
		<form id="form_1" onsubmit="return checkForm();">
			<table>
				<tbody>
					<tr>
						<td>
							用户名
						</td>
						<td>
							<input type="text" name="uname" id="uname" onblur="checkUname(this);"/>
							<span id="unameSpan"></span>
						</td>
					</tr>
					<tr>
						<td>
							输入密码
						</td>
						<td>
							<input type="password" name="pwd" id="pwd" onblur="checkPwd(this);"/>
							<span id="pwdSpan"></span>
						</td>
					</tr>
					<tr>
						<td>
							确认密码
						</td>
						<td>
							<input type="password" name="repwd" id="repwd" onblur="checkRepwd(this);"/>
							<span id="repwdSpan"></span>
						</td>
					</tr>
					<tr>
						<td>
							邮件地址
						</td>
						<td>
							<input type="text" name="email" id="email" onblur="checkEmail(this);"/>
							<span id="emailSpan"></span>
						</td>
					</tr>
					<tr>
						<td>
							<!-- submit具有默认的提交效果 -->
							<input type="submit" value="提交"/>
						</td>
					</tr>
				</tbody>
			</table>
		</form>
		
		<hr/>
		<input type="button" value="另一种提交方式 " onclick="mySubmit();"/>
		
	</div>
</body>
</html>

复用校验逻辑，减少冗余代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单校验</title>

<script type="text/javascript">
	/*校验用户名*/
	function checkUname() {
		var reg = /^[a-z]{4}$/i;
		return check(reg,"uname","unameSpan", "用户名正确".fontcolor("green"), "用户名错误".fontcolor("red"));
	}
	/*校验密码*/
	function checkPwd() {
		var reg = /^\d{6}$/i;
		return check(reg,"pwd","pwdSpan","密码格式正确".fontcolor("green"),"密码格式错误".fontcolor("red"));
	}
	
	/*校验2次密码是否一致*/
	function checkRepwd() {
		var pwd = document.getElementById("pwd").value;
		var repwd = document.getElementById("repwd").value;
		var spanRepwd = document.getElementById("repwdSpan");
		if(pwd==repwd) {
			spanRepwd.innerHTML = "两次密码一致".fontcolor("green");
		} else {
			spanRepwd.innerHTML = "两次密码不一致".fontcolor("red");
		}
		return pwd==repwd;
	}
	
	/*校验邮箱格式*/
	function checkEmail() {
		var reg = /^\w+@\w+(\.\w+)+$/i;
		return check(reg,"email","emailSpan","邮件格式正确".fontcolor("green"),"邮件格式错误".fontcolor("red"));
	}
	
	
	//复用校验逻辑！！！ 
	function check(reg,nodeId,spanId,okInfo,errorInfo) {
		var flag;
		var val = document.getElementById(nodeId).value;
		var unameSpan = document.getElementById(spanId);
		if(reg.test(val)) {
			flag = true;
			unameSpan.innerHTML = okInfo;
		}else {
			flag = false;
			unameSpan.innerHTML = errorInfo;
		}
		return flag;
	}
	
	
	//控制form表单的提交 
	function checkForm() {
		//alert(checkUname() +","+ checkPwd()  +","+  checkRepwd()  +","+  checkEmail());
		//最后进行提交的时候，再次调用每个方法，确保都为true的情况下提交表单数据 
		return  checkUname() && checkPwd() && checkRepwd() && checkEmail();
	}
	
</script>

</head>
<body>
	<div>
		<form id="form_1" onsubmit="return checkForm();">
			<table>
				<tbody>
					<tr>
						<td>
							用户名
						</td>
						<td>
							<input type="text" name="uname" id="uname" onblur="checkUname();"/>
							<span id="unameSpan"></span>
						</td>
					</tr>
					<tr>
						<td>
							输入密码
						</td>
						<td>
							<input type="password" name="pwd" id="pwd" onblur="checkPwd();"/>
							<span id="pwdSpan"></span>
						</td>
					</tr>
					<tr>
						<td>
							确认密码
						</td>
						<td>
							<input type="password" name="repwd" id="repwd" onblur="checkRepwd();"/>
							<span id="repwdSpan"></span>
						</td>
					</tr>
					<tr>
						<td>
							邮件地址
						</td>
						<td>
							<input type="text" name="email" id="email" onblur="checkEmail();"/>
							<span id="emailSpan"></span>
						</td>
					</tr>
					<tr>
						<td>
							<!-- submit具有默认的提交效果 -->
							<input type="submit" value="提交"/>
						</td>
					</tr>
				</tbody>
			</table>
		</form>
		
	</div>
</body>
</html>