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

简介: 前言在我们做用户授权登录(微信,qq授权),以及根据对应浏览器做对应的操作的时候,经常会遇到需要判断用户使用的浏览器的需求,以及在需要用户输入信息的时候,有需要验证的一些正则。如果喜欢的话可以点波赞/关注,支持一下,希望大家看完本文可以有所收获。个人博客了解一下:obkoro1.com判断用户浏览器navigator.userAgent判断用户所使用的浏览器主要用到的api是navigator.userAgent,这是一个只读的字符串,声明了浏览器用于 HTTP 请求的用户代理头的值,不同浏览器的userAgent值都不相同,所以我们可以根据这个字符串来判断用户是从哪个浏览器进

image.png

前言

在我们做用户授权登录(微信,qq授权),以及根据对应浏览器做对应的操作的时候,经常会遇到需要判断用户使用的浏览器的需求,以及在需要用户输入信息的时候,有需要验证的一些正则。如果喜欢的话可以点波赞/关注,支持一下,希望大家看完本文可以有所收获。


判断用户浏览器

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)$/;



目录
相关文章
|
2月前
|
前端开发
调试前端时,在浏览器上修改参数并重新调用接口
有时候我们的页面点击过了,但是接口出问题,想修改参数再调用一次,一般是用apiPost工具把接口复制,再加上token和参数,但是这样非常的效率比较低。
164 0
|
25天前
|
前端开发 安全 UED
【项目实战】从终端到浏览器:实现 ANSI 字体在前端页面的彩色展示
在学习和工作中,我们经常需要使用日志来记录程序的运行状态和调试信息。而为了更好地区分不同的日志等级,我们可以使用不同的颜色来呈现,使其更加醒目和易于阅读。 在下图运行结果中,我们使用了 colorlog 库来实现彩色日志输出。通过定义不同日志等级对应的颜色,我们可以在控制台中以彩色的方式显示日志信息。例如,DEBUG 级别的日志使用白色,INFO 级别的日志使用绿色,WARNING 级别的日志使用黄色,ERROR 级别的日志使用红色,CRITICAL 级别的日志使用蓝色。
|
13天前
|
缓存 JavaScript 前端开发
前端 JS 经典:浏览器中 ESModule 的工作原理
前端 JS 经典:浏览器中 ESModule 的工作原理
11 0
|
2月前
|
Web App开发 前端开发 JavaScript
构建跨浏览器兼容的前端应用:技术实践与挑战
【5月更文挑战第16天】构建跨浏览器兼容的前端应用是应对浏览器差异和多样性的挑战。使用现代框架(如React、Vue)能自动转换代码,编写可移植的Web标准代码,结合浏览器兼容性测试工具和Polyfill解决旧浏览器支持问题。关注浏览器更新,应对性能、API差异和样式问题,采用渐进增强、条件判断和CSS Reset策略确保应用在各种浏览器上运行良好。
|
2月前
|
监控 前端开发 JavaScript
如何使用浏览器调试前端代码?
【4月更文挑战第11天】前端开发中,浏览器调试是关键技能,能提升代码质量。本文介绍了如何使用浏览器的调试工具:1) 打开调试窗口(F12或右键检查);2) Elements标签页检查DOM结构和样式;3) Console调试JavaScript,查看日志和错误信息;4) Sources设置断点调试JS文件;5) 利用Network、Performance和Memory等标签页优化性能。熟悉调试工具、利用日志和错误信息能有效定位问题,提高开发效率。
185 7
|
2月前
|
前端开发 JavaScript 程序员
推荐给前端程序员的5款浏览器插件
推荐给前端程序员的5款浏览器插件
|
2月前
|
SQL 存储 JavaScript
前端浏览器调试详解版
前端浏览器调试详解版
83 0
|
2月前
|
消息中间件 JavaScript 前端开发
前端秘法进阶篇----这还是我们熟悉的浏览器吗?(浏览器的渲染原理)
前端秘法进阶篇----这还是我们熟悉的浏览器吗?(浏览器的渲染原理)
|
2月前
|
缓存 前端开发 JavaScript
在浏览器的舞台上演:前端如何挑战页面刷新的极限
在浏览器的舞台上演:前端如何挑战页面刷新的极限
78 0
|
2月前
|
JavaScript 前端开发 API
探索前端BOM API:解锁浏览器的潜力
探索前端BOM API:解锁浏览器的潜力
71 0