如何判斷用戶瀏覽器以及一些前端經常使用的正則表單驗證

前言

在咱們作用戶受權登陸(微信,qq受權)，以及根據對應瀏覽器作對應的操做的時候，常常會遇到須要判斷用戶使用的瀏覽器的需求，以及在須要用戶輸入信息的時候，有須要驗證的一些正則。若是喜歡的話能夠點波贊/關注，支持一下，但願你們看完本文能夠有所收穫。

我的博客瞭解一下：obkoro1.com

---

判斷用戶瀏覽器

navigator.userAgent

判斷用戶所使用的瀏覽器主要用到的api是navigator.userAgent，這是一個只讀的字符串，聲明瞭瀏覽器用於 HTTP 請求的用戶代理頭的值，不一樣瀏覽器的userAgent值都不相同，因此咱們能夠根據這個字符串來判斷用戶是從哪一個瀏覽器進入的。

判斷方式：

下面兩個是剛作的demo獲取的值，仔細觀察下面兩個字符串，會發現有些值是不同的，而且瀏覽器特有的，依據這個咱們就能夠做爲不一樣瀏覽器的判斷條件。

QQ內置瀏覽器的userAgent值：

mozilla/5.0 (iphone; cpu iphone os 11_1_2 like mac os x) applewebkit/604.3.5 (khtml, like gecko) mobile/15b202 qq/7.5.8.422 v1_iph_sq_7.5.8_1_app_a pixel/1080 core/uiwebview device/apple(iphone 8plus) nettype/wifi qbwebviewtype/1

微信內置瀏覽器的userAgent值：

mozilla/5.0 (iphone; cpu iphone os 11_1_2 like mac os x) applewebkit/604.3.5 (khtml, like gecko) mobile/15b202 micromessenger/6.6.6 nettype/wifi language/zh_cn

示例

使用方式，直接使用這個api讀取值，而後根據事先觀察userAgent字符串的不一樣之處來判斷：

let url = navigator.userAgent.toLowerCase();
//使用toLowerCase將字符串所有轉爲小寫 方便咱們判斷使用
if (url.indexOf("15b202 qq") > -1) {
  //單獨判斷QQ內置瀏覽器 
  alert("QQ APP 內置瀏覽器，作你想作的操做");
}
if (url.indexOf("micromessenger") > -1) {
  //單獨判斷微信內置瀏覽器
  alert('微信內置瀏覽器，作你想作的操做');
}
if (url.indexOf("15b202") > -1) {
  //判斷微信內置瀏覽器，QQ內置瀏覽器
  alert("QQ和微信內置瀏覽器，作你想作的操做");
}
複製代碼

上面判斷了微信和QQ的內置瀏覽器，若是有更多不一樣的需求的話，能夠按照上面的方式，先獲取userAgent的字符串，而後再根據觀察，使用indexOf判斷是否含有指定的字符，來對不一樣瀏覽器進行不一樣的操做。

---

一部分正則判斷用戶輸入信息

爲了不用戶胡亂輸入就經過驗證，不少時候咱們都會採用正則表達式來驗證一下用戶輸入的信息是否符合規範。這部分的內容基本上是在網上收集來的，這裏跟你們一塊兒分享一下，有須要的能夠記在本身的有道雲裏面。

如何驗證？

驗證的方式固然是不少了，這裏推薦採用test()方法來驗證。

let isTrue=RegExpObject.test(string);// RegExpObject爲正則 string是要檢測的字符串
   // 若是字符串 string 中含有與 RegExpObject 匹配的文本，則返回 true，不然返回 false。
   if (isTrue){
       //驗證成功 do something
   }elseP{
       //驗證失敗
   }
複製代碼

身份證號碼正則表達式：

第一代身份證只有15位數，第二代身份證有18位數，各位按照需求來選擇表達式。

//第二代身份證號碼正則
let isTrue = /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
//第一代身份證正則表達式(15位)
let isTrue=/^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$/;
複製代碼

手機號碼正則表達式：

時間截止爲：2018年1月11日

移動號段：134 135 136 137 138 139 147 148 150 151 152 157 158 159 172 178 182 183 184 187 188 198

聯通號段：130 131 132 145 146 155 156 166 171 175 176 185 186

電信號段：133 149 153 173 174 177 180 181 189 199

虛擬運營商：170

let isTrue = /^(13[0-9]|14[5-9]|15[012356789]|166|17[0-8]|18[0-9]|19[8-9])[0-9]{8}$/;  
複製代碼

郵箱正則表達式：

let isTrue =/^([A-Za-z0-9_\-\.\u4e00-\u9fa5])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,8})$/;
複製代碼

用戶名正則:

////用戶名正則，4到16位（字母，數字，下劃線，減號）
let isTrue = /^[a-zA-Z0-9_-]{4,16}$/;
複製代碼

密碼正則:

密碼正則，以字母開頭，長度在6~18之間，只能包含字母、數字和下劃線

let isTrue =^[a-zA-Z]\w{5,17}$;
複製代碼

強密碼正則，最少6位，包括至少1個大寫字母，1個小寫字母，1個數字，1個特殊字符

let isTrue = /^.*(?=.{6,})(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*? ]).*$/;
複製代碼

QQ號碼正則:

let isTrue = /^[1-9][0-9]{4,10}$/;
複製代碼

微信號碼正則:

//微信號正則，6至20位，以字母開頭，字母，數字，減號，下劃線
let isTrue = /^[a-zA-Z]([-_a-zA-Z0-9]{5,19})+$/;
複製代碼

特殊字符檢測正則:

let isTrue= /["'<>%;)(&+]+-!！@#$~/;
複製代碼

域名正則:

let isTrue=[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(/.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+/.?;    
複製代碼

車牌號碼正則:

let isTrue = /^[京津滬渝冀豫雲遼黑湘皖魯新蘇浙贛鄂桂甘晉蒙陝吉閩貴粵青藏川寧瓊使領A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9掛學警港澳]{1}$/;
複製代碼

包含中文正則:

let isTrue = /[\u4E00-\u9FA5]/;
//這個能夠用於驗證用戶的真實姓名。
複製代碼

護照正則:

let isTrue=/^(P\d{7}|G\d{7,8}|TH\d{7,8}|S\d{7,8}|A\d{7,8}|L\d{7,8}|\d{9}|D\d+|1[4,5]\d{7})$/;
複製代碼

固定電話正則：

let isTrue=(\(\d{3,4}\)|\d{3,4}-|\s)?\d{8};
複製代碼

IP地址正則:

let isTrue=\d+\.\d+\.\d+\.\d+;
複製代碼

郵政編碼正則:

let isTrue=[1-9]{1}(\d+){5};
複製代碼

經緯度正則

//經度正則
 let isTrue=/^(\-|\+)?(((\d|[1-9]\d|1[0-7]\d|0{1,3})\.\d{0,6})|(\d|[1-9]\d|1[0-7]\d|0{1,3})|180\.0{0,6}|180)$/;
 //緯度正則
 let isTrue=/^(\-|\+)?([0-8]?\d{1}\.\d{0,6}|90\.0{0,6}|[0-8]?\d{1}|90)$/;
複製代碼

經常使用的正則表達式大概就是上面這些了，若是你們還有其餘乾貨的話，歡迎在評論區留言分享一下。

---

結語

以上就是本文的內容了，但願你們看完能夠有所收穫，喜歡的話，趕忙點波訂閱關注/喜歡，之後方便查找複製粘貼，233。

但願看完的朋友能夠點個喜歡/關注，您的支持是對我最大的鼓勵。

最後：如需轉載，請放上原文連接並署名。碼字不易，感謝支持！本人寫文章本着交流記錄的心態，寫的很差之處，不撕逼，可是歡迎指點。

我的blog and 掘金我的主頁

若是喜歡本文的話，能夠關注一下我剛開的訂閱號，共同窗習成長。

以上2018.5.5

參考資料：

HTML DOM userAgent 屬性

JavaScript test() 方法

2018最新手機號碼正則表達式

身份證號碼的正則表達式

JavaScript手機號碼格式驗證方法

郵箱/郵件地址的正則表達式及分析

前端表單驗證經常使用的15個JS正則表達式

前端開發中的 正則表達式 及經常使用正則表達式大全

密碼強度的正則表達式