本文详细介绍如何利用 JavaScript 正则表达式实现输入框的数据有效性验证。通过实例演示如何根据用户输入的密码、邮箱及手机号格式，动态显示正确或错误提示信息，并改变图标状态。文章还解析了 RegExp 构造函数、exec() 和 test() 等核心方法的使用，帮助开发者掌握前端表单校验的核心技术。
1. 理解正则表达式的作用：
- 用于检测字符串是否符合特定模式。例如，验证输入字符串中是否包含有效的电话号码或信用卡号，这属于数据有效性验证范畴。
- 用于文本替换。可以在文档中通过正则表达式定位特定文字，随后将其删除或替换为其他内容。
- 根据模式从字符串中提取子字符串。可用于在文本或输入字段中查找特定的文字内容。
- 根据模式从字符串中提取子字符串。可用于在文本或输入字段中查找特定的文字内容。
正则表达式语法： 正则表达式由普通字符（如 a 到 z）和特殊字符（元字符）组成，构成一种文字模式。该模式描述了在查找文字主体时需匹配的一个或多个字符串。正则表达式作为模板，将字符模式与搜索字符串进行匹配。
2. 利用正则表达式验证输入框信息，实现以下功能：
- 若输入格式正确，则显示正确的提示信息，文字颜色为绿色，并切换小图标。
- 若输入的不是 6~18 位密码，则显示错误的提示信息，文字颜色为红色，并切换小图标。
效果展示如下：
具体代码实现如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>密码框验证信息</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
div {
width: 800px;
height: 30px;
margin: 20px auto;
}
.info {
/* background-color: #41b916; */
width: 60px;
height: 100%;
text-align: right;
display: inline-block;
}
.ipt {
width: 200px;
height: 100%;
line-height: 30px;
padding: 5px;
box-sizing: border-box;
}
.message {
display: inline-block;
color: #999;
background: url(img/提示.png) no-repeat left center;
font-size: 12px;
padding-left: 24px;
height: 100%;
line-height: 30px;
text-align: center;
}
.wrong {
color: #ee2c13;
background-image: url(img/关闭圆.png);
}
.right {
color: #41b916;
background-image: url(img/选中圆.png);
}
</style>
<script type="text/javascript">
window.onload = function() {
//获取元素
var realname = document.querySelector('#realname');
var realnamemsg = document.querySelector('#realnamemsg');
var psd = document.querySelector('#psd')
var psdmsg = document.querySelector('#psdmsg')
var email = document.querySelector('#email')
var emailmsg = document.querySelector('#emailmsg')
var phone = document.querySelector('#phone')
var phonemsg = document.querySelector('#phonemsg')
//验证用户名
realname.onblur = function() {
var value = realname.value;
var reg = /^[a-zA-Z][a-zA-Z0-9_]{4,15}$/; //帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线)
var flag = reg.test(value);
if (!flag) {
realnamemsg.className = "message wrong";
realnamemsg.innerHTML = "请输入正确的用户名"
} else {
realnamemsg.className = "message right";
realnamemsg.innerHTML = "用户名输入正确"
}
}
//验证密码
psd.onblur = function() {
var value = psd.value;
var reg = /^[a-zA-Z]\w{5,17}$/; //密码(以字母开头，长度在6~18之间，只能包含字母、数字和下划线)
var flag = reg.test(value);
if (!flag) {
psdmsg.className = "message wrong";
psdmsg.innerHTML = "请输入正确的密码"
} else {
psdmsg.className = "message right";
psdmsg.innerHTML = "密码正确"
}
}
//验证邮箱
email.onblur = function() {
var value = email.value;
var reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/; //验证邮箱
var flag = reg.test(value);
if (!flag) {
emailmsg.className = "message wrong";
emailmsg.innerHTML = "请输入正确的邮箱号"
} else {
emailmsg.className = "message right";
emailmsg.innerHTML = "邮箱正确"
}
}
//验证手机号
phone.onblur = function() {
var value = phone.value;
var reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/; //验证手机号码
var flag = reg.test(value);
if (!flag) {
phonemsg.className = "message wrong";
phonemsg.innerHTML = "请输入正确的手机号码"
} else {
phonemsg.className = "message right";
phonemsg.innerHTML = "号码正确"
}
}
}
</script>
</head>
<body>
<div>
<p class="info">用户名</p>
<input type="text" class="ipt" id="realname">
<p class="message" id="realnamemsg">请输入6~10位用户名，以字母开头，允许字母数字下划线</p>
</div>
<div>
<p class="info">密码</p>
<input type="password" class="ipt" id="psd">
<p class="message" id="psdmsg">密码以字母开头，长度在6~18之间，只能包含字母、数字和下划线</p>
</div>
<div>
<p class="info">邮箱</p>
<input type="email" class="ipt" id="email">
<p class="message" id="emailmsg">请输入正确的邮箱账号</p>
</div>
<div>
<p class="info">手机号</p>
<input type="text" class="ipt" id="phone">
<p class="message" id="phonemsg">请输入正确的手机号码</p>
</div>
</body>
</html>附：常用正则表达式方法说明
1. RegExp()：构造函数，包含两个参数。第一个参数为正则表达式，第二个参数指定匹配模式（可选）。
2. exec()：在字符串中执行查找匹配的 RegExp 方法，返回一个数组（若未匹配到则返回 null）。该方法接收一个参数，即要匹配的字符串。
var res = RegExp(“[0-9]{2}”);
var regex = res.exec(1234567);//[“12”, index: 0, input: “1234567”]3. test()：检查字符串中是否匹配 RegExp 方法，返回 true 或 false。该方法接收一个参数，即要匹配的字符串。
var res = new RegExp(“[0-9]{2}”);
var result = res.test(1234567);总结
至此，关于 JavaScript 正则表达式实现输入框验证信息功能的文章介绍完毕。如需了解更多相关 js 正则表达式输入框验证信息内容，请搜索本站以前的文章或继续浏览下面的相关文章，希望大家以后多多支持本站！