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

OBKoro1發表於2018-05-07

前言

在我們做使用者授權登入(微信,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正規表示式

前端開發中的 正規表示式 及常用正規表示式大全

密碼強度的正規表示式

相關文章