Web前端第四季(jQuery):七:604-书写validation校验规则+605-完成validation校验（课程结束）

表单校验
1，jQuery插件validation：https://jqueryvalidation.org/
a、国际化（提示信息支持多国语言）
b、validation是一个基于jQuery的插件，里面有了jQuery的一些函数和功能
2，语法
$(xx).validate({
rules:{},
messages:{}
});
3，rules:{
username:{
required:true,
minlength:9,
digits:true ,
equalTo:"[name='reusername']"
},
password:{...}
}

4，如果没有messages的话，会默认给出英文提示
引入了国际化的message.js文件的话，也可以不写messages
messages:{
username:{
required:"用户名必须填写",
minlength:"最小长度为9位",
digits:"必须由数字组成"
},
password:{...}
}
5，单选按钮处理：
<label for="sex" class="error" style="display: none;"></label>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>

		<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
		<script type="text/javascript" src="js/jquery.validate.min.js"></script>
		<script type="text/javascript" src="js/messages_zh.min.js"></script>

		<script type="text/javascript">
			var validateRule = {
				rules: {
					// 对username的键值进行规则
					username: {
						required: true,
						minlength: 3,
						maxlength: 6
					},
					email: {
						required: true,
						email: true
					},
					password: {
						required: true,
						minlength: 3,
						maxlength: 6
					},
					rePassword: {
						required: true,
						equalTo: "[name='password']"
					},
					birthday: {
						date: true
					},
					sex:{
						required:true
					}
				}
			};

			$(function() {
				$("#registerForm").validate(validateRule);
			});
		</script>
	</head>
	<body>
		<form action="register.jsp" id="registerForm">
			<table border="1" width="800px" height="500px">
				<tr>
					<td colspan="2" align="center">注册</td>
				</tr>
				<tr>
					<td align="right" width="100px">用户名:</td>
					<td align="left"> <input type="text" name="username" />

					</td>
				</tr>
				<tr>
					<td align="right">邮箱：</td>
					<td> <input type="text" name="email" /></td>
				</tr>
				<tr>
					<td align="right">密码：</td>
					<td> <input type="password" name="password" /> </td>
				</tr>
				<tr>
					<td align="right">重复密码：</td>
					<td> <input type="password" name="rePassword" /> </td>
				</tr>
				<tr>
					<td align="right">出生年月日：</td>
					<td> <input type="text" name="birthday" /> </td>
				</tr>
				<tr>
					<td align="right">性别：</td>
					<td> 男 <input type="radio" name="sex" /> 女 <input type="radio" name="sex" />
						<label for="sex" class="error"></label>
					</td>
				</tr>
				<tr>
					<td colspan="2" align="center"> <input type="submit" value="注册" /> </td>
				</tr>
			</table>
		</form>
	</body>
</html>

操作:2:成功:605-完成validation校验（课程结束）

1.运行结果：成功

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>

		<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
		<script type="text/javascript" src="js/jquery.validate.min.js"></script>
		<script type="text/javascript" src="js/messages_zh.min.js"></script>

		<script type="text/javascript">
			var validateRule = {
				rules: {
					// 对username的键值进行规则
					username: {
						required: true,
						minlength: 3,
						maxlength: 6
					},
					email: {
						required: true,
						email: true
					},
					password: {
						required: true,
						minlength: 3,
						maxlength: 6
					},
					rePassword: {
						required: true,
						equalTo: "[name='password']"
					},
					birthday: {
						date: true
					},
					sex: {
						required: true
					}
				},

				// 自定义提示信息内容：代码格式和rules是差不多的
				messages: {
					username: {
						required: "自定义提示：这个是必须填写的",
						minlength: "自定义提示：最少输入3个字符！",
						maxlength: "自定义提示：最多输入6个字符！"
					}
				}
			};

			$(function() {
				$("#registerForm").validate(validateRule);
			});
		</script>
	</head>
	<body>
		<form action="register.jsp" id="registerForm">
			<table border="1" width="800px" height="500px">
				<tr>
					<td colspan="2" align="center">注册</td>
				</tr>
				<tr>
					<td align="right" width="100px">用户名:</td>
					<td align="left"> <input type="text" name="username" />

					</td>
				</tr>
				<tr>
					<td align="right">邮箱：</td>
					<td> <input type="text" name="email" /></td>
				</tr>
				<tr>
					<td align="right">密码：</td>
					<td> <input type="password" name="password" /> </td>
				</tr>
				<tr>
					<td align="right">重复密码：</td>
					<td> <input type="password" name="rePassword" /> </td>
				</tr>
				<tr>
					<td align="right">出生年月日：</td>
					<td> <input type="text" name="birthday" /> </td>
				</tr>
				<tr>
					<td align="right">性别：</td>
					<td> 男 <input type="radio" name="sex" /> 女 <input type="radio" name="sex" />
						<label for="sex" class="error"></label>
					</td>
				</tr>
				<tr>
					<td colspan="2" align="center"> <input type="submit" value="注册" /> </td>
				</tr>
			</table>
		</form>
	</body>
</html>