Js第九章-CSDN博客

本文链接：https://blog.csdn.net/2301_79613063/article/details/134771575

一.预热
项目开发中，经常需要对表单中输入内容的格式进行限制。
例如，用户名、密码、手机号、身份证号的格式验证，
这些内容遵循的规则繁多而又复杂，如果要成功匹配，可能要编写上百行代码，
这种做法显然不可取，但是需要掌握，可以锻炼自身代码功底，和动脑动手能力。

此时，就需要使用正则表达式，利用较简短的描述语法完成诸如查找、匹配、替换等功能。
本章将围绕如何在JavaScript中使用正则表达式进行详细讲解。

掌握程度：掌握基本的写法，以及能够看得懂相关代码即可。

二.表单校验
<body>
用户名：<input type="text" id="username" />
<span id="tip"></span> 
<br>
<button id="btn" disabled="disabled">提交信息</button>

<script>
/*
要求对输入的账号进行数据校验：
1.长度为10-20之间
2.必须以yyzy开头
3.必须以2023结尾
4.中间必须存在abcd字符串。
5.必须是复杂账号（大写字母，小写字母，数字，特殊符号必须至少含有3项）

需求如下：输入数据完成之后失去焦点进行校验，如果校验通过则按钮恢复正常，反之给出相关的提示。
*/

var input_username = document.getElementById("username");
var span_text = document.getElementById("tip");
var btn = document.getElementById("btn");

input_username.onblur = function(){
//第一步:获取文本值
var username = input_username.value;

if (username.length<10 || username.length>20) {
span_text.innerText = "长度出现了问题";
return ;//不是作为返回值仅仅是作为跳出方法,节省时间后续代码都不需要执行
}

if (!username.startsWith("yyzy")) {
span_text.innerText = "不是以yyzy开头";
return ;
}

if (!username.endsWith("2023")) {
span_text.innerText = "不是以2023结尾";
return ;
}

if (username.indexOf("abcd")==-1) {
span_text.innerText = "用户名没有包含abcd";
return ;
}

let a1 = false;//表示是否包含大写字母
let a2 = false;//表示是否包含小写字母
let a3 = false;//表示是否包含数字
let a4 = false;//表示是否包含特殊符号

for(let i = 0 ;i<username.length;i++){
if( username.charAt(i)>='A' && username.charAt(i)<='Z' ){
a1 = true;
}else if( username.charAt(i)>='a' && username.charAt(i)<='z' ){
a2 = true;
}else if( username.charAt(i)>='0' && username.charAt(i)<='9' ){
a3 = true;
}else{
a4 = true;
}
}

if(a1+a2+a3+a4<3){
span_text.innerText = "复杂度不够";
return ;
}


span_text.innerText = "√";

btn.removeAttribute("disabled");

}

input_username.onfocus = function(){
span_text.innerText = "";

btn.setAttribute("disabled","disabled");

}
</script>
</body>

三.正则表达式简略
<script>
// 正则表达式（Regular Expression）是一种描述字符串规律的表达式，
// 可以迅速地用极简单的方式达到字符串的校验控制。

//符合一个正确的规则的表达式

// 正则表达式的应用：常用于数据校验，过滤敏感词等等

//如何创建正则表达式:
//方法1 直接声明注意任何情况下不要加引号
// var reg1 = /aa/bb ; //reg不仅有注册的意思还有正则表达式的意思

//方法2:通过new声明该放引号就放引号
// var reg2 = new RegExp("aa","bb");

//一般情况下使用方法1

//解释正则表达式的参数是什么意思
// 第一个参数，用于描述字符串特征，例如以什么开头，以什么结尾，包含什么字符。
// 第二个参数，用于描述额外的功能，例如是否忽略大小写(i)。是否全局匹配(g) 可以省略
//全局匹配的意思: 一般情况下匹配到一个就停止了.
//例如
// var str = "aabbcc";//现在需要将a替换成你
// console.log(str.replace("a","你"));//你abbcc

// 第一种方法
// var reg1 = /ab/;
// // 第二种方法
// var reg2 = new RegExp('ab');

// //上述代码的意思判断字符串是否包含 ab

// //如何去判断通过正则表达式的test方法即可
// var str = "你好123abacd";
// console.log(reg1.test(str))//true

// var reg = /ab/;
// console.log(reg.test('abcd')); // 输出结果：true
// console.log(reg.test('dcba')); // 输出结果：false
// console.log(reg.test('Abcd')); // 输出结果：false

//一般来说都是通过test方法来判断字符串是否符合要求
//其中还有一个方法也可以判断但是用的比较少

// var reg = /ab/;
// console.log(reg.exec('cdab'));
// console.log(reg.exec('dcba'));
// console.log(reg.exec('Abcd'));
// 不同的是：返回值。exec返回的是一个数组，如果不匹配返回一个null。
// 如果匹配就返回出现的下标等。
</script>

四.正则表达式的元字符
<script>
// 之前的写法太过于局限性。a只能代表a，b只能代表b。

// 元字符是具有特殊含义的字符，例如[a-z]就表示所有小写字母

//第一个元字符 . 表示任意字符
// 例如
// var reg = /a./;
// var str = "qwerta~";
// console.log(reg.test(str));

// //第二个元字符 ^ 表示以什么开头必须放在第一个

// var reg = /^yyzy/;
// var str = "yyzy123";
// console.log(reg.test(str));

//第三个元字符 $ 表示以什么结尾必须放在最后第一个

// var reg = /yyzy$/;
// var str = "yyzy123yyzy";
// console.log(reg.test(str));

//元字符之间是可以统一使用的
// var reg = /^2023yyzy$/;这里的语法表示必须是2023yyzy 这里还不完善
// var str = "2023yyzy";
// console.log(reg.test(str));

//下面两种写法的区别 i表示忽略大小写

// var reg1 = /^ab$/i;//必须是ab
// var reg2 = /ab/i;//只要包含ab即可

//元字符之间是可以统一使用的
// var reg = /^2023...yyzy$/;
// var str = "2023ab啊yyzy";
// console.log(reg.test(str));

// 正则表达式中的“[]”表示一个字符集合，
// 只要待匹配的字符符合字符集合中的某一项，即表示匹配成功。

//需要校验的字符串必须要包含a或d或1或z
// var reg = /[ad1z]/;
// console.log(reg.test("aaaaa"));

//常见的字符串集合
// var reg = /[a-z]/;
// var reg = /[A-Z]/;
// var reg = /[0-9]/;
// var reg = /[a-zA-Z0-9]/;//所以非符号的字符

// // 分别叙述两种写法的区别
// var reg1 = /[abc123]/i; //字符串中只要包含abc123 6个中的任意1个即可
// var reg2 = /abc123/i; //字符串必要包含abc123的整体

// 注意连字符必需要结合中括号一起使用
// 分别叙述两种写法的区别。

// var reg1 = /[a-z]/i;
// var reg2 = /a-z/i;

// 当需要匹配某个范围外的字符时，可以在“[”的后面加上“^”，
// 此时“^”不再表示定位符，而是反义符，表示某个范围之外。

// 分别叙述两种写法的区别
// var reg1 = /^[a-z]/i;//必须是开头有一个字母

// var reg2 = /[^a-z]/i;//必须包含非字母的

//限定符表示只允许出现的次数

// var reg1 = /a{6}/;
// console.log(reg1.test("aaaaaab"))

//必须是6个数字开头然后紧紧跟着1~5个字母即可
// var reg1 = /^[0-9]{6}[a-z]{1,5}[0-9]{1}$/i;

// console.log(reg1.test("123456abf1"))

//模拟需求实现敏感词的过滤
// var reg = /[习法西斯]/g;
// var str = "你好作者。法西斯XX啊啊法国XX";

// console.log(str.replace(reg,"*"));//你abbcc
</script>

五.正则表达式的表单校验
<body>
用户名：<input type="text" id="username" />
<span id="tip"></span> 
<br>
<button id="btn" disabled="disabled">提交信息</button>
<script>
/*
要求对输入的账号进行数据校验：
1.长度为10-20之间
2.必须以yyzy开头
3.必须以2023结尾
4.中间必须存在abcd字符串。
5.必须是复杂账号（大写字母，小写字母，数字，特殊符号必须至少含有3项）

需求如下：输入数据完成之后失去焦点进行校验，如果校验通过则按钮恢复正常，反之给出相关的提示。
*/

var input_username = document.getElementById("username");
var span_text = document.getElementById("tip");
var btn = document.getElementById("btn");

input_username.onblur = function(){
//第一步:获取文本值
var username = input_username.value;

var reg = /^(?=.*d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$/
}

input_username.onfocus = function(){
span_text.innerText = "";

btn.setAttribute("disabled","disabled");
}
</script>
</body>