快捷導(dǎo)航

Javascript正則表達(dá)式實(shí)現(xiàn)輸入框驗(yàn)證信息功能實(shí)例

更新時(shí)間：2024年05月13日 09:39:57 作者：m4587

正則表達(dá)式是用于匹配字符串中字符組合的模式,在JavaScript中正則表達(dá)式也是對(duì)象,這篇文章主要給大家介紹了關(guān)于Javascript正則表達(dá)式實(shí)現(xiàn)輸入框驗(yàn)證信息功能的相關(guān)資料,需要的朋友可以參考下

1.了解正則表達(dá)式可以:

測(cè)試字符串的某個(gè)模式。例如，可以對(duì)一個(gè)輸入字符串進(jìn)行測(cè)試，看在該字符串是否存在一個(gè)電話號(hào)碼模式或一個(gè)信用卡號(hào)碼模式。這稱為數(shù)據(jù)有效性驗(yàn)證
替換文本。可以在文檔中使用一個(gè)正則表達(dá)式來(lái)標(biāo)識(shí)特定文字，然后可以全部將其刪除，或者替換為別的文字
根據(jù)模式匹配從字符串中提取一個(gè)子字符串。可以用來(lái)在文本或輸入字段中查找特定文字
根據(jù)模式匹配從字符串中提取一個(gè)子字符串。可以用來(lái)在文本或輸入字段中查找特定文字

正則表達(dá)式語(yǔ)法
一個(gè)正則表達(dá)式就是由普通字符（例如字符 a 到 z）以及特殊字符（稱為元字符）組成的文字模式。該模式描述在查找文字主體時(shí)待匹配的一個(gè)或多個(gè)字符串。正則表達(dá)式作為一個(gè)模板，將某個(gè)字符模式與所搜索的字符串進(jìn)行匹配。

2.正則表達(dá)式驗(yàn)證輸入框信息實(shí)現(xiàn)以下功能

如果輸入正確則提示正確的信息顯示綠色，小圖標(biāo)變化
如果輸入的不是6~18位密碼則提示錯(cuò)誤的信息顯示紅色，小圖標(biāo)變化

效果圖如下

在這里插入圖片描述

代碼如下

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>密碼框驗(yàn)證信息</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/關(guān)閉圓.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')

				//驗(yàn)證用戶名
				realname.onblur = function() {

					var value = realname.value;
					var reg = /^[a-zA-Z][a-zA-Z0-9_]{4,15}$/; //帳號(hào)是否合法(字母開(kāi)頭，允許5-16字節(jié)，允許字母數(shù)字下劃線)
					var flag = reg.test(value);
					if (!flag) {
						realnamemsg.className = "message wrong";
						realnamemsg.innerHTML = "請(qǐng)輸入正確的用戶名"
					} else {
						realnamemsg.className = "message right";
						realnamemsg.innerHTML = "用戶名輸入正確"
					}
				}

				//驗(yàn)證密碼
				psd.onblur = function() {

					var value = psd.value;
					var reg = /^[a-zA-Z]\w{5,17}$/; //密碼(以字母開(kāi)頭，長(zhǎng)度在6~18之間，只能包含字母、數(shù)字和下劃線)
					var flag = reg.test(value);
					if (!flag) {
						psdmsg.className = "message wrong";
						psdmsg.innerHTML = "請(qǐng)輸入正確的密碼"
					} else {
						psdmsg.className = "message right";
						psdmsg.innerHTML = "密碼正確"
					}
				}

				//驗(yàn)證郵箱
				email.onblur = function() {

					var value = email.value;
					var reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/; //驗(yàn)證郵箱
					var flag = reg.test(value);
					if (!flag) {
						emailmsg.className = "message wrong";
						emailmsg.innerHTML = "請(qǐng)輸入正確的郵箱號(hào)"
					} else {
						emailmsg.className = "message right";
						emailmsg.innerHTML = "郵箱正確"
					}
				}

				//驗(yàn)證手機(jī)號(hào)
				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}$/; //驗(yàn)證手機(jī)號(hào)碼
					var flag = reg.test(value);
					if (!flag) {
						phonemsg.className = "message wrong";
						phonemsg.innerHTML = "請(qǐng)輸入正確的手機(jī)號(hào)碼"
					} else {
						phonemsg.className = "message right";
						phonemsg.innerHTML = "號(hào)碼正確"
					}
				}
			}
		</script>

	</head>
	<body>

		<div>
			<p class="info">用戶名</p>
			<input type="text" class="ipt" id="realname">
			<p class="message" id="realnamemsg">請(qǐng)輸入6~10位用戶名，以字母開(kāi)頭，允許字母數(shù)字下劃線</p>
		</div>
		<div>
			<p class="info">密碼</p>
			<input type="password" class="ipt" id="psd">
			<p class="message" id="psdmsg">密碼以字母開(kāi)頭，長(zhǎng)度在6~18之間，只能包含字母、數(shù)字和下劃線</p>
		</div>
		<div>
			<p class="info">郵箱</p>
			<input type="email" class="ipt" id="email">
			<p class="message" id="emailmsg">請(qǐng)輸入正確的郵箱賬號(hào)</p>
		</div>
		<div>
			<p class="info">手機(jī)號(hào)</p>
			<input type="text" class="ipt" id="phone">
			<p class="message" id="phonemsg">請(qǐng)輸入正確的手機(jī)號(hào)碼</p>
		</div>

	</body>
</html>

附：常用方法

1.RegExp()：構(gòu)造函數(shù)，有兩個(gè)參數(shù)，第一個(gè)參數(shù)是正則表達(dá)式，第二個(gè)參數(shù)是表示使用什么樣的模式來(lái)匹配（可省略）。

2.exec():字符串中執(zhí)行查找匹配的RegExp方法，它返回一個(gè)數(shù)組（未匹配到則返回null）。該方法有一個(gè)參數(shù)，表示要匹配的字符串。

var res = RegExp(“[0-9]{2}”);
var regex = res.exec(1234567);//[“12”, index: 0, input: “1234567”]

3.test():字符串中是否匹配的RegExp方法，返回true或false。該方法有一個(gè)參數(shù)，表示要匹配的字符串。

var res = new RegExp(“[0-9]{2}”);
var result = res.test(1234567);

總結(jié)

到此這篇關(guān)于Javascript正則表達(dá)式實(shí)現(xiàn)輸入框驗(yàn)證信息功能的文章就介紹到這了,更多相關(guān)js正則表達(dá)式輸入框驗(yàn)證信息內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: