js实现表单操作、正则表达式的使用

最新推荐文章于 2022-11-20 22:39:57 发布

yyt011

最新推荐文章于 2022-11-20 22:39:57 发布

阅读量232

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/m0_65114896/article/details/124840176

版权

设计个人信息采集页面，完成表单验证，页面布局如下图所示。

要求：1.按提示填写内容，填写正确后显示√，不正确给出错误提示。

2.输入内容符合要求方可进行下一步输入。

3.点击提交和重置按钮需给出相应提示。

源码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#d1 {
				width: 600px;
				text-align: center;
			}

			#d2 {
				width: 600px;
				background-color: lemonchiffon;
			}

			span {
				color: #DC143C;
			}

			input {
				margin-top: 20px;
			}

			#p1,
			#p2,
			#p4,
			#p5,
			#pws1,
			#pws2{
				color: crimson;
			}

			#wrong {
				color: #DC143C;
			}

			#right {
				color: green;
				font-weight: bold;
			}
		</style>
	</head>
	<body>
		<div id="d1">
			<h2>个人信息采集系统</h2>
		</div>

		<div id="d2">
			<form action="" method="post" onsubmit="return submitSure()" onreset="return resetSure()">
				<label>用 户 名<span>*</span>：</label>
				<input type="text" name="" id="t1" value="" />
				<label id="p1">(中英文数字下划线均可，长度4-10位)</label><br>

				<label>性 别<span>*</span>：</label>
				<input type="radio" name="sex" id="t2" value="男" />男
				<input type="radio" name="sex" id="t3" value="女" />女
				<label id="p2"></label><br>

				<label>电 话<span>*</span>：</label>
				<input type="text" name="" id="t4" value="" />
				<label id="p4"></label><br>

				<label>邮 箱<span>*</span>：</label>
				<input type="text" name="" id="t5" value="" />
				<label id="p5"></label><br>

				<label>密 码<span>*</span>：</label>
				<input type="password" name="" id="pw1" value="" />
				<label id="pws1">(由6-12位字母数字组成，必须包含大写字字母)</label><br>

				<label>确认密码<span>*</span>：</label>
				<input type="password" name="" id="pw2" value="" />
				<label id="pws2"> </label><br>

				<input type="submit" id="btn" value="提交" />
				<input type="reset" name="" id="btn" value="重置" />

				<script type="text/javascript">
					var t1 = document.getElementById("t1");
					var t2 = document.getElementById("t2");
					var t3 = document.getElementById("t3");
					var t4 = document.getElementById("t4");
					var t5 = document.getElementById("t5");
					var pw1 = document.getElementById("pw1");
					var pw2 = document.getElementById("pw2");

					var p1 = document.getElementById("p1");
					var p2 = document.getElementById("p2");
					var p4 = document.getElementById("p4");
					var p5 = document.getElementById("p5");
					var pws1 = document.getElementById("pws1");
					var pws2 = document.getElementById("pws2");

					var username = /^[\u4e00-\u9fa5\w]{4,10}$/;
					var telephone = /^(13|14|15|18)\d{9}$/;
					var email = /^([\w\-\.])+\@([\w\-\.])+\.([A-Za-z]{2,4})$/;
					var password = /^(?=.*[A-Z])\w{6,16}$/;

					//用户名
					t1.onblur = function() {
						if (this.value != "") {
							if (this.value.length < 4 || this.value.length > 11) {
								p1.id = "wrong";
								p1.innerHTML = "错误！请输入4-10位有效数据！";
								// t1.focus();
							} else if (username.test(this.value) == false) {
								p1.id = "wrong";
								p1.innerHTML = "请输入中英文、数字或下划线！";
								// t1.focus();
							} else if (username.test(this.value) == true) {
								p1.id = "right";
								p1.innerHTML = "√";
							}
						}
					}

					//判断用户名是否正确
					t2.onfocus = function() {
						if (t1.value.match(username) == null) {
							t1.focus();
							confirm("请先检查用户名是否正确！");
						}
					}
					t3.onfocus = function() {
						if (t1.value.match(username) == null) {
							t1.focus();
							confirm("请先检查用户名是否正确！");
						}
					}

					//电话
					t4.onfocus = function() {
						//判断性别是否被选中
						if (t2.checked == false && t3.checked == false) {
							t2.focus();
							confirm("请先选择性别！");
							return false;
						} else {
							p2.id = "right";
							p2.innerHTML = "√";
						}
						//若性别被选中，判断电话是否有效
						t4.onblur = function() {
							if (this.value != "") {
								if (telephone.test(this.value) == false) {
									p4.id = "wrong";
									p4.innerHTML = "请输入有效电话！";
								} else if (telephone.test(this.value) == true) {
									p4.id = "right";
									p4.innerHTML = "√";
								}
							}
						}
					}

					//邮箱
					t5.onfocus = function() {
						//判断电话是否正确
						if (t4.value.match(telephone) == null) {
							t4.focus();
							confirm("请先检查电话是否正确！");
						}
						//若电话正确，判断邮箱是否有效
						t5.onblur = function() {
							if (this.value != "") {
								if (email.test(this.value) == false) {
									p5.id = "wrong";
									p5.innerHTML = "请输入有效邮箱地址！";
								} else {
									p5.id = "right";
									p5.innerHTML = "√";
								}
							}
						}
					}

					//密码
					pw1.onfocus = function() {
						//判断邮箱是否正确
						// if (t5.value.match(email) == null) {
						// 	t5.focus();
						// 	confirm("请先检查邮箱是否正确！");
						// }
						//若邮箱正确则判断密码是否有效
						pw1.onblur = function() {
							if (this.value != "") {
								if (this.value.length < 6 || this.value.length > 13) {
									pws1.id = "wrong";
									pws1.innerHTML = "错误！请输入6-12位有效数据！";
								} else if (password.test(this.value) == false) {
									pws1.id = "wrong";
									pws1.innerHTML = "请输入字母或数字，必须包含大写字母！";
								} else if (password.test(this.value) == true) {
									pws1.id = "right";
									pws1.innerHTML = "√";
								}
							}
						}
					}

					//确认密码
					pw2.onfocus = function() {
						//判断密码是否正确
						if (pw1.value.match(password) == null) {
							pw1.focus();
							confirm("请先检查密码是否正确！");
						}
						//若密码正确，则判断两次密码是否一致
						pw2.onblur = function() {
							if (this.value != "") {
								if (this.value != pw1.value) {
									pws2.id = "wrong";
									pws2.innerHTML = "两次输入密码不一致！请重新输入！";
								} else {
									pws2.id = "right";
									pws2.innerHTML = "√";
								}
							}
						}
					}

					//检查表单是否完成，并确定是否提交
					function submitSure() {
						return confirm("确认提交吗？");
					}

					//重置表单
					function resetSure() {
						return confirm("确认重置数据吗？");
					}
				</script>
			</form>
		</div>
	</body>
</html>

结果图：

当用户名不符合规则或未填写时就想进入下一项，就会弹出信息阻止