模仿京东用户注册用JQuery实现简单表单验证（附效果图）_京东注册表单切换效果怎么设置-CSDN博客

本文链接：https://blog.csdn.net/NaMgAl_/article/details/78980491
说明：
1. 代码中的js脚本文件路径需替换为自己的目录文件
2. 代码中加入了ajax验证账号是否存在
效果图：
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>会员注册</title>
<style type="text/css">
font {
	font-size: 10px;
}

.info {
	color: #AAAAAA;
}

.errormsg {
	color: #FF3030;
}

.errorinput {
	border-color: #FF3030;
	border-width: 1px;
}

.ok {
	color: #32CD32;
}
</style>
<script type="text/javascript" src="/airticleMgr/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
	//账号是否验证过
	var accountIsChecked = false;

	var accountIsOK = false;
	var passwdIsOK = false;
	var confirmpwdIsOK = false;
	var phoneIsOK = false;

	$(function() {

		// 验证账号
		$("#account").focus(function() {
			focus_checkaccount();
		}).keyup(
				function() {
					$("#accountmsg").text("支持中文、字母、数字组合").removeClass()
							.addClass("info");
					accountIsChecked = false;
				}).blur(function() {
			blur_checkaccount();
		})

		// 验证密码
		$("#pwd").focus(function() {
			$("#pwdmsg").text("建议使用数字和字母的组合").removeClass().addClass("info");
		}).blur(function() {
			blur_checkpwd();
			blur_confirmpwd();
		});

		// 验证二次密码
		$("#confirmpwd").focus(function() {
			$("#confirmmsg").text("请再次确认密码").removeClass().addClass("info");
		}).blur(function() {
			blur_confirmpwd();
		});

		// 验证手机号码
		$("#phone").focus(function() {
			$("#phonemsg").text("建议输入常用手机").removeClass().addClass("info");
		}).blur(function() {
			blur_checkphone();
		})
	});

	function focus_checkaccount() {
		if (!accountIsChecked) {
			$("#accountmsg").text("支持中文、字母、数字组合").removeClass()
					.addClass("info");
		}
	}

	function blur_checkaccount() {
		var account = $("#account").val();
		if (account != "") {
			// 判断account是否验证过
			if (!accountIsChecked) {
				// 未验证过，则进行验证
				ajax_checkaccount(account);
			}
		} else {
			$("#accountmsg").text("");
			accountIsOK = false;
		}
	}

	// ajax请求验证account
	function ajax_checkaccount(account) {
		$.get("/airticleMgr/member", {
			m : "checkAccount",
			account : account
		}, function(data) {
			if ("true" == data) {
				$("#accountmsg").text("该账号已被注册").removeClass().addClass(
						"errormsg");
				accountIsOK = false;
			} else {
				$("#accountmsg").text("√").removeClass().addClass("ok");
				accountIsOK = true;
			}
		});
		accountIsChecked = true;
	}

	function blur_checkpwd() {
		var lpwd = $("#pwd").val().length;
		if (lpwd > 0) {
			if (lpwd < 6) {
				$("#pwdmsg").text("长度在6-20位之间").removeClass().addClass(
						"errormsg");
				passwdIsOK = false;
			} else {
				$("#pwdmsg").text("√").removeClass().addClass("ok");
				passwdIsOK = true;
			}
		} else {
			$("#pwdmsg").text("");
			passwdIsOK = false;
		}
	}

	function blur_confirmpwd() {
		var pwd = $("#pwd").val();
		var confirmpwd = $("#confirmpwd").val();
		if (confirmpwd != "") {
			if (confirmpwd == pwd) {
				$("#confirmmsg").text("√").removeClass().addClass("ok");
				confirmpwdIsOK = true;
			} else {
				$("#confirmmsg").text("两次密码输入不一致").removeClass().addClass(
						"errormsg");
				confirmpwdIsOK = false;
			}
		} else {
			$("#confirmmsg").text("");
			confirmpwdIsOK = false;
		}
	}

	function blur_checkphone() {
		var phone = $("#phone").val();
		var regix = /^1[34578][0-9]{9}$/;
		if (phone != "") {
			if (!regix.test(phone)) {
				$("#phonemsg").text("手机格式有误").removeClass()
						.addClass("errormsg");
				phoneIsOK = false;
			} else {
				$("#phonemsg").text("√").removeClass().addClass("ok");
				phoneIsOK = true;
			}
		} else {
			$("#phonemsg").text("");
			phoneIsOK = false;
		}

	}

	// 表单验证
	function check_form() {

		if (!accountIsOK) {
			if ($("#account").val() == "") {
				$("#accountmsg").text("请输入账号").removeClass().addClass(
						"errormsg");
			} else {
			}
			return false;
		}

		if (!passwdIsOK) {
			if ($("#pwd").val() == "") {
				$("#pwdmsg").text("请输入密码").removeClass().addClass("errormsg");
			} else {
			}
			return false;
		}

		if (!confirmpwdIsOK) {
			if ($("#confirmpwd").val() == "") {
				$("#confirmmsg").text("请再次输入密码").removeClass().addClass(
						"errormsg");
			} else {
			}
			return false;
		}

		if (!phoneIsOK) {
			if ($("#phone").val() == "") {
				$("#phonemsg").text("请输入手机").removeClass().addClass("errormsg");
			} else {
			}
			return false;
		}

		if (accountIsOK && passwdIsOK && confirmpwdIsOK && phoneIsOK) {
			alert("欢迎注册");
			return true;
		} else {
			alert("请检查信息");
			return false;
		}
	}
</script>

</head>
<body>
	<h1>会员注册</h1>
	<form action="/airticleMgr/member?m=regist" method="post"
		οnsubmit="return check_form()">
		<table>
			<tr height="30px">
				<td>帐   号：</td>
				<td><input type="text" id="account" name="account"
					placeholder="您的登录账号"></td>
				<td><font id="accountmsg"></font></td>
			</tr>
			<tr height="30px">
				<td>设置密码：</td>
				<td><input type="password" id="pwd" name="pwd"
					placeholder="设置您的密码" maxlength="20"></td>
				<td><font id="pwdmsg"></font></td>
			</tr>
			<tr height="30px">
				<td>确认密码：</td>
				<td><input type="password" id="confirmpwd" name="confirmpwd"
					placeholder="确认您的密码" maxlength="20"></td>
				<td><font id="confirmmsg"></font></td>
			</tr>
			<tr height="30px">
				<td>手   机：</td>
				<td><input type="text" id="phone" name="phone"
					placeholder="您的手机号码"></td>
				<td><font id="phonemsg"></font></td>
			</tr>
			<tr height="7px"></tr>
			<tr>
				<td colspan="2" align="center"><input type="submit"
					value="立即注册"
					style="height: 30px; width: 100%; background-color: #FF3030; color: white; border: 0">
				</td>
				<td></td>
			</tr>
		</table>
	</form>
</body>
</html>