validate完成注册页面表单校验

男娘i 2022-04-06 08:20 212阅读 0赞

需要引入的包都在代码里

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>网站注册页面</title>
    		<style>
    			#contanier{
    				border: 0px solid white;
    				width: 1300px;
    				margin: auto;
    			}
    			
    			#top{
    				border: 0px solid white;
    				width: 100%;
    				height: 50px;
    			}
    			#menu{
    				border: 0px solid white;
    				height: 40px;
    				background-color: black;
    				padding-top: 10px;
    				margin-bottom: 15px;
    				margin-top: 10px;
    			}
    			.top{
    				border: 0px solid white;
    				width: 405px;
    				height: 100%;
    				float: left;
    				padding-left: 25px;
    			}
    			#top1{
    				padding-top: 15px;
    			}
    			#bottom{
    				margin-top: 13px;
    				text-align: center;
    			}
    			
    			#form{
    				height: 500px;
    				padding-top: 70px;
    				background-image: url(../img/regist_bg.jpg);
    				margin-bottom: 10px;
    			}
    			a{
    				text-decoration: none;
    			}
    			
    			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;
    			}
    			
    			#father{
    				border: 0px solid white;
    				padding-left: 307px;
    			}
    			
    			#form2{
    				border: 5px solid gray;
    				width: 660px;
    				height: 450px;
    			}
    			
    		</style>
    		<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
    		
    		<script type="text/javascript" src="../js/jquery.validate.min.js" ></script>
    		
    		<script type="text/javascript" src="../js/messages_zh.js" ></script>
    		<script>
    			$(function(){
    				$("#registForm").validate({
    					rules:{
    						user:{
    							required:true,
    							minlength:3
    						},
    						password:{
    							required:true,
    							digits:true,
    							minlength:6
    						},
    						repassword:{
    							required:true,
    							equalTo:"[name='password']"
    						},
    						email:{
    							required:true,
    							email:true
    						},
    						username:{
    							required:true,
    							maxlength:5
    						},
    						sex:{
    							required:true
    						}
    					},
    					messages:{
    						user:{
    							required:"用户名不能为空!",
    							minlength:"用户名不得少于3位!"
    						},
    						password:{
    							required:"密码不能为空!",
    							digits:"密码必须是整数!",
    							minlength:"密码不得少于6位!"
    						},
    						repassword:{
    							required:"确认密码不能为空!",
    							equalTo:"两次输入密码不一致!"
    						},
    						email:{
    							required:"邮箱不能为空!",
    							email:"邮箱格式不正确!"
    						},
    						username:{
    							required:"姓名不能为空!",
    							maxlength:"姓名不得多于5位!"
    						},
    						sex:{
    							required:"性别必须勾选!"
    						}
    					},
    					errorElement: "label", //用来创建错误提示信息标签,validate插件默认的就是label
    					success: function(label) { //验证成功后的执行的回调函数
    						//label指向上面那个错误提示信息标签label
    						label.text(" ") //清空错误提示消息
    							.addClass("success"); //加上自定义的success类
    					}
    				});
    			});
    		</script>
    	</head>
    	<body>
    		<div id="contanier">
    			<div id="top">
    				<div class="top">
    					<img src="../img/logo2.png" height="47px"/>
    				</div>
    				<div class="top">
    					<img src="../img/header.png" height="45px" />
    				</div>
    				<div class="top" id="top1">
    					<a href="#">登录</a>
    					<a href="#">注册</a>
    					<a href="#">购物车</a>
    				</div>
    			</div>
    			<div id="menu">
    				<a href="#"><font size="5" color="white">首页</font></a>             
    				<a href="#"><font color="white">电脑办公</font></a>      
    				<a href="#"><font color="white">手机数码</font></a>      
    				<a href="#"><font color="white">鞋靴箱包</font></a>	
    			</div>
    			<div id="form">
    				<form action="#" method="get" id="registForm">
    					<div id="father">
    						<div id="form2">
    							<table border="0px" width="100%" height="100%" align="center" cellpadding="0px" cellspacing="0px" bgcolor="white">
    								<tr>
    									<td colspan="2" >
    										          
    										<font size="5">会员注册</font>   USER REGISTER 
    									</td>
    								</tr>
    								<tr>
    									<td width="180px">
    										      
    										      
    										   
    										<label for="user" >用户名</label>
    									</td>
    									<td>
    										<em style="color: red;">*</em>   <input type="text" name="user" size="35px" id="user"/>
    									</td>
    								</tr>
    								<tr>
    									<td>
    										      
    										      
    										   
    										密码
    									</td>
    									<td>
    										<em style="color: red;">*</em>   <input type="password"  name="password" size="35px" id="password" />
    									</td>
    								</tr>
    								<tr>
    									<td>
    										      
    										      
    										   
    										确认密码
    									</td>
    									<td>
    										<em style="color: red;">*</em>   <input type="password" name="repassword" size="35px"/>
    									</td>
    								</tr>
    								<tr>
    									<td>
    										      
    										      
    										   
    										Email
    									</td>
    									<td>
    										<em style="color: red;">*</em>   <input type="text" name="email" size="35px" id="email"/>
    									</td>
    								</tr>
    								<tr>
    									<td>
    										      
    										      
    										   
    										姓名
    									</td>
    									<td>
    										<em style="color: red;">*</em>   <input type="text" name="username" size="35px"/>
    									</td>
    								</tr>
    								<tr>
    									<td>
    										      
    										      
    										   
    										性别
    									</td>
    									<td>
    										<span style="margin-right: 155px;">
    											<em style="color: red;">*</em>   <input type="radio" name="sex" value="男"/>男
    											<input type="radio" name="sex" value="女"/>女<em></em>
    											<label for="sex" class="error" style="display: none;"></label>
    										</span>
    										
    									</td>
    								</tr>
    								<tr>
    									<td>
    										      
    										      
    										   
    										出生日期
    									</td>
    									<td>
    										<em style="color: red;">*</em>   <input type="text" name="birthday"  size="35px"/>
    									</td>
    								</tr>
    								<tr>
    									<td>
    										      
    										      
    										   
    										验证码
    									</td>
    									<td>
    										<em style="color: red;">*</em>   <input type="text" name="yanzhengma" />
    										<img src="../img/yanzhengma.png" style="height: 18px;width: 85px;"/>
    									</td>
    								</tr>
    								<tr>
    									<td colspan="2">
    										      
    										      
    										      
    										      
    										      
    										      
    										<input type="submit" value="注      册" height="50px"/>
    									</td>
    								</tr>
    							</table>
    						</div>
    					</div>
    				</form>
    			</div>
    			<div>
    				<img src="../img/footer.jpg"  width="100%"/>
    			</div>
    		</div>
    	</body>
    </html>