前言
在我们做用户授权登录 (微信, qq 授权), 以及根据对应浏览器做对应的操作的时候, 经常会遇到需要判断用户使用的浏览器的需求, 以及在需要用户输入信息的时候, 有需要验证的一些正则. 如果喜欢的话可以点波赞 / 关注, 支持一下, 希望大家看完本文可以有所收获.
判断用户浏览器
navigator.userAgent
判断用户所使用的浏览器主要用到的 api 是 navigator.userAgent http://www.w3school.com.cn/htmldom/prop_nav_useragent.asp , 这是一个只读的字符串, 声明了浏览器用于 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() http://www.w3school.com.cn/js/jsref_test_regexp.asp 方法来验证.
- 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.
希望看完的朋友可以点个喜欢 / 关注, 您的支持是对我最大的鼓励.
来源: https://juejin.im/post/5aed6da16fb9a07aac2457f6