Jquery实现表单校验

html代码如下，复制并保存到新建的 html 文件中，浏览器打开即可查看效果！
html
<!DOCTYPE html>
<html lang="zh-CN">

	<head>
		<meta charset="utf-8">
		<!--声明文档兼容模式，表示使用IE浏览器的最新模式-->
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<!--设置视口的宽度(值为设备的理想宽度)，页面初始缩放值<理想宽度/可见宽度>-->
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title>注册页面</title>

		<!-- 引入Bootstrap核心样式文件 -->
		<link href="../css/bootstrap.min.css" rel="stylesheet">

		<!-- 引入jQuery核心js文件 -->
		<script type="text/javascript" src="../js/jquery-2.1.0.min.js"></script>
		<!--引入validate插件-->
		<script type="text/javascript" src="../js/jquery.validate.min.js"></script>
		<!--引入国际化插件-->
		<script type="text/javascript" src="../js/messages_zh.min.js"></script>
		<!-- 引入BootStrap核心js文件 -->
		<script type="text/javascript" src="../js/bootstrap.min.js"></script>

		<style type="text/css">
			label.error {
				/*background: url(../img/unchecked.gif) no-repeat 10px 3px;*/
				padding-left: 30px;
				font-family: georgia;
				font-size: 15px;
				font-style: normal;
				color: red;
			}
			
			label.success {
				/*background: url(../img/checked.gif) no-repeat 10px 3px;*/
				padding-left: 30px;
			}
		</style>
		<script>
			/* 使用validate插件实现基本的前端表单校验 */
			$(function() {
				$("#registerForm").validate({
					rules: {
						user: {
							required: true,
							minlength: 3,
							maxlength: 10,
							digits: true
						},
						password: {
							required: true,
							minlength: 6,
							maxlength: 10,
						},
						repassword: {
							required: true,
							equalTo: "[name='password']"
						}
					},
					messages: {
						user: {
							required: "必填！",
							minlength: "不能少于3位！",
							maxlength: "不能多于10位！",
							digits: "只允许输入数字！"
						},
						password: {
							required: "必填！",
							minlength: "不能少于6位！",
							maxlength: "不能多于10位！"
						},
						repassword: {
							required: "必填！",
							equalTo: "两次输入不一致！"
						}
					}
				});
			});
		</script>

	</head>

	<body style="background-color: lightblue;">
		<div class="container" style="background-color: AliceBlue;">
			<div style="text-align: center">
				<h1>注册页面</h1>
			</div>
			<div style="text-align: center">
				<form action="/myServlet/registerServlet" method="get" id="registerForm">
					<p>
						帐号：&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
						<input type="text" name="user" id="user" />
					</p>
					<p>
						密码：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<input type="password" name="password" id="password" />
					</p>
					<p>
						确认密码：
						<input type="password" name="repassword" id="repassword" />
					</p>
					<input type="submit" value="注册" />
				</form>
			</div>
		</div>
	</body>

</html>