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

更新时间：2024年05月13日 09:39:57 作者：m4587

正则表达式是用于匹配字符串中字符组合的模式,在JavaScript中正则表达式也是对象,这篇文章主要给大家介绍了关于Javascript正则表达式实现输入框验证信息功能的相关资料,需要的朋友可以参考下

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正则表达式输入框验证信息内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

微信小程序模板与设置WXML实例讲解
这篇文章主要介绍了微信小程序模板与设置WXML，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-08-08
uniapp蓝牙连接的通用步骤
这篇文章主要给大家介绍了关于uniapp蓝牙连接的通用步骤,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2023-06-06
微信小程序webview 脚手架使用详解
这篇文章主要介绍了微信小程序webview 脚手架使用详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值
2019-07-07
javascript伸缩型菜单实现代码
这是一款真正的JavaScript伸展收缩型菜单，鼠标放上看一看，是不是很酷？鼠标划出菜单项的时候，背景会伸长。菜单没有加链接，想用的自己加，再美化一下，绝对够个性吧。
2015-11-11
使用window.postMessage()方法在两个网页间传递数据
这篇文章介绍了使用window.postMessage()在两个网页间传递数据的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-06-06
xml 与javascript结合的问题解决方法
xml 与javascript结合的问题解决方法...
2007-03-03
javascript实现点击小图显示大图
这篇文章主要为大家详细介绍了javascript实现点击小图显示大图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-11-11
JS+CSS 制作的超级简单的下拉菜单附图
下拉菜单想必大家都有见到过吧，在本文将为大家介绍个不错的示例，超简单的，大家可以参考下哦
2013-11-11
js中string和number类型互转换技巧(分享)
下面小编就为大家带来一篇js中string和number类型互转换技巧(分享)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-11-11
微信小程序云函数添加数据到数据库的方法
这篇文章主要介绍了微信小程序云函数添加数据到数据库的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-03-03