在做前端form表單驗證的時候,經常,也是必須對input做一下判斷,例如郵箱了,手機了,input非空了,input只能輸入數字了等等。
本篇文章主要講解“JavaScript RegExp 常用的手機和郵箱正則”,我在做表單的時候,一般是應用Validform,這個插件是比較好用的,能很好的解決絕大部分的表單驗證。
但是,這個表單驗證不是萬能的,有需要特殊處理的時候,例如,如何正確判斷一個input文本框既能輸入手機,又能輸入郵箱呢?
這種情況的應用場景很多,有時候用戶名必須是手機或者郵箱,其他不對,就用到了這個判斷。
其實這種正則表達式也是比較簡單的,下面我就講解一下:
郵箱的正則:
^[\w.\-]+@(?:[a-z0-9]+(?:-[a-z0-9]+)*\.)+[a-z]{2,3}$
手機的正則
^1[3|4|5|8]\d{9}$
兩個正則的結合,只需要“I”就可以了,如下:
(^[\w.\-]+@(?:[a-z0-9]+(?:-[a-z0-9]+)*\.)+[a-z]{2,3}$)|(^1[3|4|5|8]\d{9}$) //郵箱和手機
同樣的道理,有時候在填寫物流信息的時候,需要留聯繫方式,聯繫方式可以是手機或者電話,那麼正則同理也很簡單,可以如下寫:
(^13[0-9]{9}$|14[0-9]{9}|15[0-9]{9}$|18[0-9]{9}$)|(^0(10|2[0-5789]|\\d{3})\\d{7,8}$) //手機和電話 /(^1[3|4|5|7|8]\d{9})|((^0\d{2}-*|^0\d{3}-*)\d{7,8}$)/
若你運用Validform,找到Validform_v5.3.2.js這個文件,找到如下代碼:
dataType:{ "*":/[\w\W]+/, "*6-16":/^[\w\W]{6,16}$/, "n":/^\d+$/, "n6-16":/^\d{6,16}$/, "s":/^[\u4E00-\u9FA5\uf900-\ufa2d\w\.\s]+$/, "s6-18":/^[\u4E00-\u9FA5\uf900-\ufa2d\w\.\s]{6,18}$/, "p":/^[0-9]{6}$/, "m":/^13[0-9]{9}$|14[0-9]{9}|15[0-9]{9}$|18[0-9]{9}$/, "e":/^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/, "url":/^(\w+:\/\/)?\w+(\.\w+)+.*$/ },
將上面的正則添加在後面就可以了!
或者你也可以自己判斷,方法如下:
var reg = new RegExp("(^13[0-9]{9}$|14[0-9]{9}|15[0-9]{9}$|18[0-9]{9}$)|(^0(10|2[0-5789]|\\d{3})\\d{7,8}$)"); if(!reg.test(phone_mob)){ hiAlert('請輸入正確的手機號碼', '請注意',function(){ $("#phone_mob").focus(); }); return false; }
上面代碼我運用的是hiAlert插件,您也可以自己直接用alert,提示!
常用正則列舉
//正整數 /^[0-9]*[1-9][0-9]*$/; //負整數 /^-[0-9]*[1-9][0-9]*$/; //正浮點數 /^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$/; //負浮點數 /^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/; //浮點數 /^(-?\d+)(\.\d+)?$/; //email地址 /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/; //url地址 /^[a-zA-z]+://(\w+(-\w+)*)(\.(\w+(-\w+)*))*(\?\S*)?$/; 或:^http:\/\/[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*$ //年/月/日(年-月-日、年.月.日) /^(19|20)\d\d[- /.](0[1-9]|1[012])[- /.](0[1-9]|[12][0-9]|3[01])$/; //匹配中文字符 /[\u4e00-\u9fa5]/; //匹配帳號是否合法(字母開頭,允許5-10字節,允許字母數字下劃線) /^[a-zA-Z][a-zA-Z0-9_]{4,9}$/; //匹配空白行的正則表達式 /\n\s*\r/; //匹配中國郵政編碼 /[1-9]\d{5}(?!\d)/; //匹配身份證 /\d{15}|\d{18}/; //匹配國內電話號碼 /(\d{3}-|\d{4}-)?(\d{8}|\d{7})?/; //匹配IP地址 /((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)/; //匹配首尾空白字符的正則表達式 /^\s*|\s*$/; //匹配HTML標記的正則表達式 < (\S*?)[^>]*>.*?|< .*? />; //sql 語句 ^(select|drop|delete|create|update|insert).*$ //提取信息中的網絡鏈接 (h|H)(r|R)(e|E)(f|F) *= *('|")?(\w|\\|\/|\.)+('|"| *|>)? //提取信息中的郵件地址 \w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)* //提取信息中的圖片鏈接 (s|S)(r|R)(c|C) *= *('|")?(\w|\\|\/|\.)+('|"| *|>)? //提取信息中的 IP 地址 (\d+)\.(\d+)\.(\d+)\.(\d+) //取信息中的中國手機號碼 (86)*0*13\d{9} //提取信息中的中國郵政編碼 [1-9]{1}(\d+){5} //提取信息中的浮點數(即小數) (-?\d*)\.?\d+ //提取信息中的任何數字 (-?\d*)(\.\d+)? //電話區號 ^0\d{2,3}$ //騰訊 QQ 號 ^[1-9]*[1-9][0-9]*$ //帳號(字母開頭,允許 5-16 字節,允許字母數字下劃線) ^[a-zA-Z][a-zA-Z0-9_]{4,15}$ //中文、英文、數字及下劃線 ^[\u4e00-\u9fa5_a-zA-Z0-9]+