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

简介: 前言在我们做用户授权登录(微信,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月前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
177 2
|
4月前
|
存储 缓存 前端开发
前端谷歌浏览器面版属性
【8月更文挑战第19天】前端谷歌浏览器面版属性
51 0
|
1月前
|
前端开发 JavaScript API
前端开发的秘密花园:这些技巧让你轻松应对各种浏览器兼容性问题!
【10月更文挑战第31天】前端开发是一个充满创意与挑战的领域,追求极致用户体验的同时,浏览器兼容性问题却时常阻碍我们前进。本文将介绍几种解决浏览器兼容性的最佳实践:使用CSS前缀、Autoprefixer工具、现代JavaScript特性与Babel转译、Polyfill与Feature Detection、响应式设计以及跨域问题处理。掌握这些技巧,助你轻松应对各种兼容性难题,创建更稳定、用户友好的网页应用。
33 3
|
1月前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
111 1
|
1月前
|
缓存 前端开发 JavaScript
"面试通关秘籍:深度解析浏览器面试必考问题,从重绘回流到事件委托,让你一举拿下前端 Offer!"
【10月更文挑战第23天】在前端开发面试中,浏览器相关知识是必考内容。本文总结了四个常见问题:浏览器渲染机制、重绘与回流、性能优化及事件委托。通过具体示例和对比分析,帮助求职者更好地理解和准备面试。掌握这些知识点,有助于提升面试表现和实际工作能力。
66 1
|
2月前
|
前端开发 数据安全/隐私保护
前端技术实战:React Hooks 实现表单验证
【10月更文挑战第1天】前端技术实战:React Hooks 实现表单验证
|
2月前
|
机器学习/深度学习 自然语言处理 前端开发
前端大模型入门:Transformer.js 和 Xenova-引领浏览器端的机器学习变革
除了调用API接口使用Transformer技术,你是否想过在浏览器中运行大模型?Xenova团队推出的Transformer.js,基于JavaScript,让开发者能在浏览器中本地加载和执行预训练模型,无需依赖服务器。该库利用WebAssembly和WebGPU技术,大幅提升性能,尤其适合隐私保护、离线应用和低延迟交互场景。无论是NLP任务还是实时文本生成,Transformer.js都提供了强大支持,成为构建浏览器AI应用的核心工具。
596 1
|
2月前
|
NoSQL 前端开发 MongoDB
前端的全栈之路Meteor篇(三):运行在浏览器端的NoSQL数据库副本-MiniMongo介绍及其前后端数据实时同步示例
MiniMongo 是 Meteor 框架中的客户端数据库组件,模拟了 MongoDB 的核心功能,允许前端开发者使用类似 MongoDB 的 API 进行数据操作。通过 Meteor 的数据同步机制,MiniMongo 与服务器端的 MongoDB 实现实时数据同步,确保数据一致性,支持发布/订阅模型和响应式数据源,适用于实时聊天、项目管理和协作工具等应用场景。
|
4月前
|
机器学习/深度学习 存储 前端开发
实战揭秘:如何借助TensorFlow.js的强大力量,轻松将高效能的机器学习模型无缝集成到Web浏览器中,从而打造智能化的前端应用并优化用户体验
【8月更文挑战第31天】将机器学习模型集成到Web应用中,可让用户在浏览器内体验智能化功能。TensorFlow.js作为在客户端浏览器中运行的库,提供了强大支持。本文通过问答形式详细介绍如何使用TensorFlow.js将机器学习模型带入Web浏览器,并通过具体示例代码展示最佳实践。首先,需在HTML文件中引入TensorFlow.js库;接着,可通过加载预训练模型如MobileNet实现图像分类;然后,编写代码处理图像识别并显示结果;此外,还介绍了如何训练自定义模型及优化模型性能的方法,包括模型量化、剪枝和压缩等。
61 1
|
4月前
|
Java 开发者 关系型数据库
JSF与AWS的神秘之旅:如何在云端部署JSF应用,让你的Web应用如虎添翼?
【8月更文挑战第31天】在云计算蓬勃发展的今天,AWS已成为企业级应用的首选平台。本文探讨了在AWS上部署JSF(JavaServer Faces)应用的方法,这是一种广泛使用的Java Web框架。通过了解并利用AWS的基础设施与服务,如EC2、RDS 和 S3,开发者能够高效地部署和管理JSF应用。文章还提供了具体的部署步骤示例,并讨论了使用AWS可能遇到的挑战及应对策略,帮助开发者更好地利用AWS的强大功能,提升Web应用开发效率。
73 0