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

阳光穿透心脏的1/2处 2022-06-13 09:59 156阅读 0赞

**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>
>     	
>     	<body>
>     		<form action="" οnsubmit="return checkAll()" >
>     			用户名：<input type="text" id="username" οnblur="testUsernamr()" /><span id="usernameSpan"></span><br />
>     			密 码：<input type="password" id="password" οnblur="testPassworerd()" /><span id="passwordSpan"></span><br />
>     			确认密码：<input type="password" id="repassword" οnblur="testRepassworerd()" /><span id="repasswordSpan"></span><br />
>     			邮箱：<input type="text" id="email" οnblur="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.部分截图

> ![Center][]![Center 1][]  
>

[Center]: https://img-blog.csdn.net/20170704173648581?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvQWdfbmV2ZXJnaXZldXA=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 1]: /images/20220613/3e7e01691e77486fa6c1c46bcd3bb776.png