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

前言

在我们做用户授权登录(微信,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)$/;

常用的正则表达式大概就是上面这些了，如果大家还有其他干货的话，欢迎在评论区留言分享一下。