js表单验证与正则
表單驗證與正則
目錄
- 表單驗證與正則
- 一，正則表達式
- 二，表單
- 三，下拉框
- 四， for循環
- 五，表單驗證中的常用代碼
一，正則表達式
相信有一定編程語言學習基礎的一定知道正則表達式，javascript的正則表達式其實與java的有95%的相似之處，當然，如果你沒有基礎或者忘記了也沒事，小編今天給大家整理好了
首先：
java 中的正則需要一個轉義符，而javascript中的正則需要一個特定的書寫規范
然后這里是一些常用的正則
| \d | 數字[0-9] |
| \D | 非數字 ^ [0-9] |
| \w | 數字+字母+下劃線[0-9a-zA-Z] |
| \W | 非數字+字母+下劃線 ^ [0-9a-zA-Z] |
| . | 任意字符 |
| ? | 0-1次 |
| + | 至少一次 |
| * | 0-任意次 |
| \d{5} | 五個數字 |
| \d{5,10} | 最少5次，最多10次 |
注意事項:
二，表單
表單其實與表格有類似的地方，但表單給多是用來做界面提交的，有提交頁面的功能，具備返回值，而表格大多時候是用來放數據更直觀的展現數據；
<form action="" method=""><!-- 這里可以放標簽 --><p>我是一個表單</p><p>姓名：<input id="userName" /> </p><p>密碼：<input id="userPwd" /></p></form>上面是一個表單的結構
三，下拉框
下拉框不相同與其他的標簽可以通過input標簽來拿出來，下拉框有自己專門的一個寫法
<select name=""><option value=""> 內容</option><!-- value是你后臺拿的值 --></select>下拉框的一個二級聯動
<head><meta charset="utf-8" /><title>省市聯動</title></head><body><select id="province" onchange="myChange()"> </select><select id="cities"> </select>//完成兩個下拉框，并且區分開來<script type="text/javascript">var provinces=[]//定義一個數組存放省// 城市provinces["湖南省"]=["長沙","衡陽","永州","郴州","湘潭"]provinces["廣西省"]=["南寧","桂林","柳州"]provinces["廣東省"]=["廣州","惠州","東莞","珠海","佛山"]provinces["江蘇省"]=["南京","蘇州","無錫"]provinces["浙江省"]=["杭州","寧波","溫州"]// 拿省份，for of遍歷元素// for in 拿下標//拿省for(let i in provinces){province.appendChild(new Option(i,i))}//根據省拿市function setCity(name){ for( let i of provinces[name]){cities.appendChild(new Option(i,i))} }//初始化值setCity(province.value)// // provinces.value//添加監聽事件function myChange(){cities.innerHTML=""setCity(province.value)}</script></body>這樣一個簡單的省市二級聯動就做好了
四， for循環
for(let i of provinces){}for(let i in provinces){}這兩個for循環有何種區別呢，實現第一種，它采用的是 of,這樣就拿的了這個provinces數組里面的值，而采用 in結構的這個for 循環并不是拿的直接值，而是拿的它的下標，通過下標拿值。
五，表單驗證中的常用代碼
2.兩次輸入密碼是否相同
<script type="text/javascript"> function checkPwd(){ with(document.all){ if(input1.value!=input2.value) { alert("密碼不一致") input1.value = ""; input2.value = ""; } else {undefined alert("密碼一致"); document.forms[0].submit(); } } } </script>3，郵箱驗證
<script language="javascript"> function test(obj){undefined //對電子郵件的驗證 var myreg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/; if(!myreg.test(obj)) {undefined alert('請輸入有效的郵箱！'); return false; } } </script>4.手機號的驗證
<script type="text/javascript"> function validatemobile(mobile) { if(mobile.length==0) { alert('手機號碼不能為空！'); return false; } if(mobile.length!=11) { alert('請輸入有效的手機號碼！'); return false; }var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/; if(!myreg.test(mobile)) { alert('請輸入有效的手機號碼！'); return false; } } </script>以上呢就是小編給大家分享的內容了，覺得對你有幫助的可以給小編點給贊支持一些，當然也可以關注小編，繼續分享精彩內容！
總結
- 上一篇： Spring AOP 五大通知类型
- 下一篇： 使用ReflectionToString