JavaScript使用正则表达式做表单验证
文章目录
JavaScript使用正则表达式做表单验证效果图一.body代码二.JavaScript代码三.小结效果图
一.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="<a style='color: red;'>格式不正确，姓名不可超过6位！</a>";}}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="<a style='color: red;'>格式不正确，性别不对！</a>";}}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="<a style='color: red;'>格式不正确，手机号不正确！</a>";}}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="<a style='color: red;'>格式不正确，邮箱不正确！</a>";}}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实现的正则表达式表单判断，做法不只此一种，感兴趣的小伙伴自行发挥吧！
有哪里不足或者有更好的建议，欢迎留言吐槽，有哪里不懂的小伙伴，可以私信我，我会一一答复，感谢认可，感谢支持！
