jQuery中实现validation表单校验

最新推荐文章于 2022-03-22 23:23:37 发布

疆~

最新推荐文章于 2022-03-22 23:23:37 发布

阅读量246

点赞数

文章标签： jQuery

本文链接：https://blog.csdn.net/qq_40323256/article/details/89293272

版权

jQuery 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

js/jquery-3.3.1.js， jquery.validate.min.js和messages_zh.min.js网盘下载：

链接：https://pan.baidu.com/s/1l1twG168UTTYmurWyEjc5Q
提取码：qdhe


<!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:{
						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
					}
				},
				messages:{
					username:{
						required:"这个是必须填写的",
						minlength:"最少输入3个字符",
						maxlength:"最多输入6个字符"
					},
					sex:{
						required:"性别必须选择"
					}
				}
			};
			$(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>

疆~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery中实现validation表单校验

js/jquery-3.3.1.js，jquery.validate.min.js和messages_zh.min.js网盘下载：链接：https://pan.baidu.com/s/1l1twG168UTTYmurWyEjc5Q提取码：qdhe<!DOCTYPE html><html> <head> <meta charset...
复制链接

扫一扫