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

JiaXinYi 发布于2019-08-22 17:01 / 1796人阅读

摘要：前言在我们做用户授权登录微信授权，以及根据对应浏览器做对应的操作的时候，经常会遇到需要判断用户使用的浏览器的需求，以及在需要用户输入信息的时候，有需要验证的一些正则。

前言

在我们做用户授权登录(微信,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}((0d)|(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=/^(Pd{7}|Gd{7,8}|THd{7,8}|Sd{7,8}|Ad{7,8}|Ld{7,8}|d{9}|Dd+|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正则表达式

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

密码强度的正则表达式

混合云私有云 linux的一些常用命令 js常用表单验证 js判断用户浏览器 js浏览器表单验证

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94780.html

正则表达式

摘要：最全正则表达式总结验证号手机号中文邮编身份证地址等是正则表达式的缩写，作用是对字符串执行模式匹配。学习目标了解正则表达式语法在中使用正则表达式在中使 JS高级技巧本篇是看的《JS高级程序设计》第23章《高级技巧》做的读书分享。本篇按照书里的思路根据自己的理解和经验，进行扩展延伸，同时指出书里的一些问题。将会讨论安全的类型检测、惰性载入函数、冻结对象、定时器等话题。1. 安全的类型检测...

yibinnn 2019-08-21 17:57 评论0 收藏0
正则系列——JavaScript正则表达式入门心得

摘要：对前端来说，使用的场景不多，但是像微信端的对话系统的表情包，就使用到了一个特定的规则。我是一个前端，工作年了，现在失业，想进入腾讯工作，这是我的联系方式这个正则虽我发现有个别字符被这个编辑器给刷掉了，但是灰色区域显示正常，以灰色区域代码为准什么玩意？在我刚开始学习编程的时候，就听过正则了，也听说正则很牛逼，懂正则的更牛逼。但是苦于没有人指点，也没有使用正则的场景，自己看教程又懵逼...

DevWiki 2019-08-22 11:07 评论0 收藏0
正则系列——JavaScript正则表达式入门心得

摘要：对前端来说，使用的场景不多，但是像微信端的对话系统的表情包，就使用到了一个特定的规则。我是一个前端，工作年了，现在失业，想进入腾讯工作，这是我的联系方式这个正则虽我发现有个别字符被这个编辑器给刷掉了，但是灰色区域显示正常，以灰色区域代码为准什么玩意？在我刚开始学习编程的时候，就听过正则了，也听说正则很牛逼，懂正则的更牛逼。但是苦于没有人指点，也没有使用正则的场景，自己看教程又懵逼...

genefy 2019-08-05 12:04 评论0 收藏0
前端技术博客文章、书籍积累

摘要：好多编辑器例如等都支持这样的语法来快速的编写代码如何优雅地使用把标签放在结束标签之后结束标签之前的差别什么是响应式设计怎样进行书籍《JavaScriptDOM编程艺术》《JavaScript高级程序设计》《JavaScript框架设计》《JavaScript专家编程》《JavaScript Ninjia》《JavaScript语言精粹（修订版）》《JavaScript设计模式》《J...

LiangJ 2019-08-30 12:58 评论0 收藏0
前端技术博客文章、书籍积累

摘要：好多编辑器例如等都支持这样的语法来快速的编写代码如何优雅地使用把标签放在结束标签之后结束标签之前的差别什么是响应式设计怎样进行书籍《JavaScriptDOM编程艺术》《JavaScript高级程序设计》《JavaScript框架设计》《JavaScript专家编程》《JavaScript Ninjia》《JavaScript语言精粹（修订版）》《JavaScript设计模式》《J...

codercao 2019-08-19 18:10 评论0 收藏0