21_js正则_表单验证

目录

正则

一、 正则的概念

二、创建正则方式

2.1 构造函数去创建正则

2.2 字面量去创建正则

2,3 test方法

三、正则修饰符

四、 正则的方法

lastIndex

test方法

exec

五、字符串方法

replace

match

search

split

六、正则表达式的构成

元字符-- 定位符

元字符 -- 限定符

元字符 - 字符匹配符

元字符--转义符\

元字符：选择匹配符

应用

常用正则前端助手

正则

一、 正则的概念

正则表达式就是一个描述字符规则的对象，可以用于检查一个字符串是否符合条件

常见的场景:用户名验证，手机号验证，身份证号验证

正则，会记一些符号，验证表单的时候会用到正则。说白了就是用于表单验证的。

推荐一个谷歌插件：极简插件前端助手

crx文件改后缀名zip解压，然后托到插件处

二、创建正则方式

有很多插件生成，前端助手就可以快速生成正则表达式。

讲一下语法，不然看不懂什么意思

2.1 构造函数去创建正则

let reg = new RegExp("hello","i"); //用new RegExp是你的正则表达式
console.log(reg.test("aaaHEllo"));//通过test方法验证(返回结果真假)
验证你的字符串aaaHEllo里边是否有hello（如果没有第二个参数i则区分大小写）  i不区分大小写

2.2 字面量去创建正则

let reg1 = /hello/i;//正则表达式
console.log(reg1.test("HELLo123abc"));//验证 //测试符不符合用的方法永远是test
验证你的字符串里边是否有hello  i不区分大小写

2,3 test方法

reg1.test("HELLo123abc")
reg1 定义的正则表达式
test用于验证 字符串是否符合 正则表达式

三、正则修饰符

i g

i 不区分大小写

g 修饰符 验证时 从上一次结束的位置开始向后匹配

let reg1 = /hello/i
//console.log(reg1.test("HELLo123abc"));
// i 不区分大小写
// g 修饰符 验证时 从上一次结束的位置开始向后匹配
let reg2 = /hello/g
let reg2 = /hello/gi
console.log(reg2.test("hello HELLO world")); //真
console.log(reg2.test("hello HELLO world")); //真
console.log(reg2.test("hello HELLO world")); //假(匹配到第三个)，结尾了又从头匹配

四、 正则的方法

lastIndex

// lastIndex   获取开始搜索的位置
// 如果不加g 每一次都是从0的位置开始检索
// let reg = /hello/i;
// console.log(reg.lastIndex); //0
// console.log(reg.test("hello world")); //true
// console.log(reg.lastIndex); //0
// console.log(reg.test("hello world")); //true
// console.log(reg.lastIndex); //0let reg = /hello/ig;
console.log(reg.lastIndex); //0
console.log(reg.test("hello world")); //true
console.log(reg.lastIndex); //5
console.log(reg.test("hello world")); //false
console.log(reg.lastIndex); //0

test方法

reg1.test("HELLo123abc")
reg1 定义的正则表达式
test用于验证 字符串是否符合 正则表达式

exec

用于提取字符串中符合正则的内容 和 test方法很想

exec 如果匹配到返回数组 否则 null

let reg = /hello/ig;
console.log(reg.exec("hello heLLO world"));
console.log(reg.exec("hello heLLO world"));

五、字符串方法

replace

var str = "hello hello world";
// str = str.replaceAll("hello","**"); //之前字符串的方法
// console.log(str);let reg = /hello/g;
str = str.replace(reg,"**")  //正则实现的 
console.log(str);

match

从字符串中提取匹配的所有内容‘

var str = "hello hello world";
let reg = /hello/ig;
console.log(str.match(reg));

检索与正则所匹配的值，返回第一个和正则表达式匹配的起始位置，如果没匹配到就返回-1

console.log("hello HELLO world".search(/hello/ig));//0
console.log("hello HELLO world".search(/123/ig));//-1

split

console.log("hello aa hello bb".split("hello"));
console.log("hello aa hello bb".split(/hello/i));

六、正则表达式的构成

字面量字符: 大部分字符在正则中都是字面的含义，比如/hello/ /a/ /b/ 都叫字面量字符

元字符：除了字面量字符之外 有一些特殊含义的 就叫元字符 比如^ ? +

元字符-- 定位符

定位符可以将一个正则表达式固定在一行的开始或者结束

^ 代表必须以XXX开头

$ 代表必须以XXX结尾

console.log(/hello/.test("hello123")); //true
console.log(/hello/.test("ahello123")); //true
console.log(/^hello/.test("h123ello123")); //false  必须以hello开头
console.log(/test$/.test("abc test"));//true
console.log(/abc$/.test("hhh bbb ccc abc"));

元字符 -- 限定符

限定字符串在正则表达式中出现多少次才能满足匹配

* 匹配表达式的0次或多次

+ 匹配表达式的1次或多次

？ 匹配表达式的0次或1次

{n} 确定匹配n次

{n,} 至少匹配n次

{n,m} 至少匹配n次 最多匹配m次

 // console.log(/^he*l$/.test("hl"));//true  匹配*前边的字母出现的次数// console.log(/^he*l$/.test("hel"));//true  匹配*前边的字母出现的次数// console.log(/^he*l$/.test("heel"));//true  匹配*前边的字母出现的次数// console.log(/^he*l$/.test("heeel"));//true  匹配*前边的字母出现的次数// console.log(/^he+l$/.test("hl"));//false  匹配+前边的字母出现的次数// console.log(/^he+l$/.test("hel"));//true  匹配+前边的字母出现的次数// console.log(/^he+l$/.test("heel"));//true  匹配+前边的字母出现的次数// console.log(/^he+l$/.test("heeel"));//true  匹配+前边的字母出现的次数// console.log(/^he?l$/.test("hl"));//true  匹配?前边的字母出现的次数// console.log(/^he?l$/.test("hel"));//true  匹配?前边的字母出现的次数// console.log(/^he?l$/.test("heel"));//false  匹配?前边的字母出现的次数// console.log(/^he?l$/.test("heeel"));//false  匹配?前边的字母出现的次数//{n}  确定匹配n次// {n,}  至少匹配n次// {n,m} 至少匹配n次  最多匹配m次console.log(/^he{1}l$/.test("hl"));//falseconsole.log(/^he{1}l$/.test("hel"));//trueconsole.log(/^he{1}l$/.test("heel"));//falseconsole.log(/^he{1}l$/.test("heeel"));//falseconsole.log(/^he{1,}l$/.test("hl"));//falseconsole.log(/^he{1,}l$/.test("hel"));//trueconsole.log(/^he{1,}l$/.test("heeeeeel"));//trueconsole.log(/^he{1,3}l$/.test("hl"));//falseconsole.log(/^he{1,3}l$/.test("hel"));//trueconsole.log(/^he{1,3}l$/.test("heel"));//trueconsole.log(/^he{1,3}l$/.test("heeel"));//trueconsole.log(/^he{1,3}l$/.test("heeeel"));//false

元字符 - 字符匹配符

// 开头必须是a-f之间的某个字符
console.log(/^[abcd]/.test("ppabc"));false
console.log(/^[abcd]/.test("appabc"));true
console.log(/^[abcd]/.test("hhhppabc"));false
// 匹配a-z里边的所有字符
console.log(/^[a-z]/.test("j123234"));
console.log(/^[a-z]/.test("123234"));
console.log(/^[a-z,A-Z]/.test("A123234"));
console.log(/^[a-z,A-Z,0-9]/.test("123234"));// 开头必须是987
console.log(/^[987]/.test("j123234"));// 匹配不包含数字的
console.log(/^[^0-9]/.test("1234"));
console.log(/^[^0-9]/.test("a234"));
console.log(/^[^0-9]/.test("顶顶顶顶234"));\d  匹配0-9之间的数字 相当于[0-9]
\D  匹配除了0-9之间的数字 相当于[^0-9]
\w  匹配任意字母、数字、下划线 相当于[a-zA-Z0-9_]
\W  匹配除了任意字母、数字、下划线 相当于[^a-zA-Z0-9_]
\s  匹配空格（包含换行、tab、空格）
\S  匹配非空格
.   匹配除了\n 之外的任何单个字符// \d  匹配0-9之间的数字 相当于[0-9]
console.log(/^\d/.test("a123"));
// \D  匹配除了0-9之间的数字 相当于[^0-9]
console.log(/^\D/.test("哈哈123"));
// \w  匹配任意字母、数字、下划线 相当于[a-zA-Z0-9_]
console.log(/^\w/.test("_哈123"));
// \W  匹配除了任意字母、数字、下划线 相当于[^a-zA-Z0-9_]
console.log(/^\W/.test("%哈123"));
// \s  匹配空格（包含换行、tab、空格）
console.log(/^\s/.test(`
_哈123`));
// \S  匹配非空格
console.log(/^\S/.test(`_哈123`));
// .   匹配除了 \n(换行) 之外的任何单个字符
console.log(/^./.test(`
999`));
console.log(/^./.test(`\n999`));

元字符--转义符\

转义转化它本来的含义

匹配某些特殊含义的字符，，比如有+ 号？号 . 点这些都有自己含义 如果我想匹配这些内容 就必须转义\

转义了就是失去本身的功能，仅仅是个字符而已。本来\n是换行  转义后 n就是n

                                                                               本来是n，转义后就是\n换行

console.log(/.com$/.test("a.com"));//true
console.log(/\.com$/.test("acom"));//falseconsole.log(/\*com$/.test("*com"));//true

元字符：选择匹配符

可以匹配多个规则，| 类似或者的意思 如果cat|dog 表示匹配cat或者dog

console.log(/dog|cat/.test("dog")); 
console.log(/dog|cat/.test("cat")); 
console.log(/^11|22/.test("22cat"));

应用

1：掌握正则创建方式

2：尽量记一下语法

3：学这些语法可以能看懂人家写的正则，也可以自己写

// 去除字符串的首尾空格
var str = "    abfjsdhfjsdf   ";
var str1 = "abfjsdhfjsdf";
let reg = / /g;
console.log(str.replace(reg,""));
console.log(str1);// 匹配QQ邮箱
// 2324234@qq.com 
console.log(/^\d{5,}@qq\.com$/.test("1321@qq.com"));
// 匹配手机号
console.log(/^1[3-9]\d{9}$/.test("13789724567"));

常用正则前端助手

百度就行

点击一下图标

怎么用？

<script>var reg=/^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/;//reg.test("04556");console.log(reg.test("04556"));</script>//右键打开网页 控制台
<body><form action="#">用户名：* <input type="text">  <span></span>  <br><br>密码：* <input type="text">  <span></span> <br><br>确认密码：*<input type="text"> <span></span>  <br><br>昵称：<input type="text"> <span></span> <br><br>头像：<input type="file"> <span></span>  <br><br>电子邮箱：<input type="email"> <span></span> <br> <br><button>提交</button></form><script>let ipts = document.querySelectorAll("input");let btn = document.querySelector("button");// 1-记录一下输入框的值是否需要验证let isUsername = false;  //小写字母和数字组合 2-16位let isPassword = false; // 只要不是空白都行 let isRePassword = false;let isNickname = true;let isAvatar = true;let isEmail = false;ipts[0].onchange=function(){let reg = /[a-z][0-9]+|[0-9][a-z]+/;// this 在事件处理函数里 this指向的是当前元素if(reg.test(this.value)){isUsername = true;this.nextElementSibling.innerHTML = "格式正确";this.nextElementSibling.style.color="green"}else{this.nextElementSibling.innerHTML = "格式不正确";this.nextElementSibling.style.color="red";isUsername = false;}}ipts[1].onchange=function(){let reg = /^\S{6,16}$/if(reg.test(this.value)){isPassword = true;this.nextElementSibling.style.color="green";let level = getpwdlevel(this.value);if(level==1){this.nextElementSibling.innerHTML = "格式正确-弱";}else if(level==2){this.nextElementSibling.innerHTML = "格式正确-中";}else{this.nextElementSibling.innerHTML = "格式正确-强";}}else{this.nextElementSibling.innerHTML = "格式不正确";this.nextElementSibling.style.color="red";isPassword = false;}}ipts[2].onchange=function(){if(this.value == ipts[1].value){isRePassword = true;this.nextElementSibling.innerHTML = "密码一致";this.nextElementSibling.style.color="green";}else{isRePassword = false;this.nextElementSibling.innerHTML = "两次的密码不一致";this.nextElementSibling.style.color="red";}}   ipts[3].onchange =function(){let reg = /^\S{1,10}$/if(reg.test(this.value)){isNickname = true;this.nextElementSibling.innerHTML = "格式正确";this.nextElementSibling.style.color="green"}else{isNickname = falsethis.nextElementSibling.innerHTML = "格式不正确";this.nextElementSibling.style.color="red"}}ipts[4].onchange =function(){// .png  let reg = /\.png$/if(reg.test(this.value)){isAvatar = truethis.nextElementSibling.innerHTML = "格式正确";this.nextElementSibling.style.color="green"}else{isAvatar = falsethis.nextElementSibling.innerHTML = "格式不正确";this.nextElementSibling.style.color="red"}}ipts[5].onchange=function(){let reg = /\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/;if(reg.test(this.value)){isEmail = truethis.nextElementSibling.innerHTML = "格式正确";this.nextElementSibling.style.color="green"}else{isEmail = falsethis.nextElementSibling.innerHTML = "格式不正确";this.nextElementSibling.style.color="red"}}btn.onclick=function(){if(isAvatar&&isEmail&&isNickname&&isPassword&&isRePassword&&isUsername){alert("注册成功")}else{alert("请在次检查")}}// 封装一个密码强弱的函数function getpwdlevel(pwd){// 只有数字、字母、特殊字符里其中一项  就是  弱// 有其中两项就是  中// 有其中三项      强let n =0;if(/\d/.test(pwd)){n++}if(/[a-zA-Z]/.test(pwd)){n++}if(/[^0-9a-zA-Z]/.test(pwd)){n++}return n;}</script>
</body>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/pingmian/73861.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

矿山自动化监测解决方案

矿山自动化监测解决方案

1.行业现状 为贯彻落实《中共中央国务院关于推进安全生产领域改革发展的意见》《“十四五”矿山安全生产规划》&#xff08;应急〔2022〕64号&#xff09;、《国务院安委会办公室关于加强矿山安全生产工作的紧急通知》&#xff08;安委办〔2021〕3号&#xff09;等有关工作部署…
阅读更多...
企业级知识库建设：自建与开源产品集成的全景解析 —— 产品经理、CTO 与 CDO 的深度对话

企业级知识库建设：自建与开源产品集成的全景解析 —— 产品经理、CTO 与 CDO 的深度对话

文章目录 一、引言二、主流产品与方案对比表三、自建方案 vs. 开源产品集成&#xff1a;技术路径对比3.1 自建方案3.2 开源产品集成方案 四、结论与个人观点 一、引言 在当今数据驱动的商业环境中&#xff0c;构建高质量的知识库已成为企业数字化转型的关键一环。本博客分别从…
阅读更多...
【蓝桥杯】单片机设计与开发，温度传感器DS18B20

【蓝桥杯】单片机设计与开发，温度传感器DS18B20

一、温度传感器概述 结构图 二、通信过程 三、onewire单总线协议概述 四、单总线的工作原理 黑粗线是单片机发送的&#xff0c;浅的是s18b20回应的 五、温度传感器的应用 六、onewire 七、课后习题
阅读更多...
Python 在Word中查找并替换文本

Python 在Word中查找并替换文本

在操作Word文档时&#xff0c;如果想要修正一处反复出现的拼写错误&#xff0c;统一文中前后不一致的术语&#xff0c;或者将文档中所有的旧联系方式更新为新号码。这时我们可以使用 Word中的查找替换功能&#xff0c;快速定位并批量处理文档中的特定文本&#xff0c;提升编辑效…
阅读更多...
Python 笔记 (二)

Python 笔记 (二)

Python Note 2 1. Python 慢的原因2. 三个元素3. 标准数据类型4. 字符串5. 比较大小: 富比较方法 rich comparison6. 数据容器 (支持*混装* )一、允许重复类 (list、tuple、str)二、不允许重复类 (set、dict)1、集合(set)2、字典(dict)3、特殊: 双端队列 deque 三、数据容器的共…
阅读更多...
kill子进程后再wait可以吗？

kill子进程后再wait可以吗？

在父进程中先使用 kill 函数终止子进程&#xff0c;之后再使用 wait 函数是可行的&#xff0c;下面从原理、使用示例、注意事项几个方面详细说明。 原理 kill 函数&#xff1a;其作用是向指定进程发送信号。当向子进程发送 SIGTERM&#xff08;通常用于请求进程正常终止&…
阅读更多...
ai-api-union项目，适配各AI厂商api

ai-api-union项目，适配各AI厂商api

项目地址&#xff1a;alpbeta/ai-api-union 需求&#xff1a;实现兼容各大模型厂商api的流式对话和同步对话接口&#xff0c;本项目现兼容智谱、豆包、通义、通义版deepseek 设计 一个ChatController类对外暴露这两个接口&#xff0c;入参都为ChatRequest请求类&#xff0c;…
阅读更多...
【QT】QT样式设计

【QT】QT样式设计

QT样式设计 一、QT工程中添加资源文件1.资源文件&#xff1a;2. 添加步骤&#xff1a;3. 新增资源文件以及删除现有的资源文件4. 使用资源文件 二、QT中的qss语句(样式设计语句)1. 样式设计2.常见的qss语句示例代码&#xff1a; 一、QT工程中添加资源文件 1.资源文件&#xff…
阅读更多...
Megatron-LM中的deepseek-v3实现

Megatron-LM中的deepseek-v3实现

Megatron-LM&#xff1a;https://github.com/NVIDIA/Megatron-LM/tree/main 使用此仓库构建的著名的库也有很多&#xff0c;如: Colossal-AI, HuggingFace Accelerate, and NVIDIA NeMo Framework.Pai-Megatron-Patch工具是阿里人工智能平台PAI算法团队研发,ai-Megatron-Patch…
阅读更多...
[mlr3] Bootstrap与交叉验证k-fold cross validation

[mlr3] Bootstrap与交叉验证k-fold cross validation

五折交叉验证因其无放回分层抽样和重复验证机制&#xff0c;成为超参数调优的首选&#xff1b; 而Bootstrap因有放回抽样的重复性和验证集的不稳定性&#xff0c;主要服务于参数估计&#xff08;置信区间的计算&#xff09;而非调优。 实际应用中&#xff0c;可结合两者优势&am…
阅读更多...
某大麦手机端-抢票

某大麦手机端-抢票

引言 仅供学习研究&#xff0c;欢迎交流 抢票难&#xff0c;难于上青天&#xff01;无论是演唱会、话剧还是体育赛事&#xff0c;大麦网的票总是秒光。作为一名技术爱好者&#xff0c;你是否想过用技术手段提高抢票成功率&#xff1f;本文将为你揭秘大麦手机端抢票的核心技术…
阅读更多...
最常使用的现代C++新特性介绍

最常使用的现代C++新特性介绍

现代 C泛指的是从 C11 之后的 C标准. 从 C11 开始, C标准委员会实行班车制, 没三年发布一个新版本, 如果一个功能在新版本发布之前已经准备好, 则可以加入该版本中, 否则延后到下一个版本. 语言核心 自 C11 开始, 语言语法层面加了许多语法糖, 还有增加了一些新语法.使得 C语…
阅读更多...
SQL Server：当在删除数据库时因为存在触发器而无法删除

SQL Server：当在删除数据库时因为存在触发器而无法删除

当在删除数据库时因为存在触发器而无法删除&#xff0c;你可以通过禁用触发器来解决这个问题。下面为你介绍在 SQL Server 里禁用和启用触发器的方法。 禁用数据库中所有表的触发器 你可以使用系统视图 sys.triggers 来查询数据库里所有的触发器&#xff0c;然后生成禁用这些…
阅读更多...
【Linux篇】进程入门指南：操作系统中的第一步

【Linux篇】进程入门指南：操作系统中的第一步

步入进程世界&#xff1a;初学者必懂的操作系统概念 一. 冯诺依曼体系结构1.1 背景与历史1.2 组成部分1.3 意义 二. 进程2.1 进程概念2.1.1 PCB&#xff08;进程控制块&#xff09; 2.2 查看进程2.2.1 使用系统文件查看2.2.2 使⽤top和ps这些⽤⼾级⼯具来获取2.2.3 通过系统调用…
阅读更多...
销售易vs纷享销客：制造行业CRM选型深度解析

销售易vs纷享销客：制造行业CRM选型深度解析

“以客户为中心”&#xff0c;顾名思义就是指让客户贯穿企业市场、研发、生产、销售、服务全流程&#xff0c;以客户需求为导向进行经营。CRM作为企业数字化建设基础设施&#xff0c;在企业高质量发展进程中扮演着重要角色。在众多CRM解决方案中&#xff0c;腾讯旗下CRM销售易凭…
阅读更多...
【JavaScript】九、JS基础练习

【JavaScript】九、JS基础练习

文章目录 1、练习&#xff1a;对象数组的遍历2、练习&#xff1a;猜数字3、练习&#xff1a;生成随机颜色 1、练习&#xff1a;对象数组的遍历 需求&#xff1a;定义多个对象&#xff0c;存数组&#xff0c;遍历数据渲染生成表格 let students [{ name: 小明, age: 18, gend…
阅读更多...
代码随想录day31 贪心part05

代码随想录day31 贪心part05

56.合并区间 以数组 intervals 表示若干个区间的集合&#xff0c;其中单个区间为 intervals[i] [starti, endi] 。请你合并所有重叠的区间&#xff0c;并返回 一个不重叠的区间数组&#xff0c;该数组需恰好覆盖输入中的所有区间 。 示例 1&#xff1a; 输入&#xff1a;in…
阅读更多...
《C++11：通过thread类编写C++多线程程序》

《C++11：通过thread类编写C++多线程程序》

关于多线程的概念与理解&#xff0c;可以先了解Linux下的底层线程。当对底层线程有了一定程度理解以后&#xff0c;再学习语言级别的多线程编程就轻而易举了。 【Linux】多线程 -&#xff1e; 从线程概念到线程控制 【Linux】多线程 -&#xff1e; 线程互斥与死锁 语言级别的…
阅读更多...
c++位运算总结

c++位运算总结

在C中&#xff0c;位运算是对二进制位进行操作的运算&#xff0c;主要有以下几种&#xff1a; 1. 按位与&#xff08; & &#xff09;&#xff1a;两个操作数对应位都为1时&#xff0c;结果位才为1&#xff0c;否则为0。例如 3 & 5 &#xff0c; 3 二进制是 0000 0011…
阅读更多...
1.1 计算机网络的概念

1.1 计算机网络的概念

首先来看什么是计算机网络&#xff0c;关于计算机网络的定义并没有一个统一的标准&#xff0c;不同的教材有 不同的说法&#xff08;这是王道书对于计算机网络的定义&#xff09;&#xff0c;我们可以结合自己的生活经验去体会这个 定义。 可以用不同类型的设备去连接计算机网络…
阅读更多...
最新文章

Copyright @ 2022~2023