JavaScript用正则表达式做一个提交功能

最新推荐文章于 2024-08-08 16:33:07 发布

qq_34519706

最新推荐文章于 2024-08-08 16:33:07 发布

阅读量105

点赞数

文章标签： javascript 正则表达式 html

本文链接：https://blog.csdn.net/qq_34519706/article/details/120615519

版权

需求：
用正则表达式做一个提交功能，用户输入正确以后，提交才可以点击提交，如果不正确就禁用。
ps：这个这是一个案例提供思路的，代码很多都可以优化的。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			#fir {
				width: 100px;

			}

			#sec {
				width: 200px;
			}

			#thir {
				width: 100px;
			}

			table tr td {
				text-align: left;
				height: 50px;
			}

			table {
				margin: auto;
			}

			.ruo,
			.zhong,
			.qiang {
				width: 19px;
				height: 19px;
				float: left;
				text-align: center;
				line-height: 19px;
				font-size: 10px;
				color: white;
			}

			.ruo {
				background-color: red;
			}

			.zhong {
				background-color: orange;
			}

			.qiang {
				background-color: green;
			}
		</style>
		<script type="text/javascript">
			window.onload = function() {
				

			function mycheck() {
				if (boo1 && boo2 && boo3 && boo4) {
					document.getElementById("mysub").disabled = false;
				} else {
					document.getElementById("mysub").disabled = true;
				}
			}
			var boo1;
			document.getElementById("loginId").onblur = function() {

				var str = this.value;
				var regLoginId = /^[a-zA-Z][a-zA-Z0-9]{5,}$/;
				if (regLoginId.test(str)) {
					var td = this.parentNode.nextSibling.nextSibling;
					td.innerHTML = "√";
					td.style.color = "green";
				} else {
					var td = this.parentNode.nextSibling.nextSibling;
					td.innerHTML = "×";
					td.style.color = "red";
					boo1 = false;
				}
				mycheck();
			}
			document.getElementById("loginId").onfocus = function() {
				boo1 = true;
				var td = this.parentNode.nextSibling;
				td.innerHTML = "";
			}
			var boo2;
			document.getElementById("loginPwd").onfocus = function() {
				boo2 = true;
			}
			document.getElementById("loginPwd").onblur = function() {
				if (level == 1) {
					boo2 = false;
				}
				mycheck();
			}
			var level = 0;
			document.getElementById("loginPwd").oninput = function() {
				level = 0;
				var reg1 = new RegExp(/\d+/);
				var reg2 = new RegExp(/[a-zA-Z]+/);
				var reg3 = new RegExp(/[\W_]+/);
				var pwd = this.value;
				if (reg1.test(pwd)) {
					level++;
				}
				if (reg2.test(pwd)) {
					level++;
				}
				if (reg3.test(pwd)) {
					level++;
				}
				switch (level) {
					case 1:
						document.getElementsByClassName("ruo")[0].style.opacity = "1";
						document.getElementsByClassName("zhong")[0].style.opacity = "0.3";
						document.getElementsByClassName("qiang")[0].style.opacity = "0.3";
						break;
					case 2:
						document.getElementsByClassName("ruo")[0].style.opacity = "0.3";
						document.getElementsByClassName("zhong")[0].style.opacity = "1";
						document.getElementsByClassName("qiang")[0].style.opacity = "0.3";
						break;
					case 3:
						document.getElementsByClassName("ruo")[0].style.opacity = "0.3";
						document.getElementsByClassName("zhong")[0].style.opacity = "0.3";
						document.getElementsByClassName("qiang")[0].style.opacity = "1";
						break;
				}
			}
			var boo3;
			document.getElementById("email").onfocus = function() {
				boo3 = true;
			}
			document.getElementById("email").onblur = function() {

				//用正则表达式的规则  和  用户输入在文本框中内容 作比较
				var regEmail = /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/;
				var str = this.value;
				if (regEmail.test(str)) {
					var td = this.parentNode.nextSibling.nextSibling;
					td.innerHTML = "√";
					td.style.color = "green";
				} else {
					var td = this.parentNode.nextSibling.nextSibling;
					td.innerHTML = "×";
					td.style.color = "red";
					boo3 = false;
				}
				mycheck();
			}
			var boo4;
			document.getElementById("idCard").onfocus = function() {
				boo4 = true;
			}
			document.getElementById("idCard").onblur = function() {


				var idCard = /\d{17}[\d|x]|\d{15}/;
				var str = this.value;
				if (idCard.test(str)) {
					var td = this.parentNode.nextSibling.nextSibling;
					td.innerHTML = "√";
					td.style.color = "green";
				} else {
					var td = this.parentNode.nextSibling.nextSibling;
					td.innerHTML = "×";
					td.style.color = "red";
					boo4 = false;
				}
				mycheck();
			}
			}
		</script>
	</head>
	<body>
		<form id="myform" action="#" method="get">
			<table id="frame" border="0">
				<tr>
					<td id="fir">
						请输入账号:
					</td>
					<td id="sec">
						<input type="text" name="loginId" id="loginId" />
					</td>
					<td id="thir"></td>
				</tr>
				<tr>
					<td>
						请输入密码:
					</td>
					<td>
						<input type="text" name="loginPwd" id="loginPwd" />
					</td>
					<td>
						<div class="ruo" style="opacity: 0.3;">弱</div>
						<div class="zhong" style="opacity: 0.3;">中</div>
						<div class="qiang" style="opacity: 0.3;">强</div>
					</td>
				</tr>

				<tr>
					<td>
						请输入邮箱:
					</td>
					<td>
						<input type="text" name="email" id="email" />
					</td>
					<td></td>
				</tr>

				<tr>
					<td>
						请输入身份证:
					</td>
					<td>
						<input type="text" name="idCard" id="idCard" />
					</td>
					<td></td>
				</tr>

				<tr>
					<td colspan="3">
						<input type="submit" disabled="disabled" id="mysub" value="注册" />
					</td>

				</tr>
			</table>
		</form>
	</body>
</html>

效果如图：
在这里插入图片描述

qq_34519706

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript用正则表达式做一个提交功能

需求：用正则表达式做一个提交功能，用户输入正确以后，提交才可以点击提交，如果不正确就禁用。ps：这个这是一个案例提供思路的，代码很多都可以优化的。<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> #fir { width: 100px; }
复制链接

扫一扫