JS运用正则表达式写注册验证

最新推荐文章于 2024-09-02 19:31:04 发布

fengGer的bugs

最新推荐文章于 2024-09-02 19:31:04 发布

阅读量787

点赞数 1

分类专栏： js简单案例文章标签： js写简易注册验证

本文链接：https://blog.csdn.net/qq_41224512/article/details/86373729

版权

js简单案例专栏收录该内容

12 篇文章 0 订阅

订阅专栏

代码如下，写的简单，如有不足之处，敬请指教！

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			form {
				margin: 20px auto;
				width: 500px;
				height: 400px;
				background: cornflowerblue;
			}

			fieldset {
				width: 450px;
				margin: auto auto;
				border: 1px solid #ccc;
				height: 93%;
				position: relative;


			}

			legend {
				text-align: center;
			}

			p:last-child {
				position: absolute;
				bottom: 16px;
				margin-left: 1px;
			}

			#last input {
				margin-left: 114px;
			}

			p label {
				width: 112px;
				text-align: center;
				float: left;
				height: 20px;
				background: greenyellow;
			}

			input {
				border: 0;
				float: left;
				margin-left: 10px;
				height: 20px;
			}

			span {
				font-size: 12px;
				color: #f00;
			}
		</style>

	</head>
	<body>
		<form action="" method="">
			<fieldset>
				<legend>简单注册</legend>
				<p>
					<label>用户名:</label>
					<input type="text" id="txt1" /><span id="name"></span><br />
				</p>
				<p>
					<label>密&nbsp;&nbsp;&nbsp;码:</label>
					<input type="password" id="psw" /><span id="pwd"></span><br />
				</p>
				<p>
					<label>再次输入密码:</label>
					<input type="password" id="psw1" /><span id="pwd1"></span><br />
				</p>
				<p>
					<label>身份证号:</label>
					<input type="text" id="txt3" /><span id="num"></span><br />
				</p>
				<p>
					<label>电话号码:</label>
					<input type="text" id="tel" /><span id="telId"></span><br />
				</p>
				<p>
					<label>邮&nbsp;&nbsp;&nbsp;箱:</label>
					<input type="text" id="txtemail" />
					<span id="email"></span><br />
				</p>
				<p>
					<label>地&nbsp;&nbsp;&nbsp;址:</label>
					<input type="text" id="area" />
					<span id="are"></span><br />
				</p>

				<p id="last">
					<input type="button" name="" id="btn" value="提交" />
					<input type="reset" name="" id="btn1" value="取消" />
				</p>

			</fieldset>

		</form>

		<script type="text/javascript">
			var oBtn = document.getElementById("btn");
			var oTxt1 = document.getElementById("txt1");
			var oPsw = document.getElementById("psw");
			var oName = document.getElementById("name");
			var oPwd = document.getElementById("pwd");
			//用户名验证
			oTxt1.onchange = function() {
				var valn = oTxt1.value;
				var reg = /^\w{4,10}$/;
				if (!reg.test(valn)) {
					oName.innerHTML = "请输入4-10个字母、数字、下划线";
					return false;
				} else {
					oName.innerHTML = "格式正确";
					oName.style.color = "#0f0";
					return true;
				}
			}
			//密码验证
			oPsw.onchange = function() {
				var valp = oPsw.value;
				var reg = /^\w{6,20}$/;
				if (!reg.test(valp)) {
					oPwd.innerHTML = "6-20个字母、数字、下划线";
					return false;
				} else {
					oPwd.innerHTML = "密码格式正确";
					oPwd.style.color = "#0f0";
					return true;
				}
			}

			var oPsw1 = document.getElementById("psw1");
			var oPwd1 = document.getElementById("pwd1");
			var oTxt3 = document.getElementById("txt3");
			var oNum = document.getElementById("num");
			oBtn.onclick = function() {
				//再次输入密码
				var valp = oPsw.value;
				var valp1 = oPsw1.value;
				if (valp != valp1) {
					oPwd1.innerHTML = "两次输入不一致";
				} else {
					oPwd1.innerHTML = "";
				}
				//身份证号码
				var valId = oTxt3.value;
				var reg = /(^\d{15}$)|(^\d{17}([0-9]|X)$)/;
				if (!reg.test(valId)) {
					oNum.innerHTML = "请输入15或18位的身份证号!";
					return false;
				} else {
					oNum.innerHTML = "格式正确";
					oNum.style.color = "#0f0";
					return true;
				}
			}
			//电话号码验证
			var oTel = document.getElementById("tel");
			var oTelId = document.getElementById("telId");
			oTel.onblur = function() {
				var valtel = oTel.value;
				var reg = /^1(3|5|7|8)\d{9}$/g;
				if (!reg.test(valtel)) {
					oTelId.innerHTML = "电话号码格式不正确！";
					return false;
				} else {
					oTelId.style.color = "#0f0";
					oTelId.innerHTML = "格式正确";
					return true;
				}
			}
			//邮箱验证
			var oTxtemail = document.getElementById("txtemail");
			var oEmail = document.getElementById("email");
			oTxtemail.onblur = function() {
				var valemail = this.value;
				var reg = /^\w+@\w+(\.\w+)+$/;
				if (reg.test(valemail)) {
					oEmail.innerHTML = "格式正确";

				} else {
					oEmail.innerHTML = "请输入：如jhon@163.com";
					oEmail.style.color = "#f00";
				}
			}
			//验证地址:不少于10个字
			var oArea = document.getElementById("area");
			var oAre = document.getElementById("are");
			oArea.onblur = function() {
				var valarea = this.value;
				var reg = /^[\u4e00-\u9fa5]{10,}$/;
				if (!reg.test(valarea)) {
					oAre.innerHTML = "地址不少于10个字";
					return false;
				} else {
					oAre.innerHTML = "格式正确 √ ";
					oAre.style.color = "#0f0";
					return false;
				}
			}
		</script>
	</body>
</html>