當(dāng)前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JavaScript使用正则表达式做表单验证
生活随笔
收集整理的這篇文章主要介紹了
JavaScript使用正则表达式做表单验证
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
JavaScript使用正則表達(dá)式做表單驗(yàn)證
文章目錄
- JavaScript使用正則表達(dá)式做表單驗(yàn)證
- 效果圖
- 一.body代碼
- 二.JavaScript代碼
- 三.小結(jié)
效果圖
一.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 />手機(jī)號:<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;'>格式不正確，手機(jī)號不正確！</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>三.小結(jié)
本章實(shí)現(xiàn)了一個由JavaScript實(shí)現(xiàn)的正則表達(dá)式表單判斷，做法不只此一種，感興趣的小伙伴自行發(fā)揮吧！
有哪里不足或者有更好的建議，歡迎留言吐槽，有哪里不懂的小伙伴，可以私信我，我會一一答復(fù)，感謝認(rèn)可，感謝支持！
總結(jié)
以上是生活随笔為你收集整理的JavaScript使用正则表达式做表单验证的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： [HDU5215]Cycle
- 下一篇： gradle idea java ssm