jQuery中实现validation表单校验

偏执的太偏执、 2021-09-18 23:06 400阅读 0赞

js/jquery-3.3.1.js， jquery.validate.min.js和messages\_zh.min.js网盘下载：

链接：[https://pan.baidu.com/s/1l1twG168UTTYmurWyEjc5Q][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>

![20190414101318458.gif][]

[https_pan.baidu.com_s_1l1twG168UTTYmurWyEjc5Q]: https://pan.baidu.com/s/1l1twG168UTTYmurWyEjc5Q
[20190414101318458.gif]: /images/20210725/559da650e32b49079d4953bc0e423142.png