Javascript正则表达式实现输入框验证信息

article/2025/8/30 8:16:19

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>