JavaScript使用正则表达式做表单验证

JavaScript使用正则表达式做表单验证


文章目录

  • JavaScript使用正则表达式做表单验证
  • 效果图
  • 一.body代码
  • 二.JavaScript代码
  • 三.小结


效果图

JavaScript使用正则表达式做表单验证_第1张图片

一.body代码

<body>
		<form action="index2.html" method="get" name="myform">
			姓名:<input type="text" id="name" onblur="uname(this.value)"/><a href="javascript:del('name','s1')">清空a><span id="s1" style="color: blue;">span><br />
			性别:<input type="text" id="sex"  onblur="usex(this.value)"/><a href="javascript:del('sex','s2')">清空a><span id="s2" style="color: blue;">span><br />
			手机号:<input type="text" id="tel" onblur="utel(this.value)"/><a href="javascript:del('tel','s3')">清空a><span id="s3" style="color: blue;">span><br />
			邮箱:<input type="text" id="email" onblur="uemail(this.value)"/><a href="javascript:del('email','s4')">清空a><span id="s4" style="color: blue;">span><br />
			
			<input type="button"  value="提交"  onclick="ln()"/>
		form>
	body>

二.JavaScript代码

<script>
			function uname(name){
				
				var flag=/\w{1,6}/;
				if(flag.test(name)){
					var s1=document.getElementById('s1');
					s1.innerHTML="?";
				}else{
					var s1=document.getElementById('s1');
					s1.innerHTML="格式不正确,姓名不可超过6位!";
				}
			}
			function usex(sex){
				var flag=/[男|女]{1}/;
				if(flag.test(sex)){
					var s2=document.getElementById('s2');
					s2.innerHTML="?";
				}else{
					var s2=document.getElementById('s2');
					s2.innerHTML="格式不正确,性别不对!";
				}
			}
			function utel(tel){
				var flag=/^[1][3|5|8]\d{9}/;
				if(flag.test(tel)){
					var s3=document.getElementById('s3');
					s3.innerHTML="?";
				}else{
					var s3=document.getElementById('s3');
					s3.innerHTML="格式不正确,手机号不正确!";
				}
			}
			function uemail(email){
				var flag=/^[0-9]{5,10}[@]{1}[A-z]{2}[.]{1}[A-z]{3}$/;
				if(flag.test(email)){
					var s4=document.getElementById('s4');
					s4.innerHTML="?";
				}else{
					var s4=document.getElementById('s4');
					s4.innerHTML="格式不正确,邮箱不正确!";
				}
			}
			
			function ln(){
				var s1=document.getElementById('s1');
				var s2=document.getElementById('s2');
				var s3=document.getElementById('s3');
				var s4=document.getElementById('s4');
				if(s1.innerHTML=="?" && s2.innerHTML=="?" && s3.innerHTML=="?" && s4.innerHTML=="?"){
					
					document.myform.submit();
					
				}else{
					
					alert("请按格式填写完毕!");
				}
				
			}
			
			function del(vl,sp){
				var ss=document.getElementById(vl);
				var par=confirm("确定清空吗?");
				if(par){
					var sp1=document.getElementById(sp);
					ss.value="";
					sp1.innerHTML="";
				}else{
					alert('取消清空!');
				}
			}
		script>

三.小结

本章实现了一个由JavaScript实现的正则表达式表单判断,做法不只此一种,感兴趣的小伙伴自行发挥吧!

有哪里不足或者有更好的建议,欢迎留言吐槽,有哪里不懂的小伙伴,可以私信我,我会一一答复,感谢认可,感谢支持!

你可能感兴趣的:(javascript,前端,firefox)