javascript
JavaScript之正则表达式验证邮箱，手机号码，身份证，网址，QQ，邮政编码，中文
今天要跟大家分享的是正則表達(dá)式的各種常用驗證方式：郵箱，手機(jī)號碼，身份證，網(wǎng)址，QQ，郵政編碼，中文；
之前一直不知道正則是咋回事，網(wǎng)上查閱的也是看得蒙頭轉(zhuǎn)向，只要搞懂了表達(dá)式的各種語法符號，做一個驗證還是比較容易的，邏輯還在，江山依舊。現(xiàn)在我就跟大家分享分享正則驗證，這里我將上訴集中驗證都封裝在proof函數(shù)里面，通過json方式將它們的正則表達(dá)式存儲下來，通過調(diào)用不同的json鍵值實現(xiàn)不同的驗證方式，媽媽再也不用擔(dān)心我滿世界的找各種驗證啦.......
演示地址
開打啦！額，不對，開工了：
第一步：布局，直接上圖吧，就不詳細(xì)說明結(jié)構(gòu)了
第二步：各種驗證表達(dá)式，這里定義了一個json對象?： re存儲這幾個表達(dá)式 var re = {'email':/^\w+(\.)?(\w+)?@[0-9a-z]+(\.[a-z]+){1,3}$/,//郵箱'phone':/^((13[0-9])|(15[0-37-9])|(18[0235789])|(14[57]))\d{8}$/,//電話'idcard':/^[1-9]((\d{14})|(\d{17})|(\d{16}x))$/i,//身份證'website':/^[a-zA-Z]+:\/\/[^\s]*$/,//網(wǎng)址'qq':/^[1-9][0-9]{4,10}$/,//QQ'zipcode':/^[1-9]\d{5}$/,//郵政編碼'chinese':/^[\u4e00-\u9fa5]+$/,//中文};
說明：（每一條的格式啥的都在百度上確認(rèn)過，如果有遺漏或者錯誤，歡迎指出糾正，謝謝！大半夜的找度娘，我也是饑渴難耐啊~~~）
1.郵箱格式：?xxxx@xx.xxx
?xxxx@xx.xxx.xxx
?xxx.xxxx@xx.xxx
?xxx.xxxx@xx.xxx.xxx
2.電話號碼格式：
移動號碼段:139、138、137、136、135、134、150、151、152、157、158、159、182、183、187、188、147
聯(lián)通號碼段:130、131、132、136、185、186、145
電信號碼段:133、153、180、189網(wǎng)絡(luò)
歸納起來就是13開頭的，第三位0-9都有；15開頭的，第三位0123789幾個數(shù)字；18開頭的，第三位0235789；14開頭的，第三位只有57；
當(dāng)然以后若有新的，再來改，切記電話號碼11位，這里沒有把座機(jī)號碼寫進(jìn)來。
3.身份證格式：
身份證有15位（之前的，現(xiàn)在也在用）和18位
15位身份證沒有校驗位,所以末尾沒有X
18位有檢驗位，所以末尾有數(shù)字和X兩種,這里x不區(qū)分大小寫
4.QQ號目前的長度最長為11位，感覺快超過電話號碼了- -；
5.中國郵政編碼長度為6；
第三步：測試，封裝
測試的時候是一條一條做的，最后驗證ok了就將它們封裝起來，方便以后調(diào)用；
主要用到的方法是test方法，函數(shù)名稱為proof；驗證的事件是文本框失去焦點的時候觸發(fā)，通過邊框顏色為綠色，失敗為紅色
代碼：
function proof(id,method){id.onblur = function(){var str = id.value;var re = {'email':/^\w+(\.)?(\w+)?@[0-9a-z]+(\.[a-z]+){1,3}$/,'phone':/^((13[0-9])|(15[0-37-9])|(18[0235789])|(14[57]))\d{8}$/,'idcard':/^[1-9]((\d{14})|(\d{17})|(\d{16}x))$/i,'website':/^[a-zA-Z]+:\/\/[^\s]*$/,'qq':/^[1-9][0-9]{4,10}$/,'zipcode':/^[1-9]\d{5}$/,'chinese':/^[\u4e00-\u9fa5]+$/};for(var attr in re){if(attr == method){if(str != null){if(re[attr].test(str)){id.style.borderColor = '#0F0';}else{id.style.borderColor = 'red';}}else{id.style.borderColor = 'red';}}}} }如果想要通過點擊某一個按鈕觸發(fā)驗證事件，只需添加一個參數(shù)，修改一條代碼即可，如下： function proof(btn,id,method){btn.onclick = function(){var str = id.value;var re = {'email':/^\w+(\.)?(\w+)?@[0-9a-z]+(\.[a-z]+){1,3}$/,'phone':/^((13[0-9])|(15[0-37-9])|(18[0235789])|(14[57]))\d{8}$/,'idcard':/^[1-9]((\d{14})|(\d{17})|(\d{16}x))$/i,'website':/^[a-zA-Z]+:\/\/[^\s]*$/,'qq':/^[1-9][0-9]{4,10}$/,'zipcode':/^[1-9]\d{5}$/,'chinese':/^[\u4e00-\u9fa5]+$/};for(var attr in re){if(attr == method){if(str != null){if(re[attr].test(str)){id.style.borderColor = '#0F0';}else{id.style.borderColor = 'red';}}else{id.style.borderColor = 'red';}}}} }
第四步：調(diào)用
這里注意method對應(yīng)re的鍵名稱，要加引號，
結(jié)構(gòu)代碼如下：
<label><span>郵箱：</span><input type="text" placeholder="" id="email"></label><label><span>手機(jī)號碼：</span><input type="text" placeholder="" id="phone"></label><label><span>身份證：</span><input type="text" placeholder="" id="idcard"></label><label><span>網(wǎng)址：</span><input type="text" placeholder="" id="website"></label><label><span>QQ號：</span><input type="text" placeholder="" id="qq"></label><label><span>郵政編碼：</span><input type="text" placeholder="" id="zipcode"></label><label><span>中文：</span><input type="text" placeholder="" id="chinese"></label>js調(diào)用代碼如下：
var email = document.getElementById("email");var phone = document.getElementById("phone");var idcard = document.getElementById("idcard");var website = document.getElementById("website");var qq = document.getElementById("qq");var zipcode = document.getElementById("zipcode");var chinese = document.getElementById("chinese");proof(email,'email')proof(phone,'phone')proof(idcard,'idcard')proof(website,'website')proof(qq,'qq')proof(zipcode,'zipcode')proof(chinese,'chinese')下載地址
總結(jié)
以上是生活随笔為你收集整理的JavaScript之正则表达式验证邮箱，手机号码，身份证，网址，QQ，邮政编码，中文的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 切片地图服务器
- 下一篇： 当前HNB资讯加热不燃烧产品与传统中烟加