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

search

检索与正则所匹配的值，返回第一个和正则表达式匹配的起始位置，如果没匹配到就返回-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>