如何判断用户浏览器以及一些前端经常使用的正则表单验证

前言

在咱们作用户受权登陆(微信,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正则表达式

前端开发中的 正则表达式 及经常使用正则表达式大全

密码强度的正则表达式