JavaScript（第十一）

2023-12-14 10:20:17

项目开发中，经常需要对表单中输入内容的格式进行限制。
例如，用户名、密码、手机号、身份证号的格式验证，
这些内容遵循的规则繁多而又复杂，如果要成功匹配，可能要编写上百行代码，
这种做法显然不可取，但是需要掌握，可以锻炼自身代码功底，和动脑动手能力。
? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ??
此时，就需要使用正则表达式，利用较简短的描述语法完成诸如查找、匹配、替换等功能。
本章将围绕如何在JavaScript中使用正则表达式进行详细讲解。
? ? ? ? ? ? ? ??
掌握程度：掌握基本的写法，以及能够看得懂相关代码即可。

一、表单的验证

要求对输入的账号进行数据校验：

1.长度为10-20之间
2.必须以yyzy开头
3.必须以2023结尾
4.中间必须存在abcd字符串。
5.必须是复杂账号（大写字母，小写字母，数字，特殊符号必须至少含有3项）
? ? ? ? ? ? ? ??
需求如下：输入数据完成之后失去焦点进行校验，如果校验通过则按钮恢复正常，反之给出相关的提示。

<!DOCTYPE html>
<html>
?? ?<head>
?? ??? ?<meta charset="utf-8">
?? ??? ?<title></title>
?? ?</head>
?? ?
?? ?<body>
?? ??? ?用户名：<input type="text" id="username" />
?? ??? ?<span id="tip"></span> 
?? ??? ?<br>
?? ??? ?<button id="btn" disabled="disabled">提交信息</button>
?? ??? ?
?? ??? ?
?? ??? ?<script>
?? ??? ??? ?
?? ??? ??? ?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>

二、正则表达式简略

正则表达式（Regular Expression）是一种描述字符串规律的表达式，
可以迅速地用极简单的方式达到字符串的校验控制。
? ? ? ? ? ??
符合一个正确的规则的表达式
? ? ? ? ? ??
正则表达式的应用：常用于数据校验，过滤敏感词 ?等等

<!DOCTYPE html>
<html>
?? ?<head>
?? ??? ?<meta charset="utf-8">
?? ??? ?<title></title>
?? ?</head>
?? ?<body>
?? ??? ?
?? ??? ?<script>
?
?? ??? ??? ?如何创建正则表达式:
?? ??? ??? ?方法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>
?? ??? ?
?? ?</body>
</html>

三、正则表达式的元字符

<!DOCTYPE html>
<html>
?? ?<head>
?? ??? ?<meta charset="utf-8">
?? ??? ?<title></title>
?? ?</head>
?? ?<body>
?? ??? ?
?? ??? ?<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>
</html>

四、表单校验附

<!DOCTYPE html> ?
<html> ?
<head> ?
? ? <title>账号校验</title> ?
? ? <style> ?
? ? ? ? #validation-message { ?
? ? ? ? ? ? color: red; ?
? ? ? ? } ?
? ? </style> ?
</head> ?
<body> ?
? ? <form> ?
? ? ? ? <label for="account">账号：</label><br> ?
? ? ? ? <input type="text" id="account" name="account" pattern="^[A-Za-z0-9]{10,20}$" required> ?
? ? ? ? <div id="validation-message"></div> ?
? ? ? ? <input type="submit" value="提交" id="submit-button"> ?
? ? </form> ?
??
? ? <script> ?
? ? ? ? const accountInput = document.getElementById('account'); ?
? ? ? ? const validationMessage = document.getElementById('validation-message'); ?
? ? ? ? const submitButton = document.getElementById('submit-button'); ?
??
? ? ? ? accountInput.addEventListener('blur', validateAccount); ?
??
? ? ? ? function validateAccount() { ?
? ? ? ? ? ? const account = accountInput.value; ?
? ? ? ? ? ? const pattern = /^yyzy2023abcd/; ?
? ? ? ? ? ? if (!pattern.test(account)) { ?
? ? ? ? ? ? ? ? validationMessage.textContent = '账号不符合要求：'; ?
? ? ? ? ? ? ? ? if (!account.match(/[A-Z]/)) { ?
? ? ? ? ? ? ? ? ? ? validationMessage.textContent += ' 大写字母至少出现一次 '; ?
? ? ? ? ? ? ? ? } ?
? ? ? ? ? ? ? ? if (!account.match(/[a-z]/)) { ?
? ? ? ? ? ? ? ? ? ? validationMessage.textContent += ' 小写字母至少出现一次 '; ?
? ? ? ? ? ? ? ? } ?
? ? ? ? ? ? ? ? if (!account.match(/[0-9]/)) { ?
? ? ? ? ? ? ? ? ? ? validationMessage.textContent += ' 数字至少出现一次 '; ?
? ? ? ? ? ? ? ? } ?
? ? ? ? ? ? ? ? if (!account.match(/[~`!#$%\^&*+=\-\[\]\\';,/{}|\\":<>\?]/)) { ?
? ? ? ? ? ? ? ? ? ? validationMessage.textContent += ' 特殊符号至少出现一次 '; ?
? ? ? ? ? ? ? ? } ?
? ? ? ? ? ? ? ? validationMessage.style.display = 'block'; ?
? ? ? ? ? ? ? ? submitButton.style.display = 'none'; ?
? ? ? ? ? ? } else { ?
? ? ? ? ? ? ? ? validationMessage.style.display = 'none'; ?
? ? ? ? ? ? ? ? submitButton.style.display = 'block'; ?
? ? ? ? ? ? } ?
? ? ? ? } ?
? ? </script> ?
</body> ?
</html>

五、正则表达式的表单校验

文章来源:https://blog.csdn.net/ObscureMoon/article/details/134912653
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：veading@qq.com进行投诉反馈，一经查实，立即删除！