正则—前端注册界面输入信息正则校验
正则命令：
- 括号
[]内部为需要匹配的字符{}内为指定匹配字符的数量（）用于分组
- 插入符号：
^正则开始 - 美元符号：
$正则结束
基本匹配:"the"
元字符：
. 匹配任意单个字符
[] 匹配方括号内的任意字符
[^ ] 匹配除了方括号里的任意字符
* 匹配>=0个重复的在*号之前的字符
+ 匹配>=1个重复的+号前的字符
? 标记?之前的字符为可选
{n,m} 匹配大括号前的字符或字符集(n<= num <=m)
(xyz) 匹配与xyz完全相等的字符串
| 或运算符，匹配之前或之后的字符
\ 转义字符，用于匹配一些保留的字符 [] {} / \ + * . $ ^ | ?
^ 从开始行开始匹配
$ 从末端开始匹配
简写字符集
. 除换行符外的所有字符
\w 匹配所有字母数字等同于[a-zA-Z0-9]
\W 匹配所有非字母数字，即符号，等同于[^\w]
\d 匹配数字 [0-9]
\D 匹配非数字 [^\d]
\s 匹配所有空格字符 等同于[\t\n\f\r\p{Z}]
\S 匹配所有非空格字符：[^\s]
\f 匹配一个换页符
\n 匹配一个换行符
\r 匹配一个回车符
\t 匹配一个制表符
\v 匹配一个垂直制表符
\p 匹配CR/LF(等同于\r\n),用来匹配DOS行终止符
实现思路：利用JavaScript中的正则校验来完成
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>欢迎注册</title>
<link href="css/register.css" rel="stylesheet">
</head>
<body>
<div class="form-div">
<div class="reg-content">
<h1>欢迎注册</h1>
<span>已有帐号？</span> <a href="#">登录</a>
</div>
<form id="reg-form" action="#" method="get">
<table>
<tr>
<td>用户名</td>
<td class="inputs">
<!-- 给标签绑定事件：将事件名onblur作为标签的属性名，然后在属性值中调用checkUsername()函数 -->
<input name="username" type="text" id="username" onblur="checkUsername()">
<!-- <input name="username" type="text" id="username"> -->
<br>
<span id="username_err" class="err_msg" style="display: none">用户名不太受欢迎</span>
</td>
</tr>
<tr>
<td>密码</td>
<td class="inputs">
<!-- 给密码输入框绑定离焦事件调用校验密码的函数 -->
<input name="password" type="password" id="password" onblur="checkPassword()">
<br>
<span id="password_err" class="err_msg" style="display: none">密码格式有误</span>
</td>
</tr>
<tr>
<td>手机号</td>
<td class="inputs"><input name="tel" type="text" id="tel" onblur="checkTel()">
<br>
<span id="tel_err" class="err_msg" style="display: none">手机号格式有误</span>
</td>
</tr>
</table>
<div class="buttons">
<input value="注 册" type="submit" id="reg_btn">
</div>
<br class="clear">
</form>
</div>
<script>
// 验证 用户名是否符合规则：长度 6~12,单词字符组成
function checkUsername(){
//获取用户名的input输入框的value值
let userNameValue = document.getElementById('username').value;
//创建正则对象
//\w 单词字符：[a-zA-Z_0-9]
// let reg = /^[a-zA-Z_0-9]{6,12}$/;
let reg = /^\w{6,12}$/;
//判断输入的值是否符合正则
if(reg.test(userNameValue)){
document.getElementById('username_err').style.display='none';
//用户名合法，可以提交表单，这里返回true
return true;
}else{
//获取用户名的span标签并操作css样式，给样式名display的值设置为block就可以显示用户名的span标签
document.getElementById('username_err').style.display='block';
//用户名非法，阻止提交表单，这里返回false
return false;
}
}
//验证 密码是否符合规则:长度 6~12任意字符
//给密码输入框绑定离焦事件调用校验密码的函数
function checkPassword(){
//在绑定的函数中获取输入框输入的密码的值
let passwordValue = document.getElementById('password').value;
//创建正则对象
let reg = /^.{6,12}$/;
//校验输入框输入的密码值是否满足正则
if(reg.test(passwordValue)){
//如果满足正则，说明密码合法，隐藏错误信息
document.getElementById('password_err').style.display='none';
//提交表单
return true;
}else{
//如果不满足正则，说明密码不合法，显示错误信息
document.getElementById('password_err').style.display='block';
//阻止表单提交
return false;
}
}
//验证 手机号是否符合规则：长度 11，数字组成，第一位是1
//给手机号输入框绑定离焦事件调用校验手机号的函数
function checkTel(){
//在绑定的函数中获取输入框输入的手机号的值
let telValue = document.getElementById('tel').value;
//创建正则对象
let reg = /^1[35789]\d{9}$/;
//校验输入框输入的手机号值是否满足正则
if(reg.test(telValue)){
//如果满足正则，说明手机号合法，隐藏错误信息
document.getElementById('tel_err').style.display='none';
//提交表单
return true;
}else{
//如果不满足正则，说明手机号不合法，显示错误信息
document.getElementById('tel_err').style.display='block';
//阻止表单提交
return false;
}
}
//表单是否可以提交
//如果只要用户名 密码 手机号有一项是非法的，就阻止表单提交，就是onsubmit事件绑定的匿名函数体返回false:return false
document.getElementById('reg-form').onsubmit=function(){
//在提交表单的时候这里再次调用校验用户名的函数:checkUsername()。需要该函数返回给这里true或者false
return checkUsername() && checkPassword() && checkTel();
}
</script>
</body>
</html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 全程不用写代码，我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了