Web前端案例_正则表达式案例

最新推荐文章于 2024-03-26 00:00:00 发布

原创最新推荐文章于 2024-03-26 00:00:00 发布 · 1.1k 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#正则表达式 #web前端 #表单 #javascript #java

JavaWeb笔记同时被 3 个专栏收录

41 篇文章

订阅专栏

Web前端笔记

31 篇文章

订阅专栏

Web前端案例

6 篇文章

订阅专栏

本文介绍了一个使用正则表达式进行表单验证的Web前端案例，包括用户名、密码、邮箱等字段的有效性检查，并确保所有验证通过后才允许提交。

Web前端案例_正则表达式案例

这篇写关于一个正则表达式以及表单结合的案例。

1.案例说明

案例：利用正则表达式写一个表单验证

用户名：10-15位的数字或者字母
密码：10-15位的数字或字母
确认密码：判断两次输入的密码是否一致
邮箱：xxx@xxx.(com/cn/net)
提交按钮：必须全部验证成功的情况下，才能成功提交，只要有一个验证失败无法提交

2.实现分析

主要页面就是一个form表单，对于表单中的几个输入值利用正则表达式进行判断，在对应的span标签里面进行提示是否合法，最后利用form表单的onsubmit属性，利用各判断函数返回的布尔值判断是否上传表单信息。

3.实现代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<!--
		案例：利用正则表达式写一个表单验证
		用户名：10-15位的数字或者字母
		密码：10-15位的数字或字母
		确认密码：判断两次输入的密码是否一致
		邮箱：xxx@xxx.(com/cn/net)
		提交按钮：必须全部验证成功的情况下，才能成功提交，只要有一个验证失败无法提交
	-->
	<body>
		<form action="" onsubmit="return checkAll()" >
			用户名：<input type="text" id="username" onblur="testUsernamr()" /><span id="usernameSpan"></span><br />
			密 码：<input type="password" id="password" onblur="testPassworerd()" /><span id="passwordSpan"></span><br />
			确认密码：<input type="password" id="repassword" onblur="testRepassworerd()" /><span id="repasswordSpan"></span><br />
			邮箱：<input type="text" id="email" onblur="testEmail()" /><span id="emailSpan"></span><br />
			<input type="submit" value="提交" /><br />
		</form>
	</body>
	<script>
		function testUsernamr(){
			var reg = /^[0-9a-zA-Z]{10,15}$/;
			var span = document.getElementById("usernameSpan");
			var username = document.getElementById("username");
			if(reg.test(username.value)){
				span.innerHTML="用户名可用！".fontcolor("green");
				return true;
			}else{
				span.innerHTML="用户名不可用！".fontcolor("red");
				return false;
			}
		}
		
		function testPassworerd(){
			var reg = /^[0-9a-zA-Z]{10,15}$/;
			var span = document.getElementById("passwordSpan");
			var password0 = document.getElementById("password");
			if(reg.test(password0.value)){
				span.innerHTML="密码格式正确！".fontcolor("green");
				return true;
			}else{
				span.innerHTML="密码格式不正确！".fontcolor("red");
				return false;
			}
		}
		
		function testRepassworerd(){
			var password1 = document.getElementById("password").value;
			var span = document.getElementById("repasswordSpan");
			var repassword = document.getElementById("repassword").value;
			if(password1==repassword){
				span.innerHTML="密码一致！".fontcolor("green");
				return true;
			}else{
				span.innerHTML="密码不一致！".fontcolor("red");
				return false;
			}
		}
		
		function testEmail(){
			var reg = /^[0-9a-zA-Z]+@[0-9a-zA-Z]+(\.[a-z]{2,3}){1,2}$/;
			var span = document.getElementById("emailSpan");
			var email = document.getElementById("email");
			if(reg.test(email.value)){
				span.innerHTML="邮箱格式正确！".fontcolor("green");
				return true;
			}else{
				span.innerHTML="邮箱格式不正确！".fontcolor("red");
				return false;
			}
		}
		
		function checkAll(){
			if(testUsernamr()&&testPassworerd()&&testRepassworerd()&&testEmail()){
				return true;
			}else{
				return false;
			}
		}
	</script>
</html>

4.部分截图