jQuery表单验证

 $(function(){
	        	$("#formCheck").validate({
	        		rules:{
	        			user:{
	        				required:true,
	        				minlength:6
	        			},
	        			password:{
	        				required:true,
	        				digits:true,
	        				minlength:6
	        			},
	        			email:{
	        				required:true,
	        				email:true
	        			},
	        			username:{
	        				required:true,
	        				maxlength:5
	        			},
	        			sex:{
	        				required:true
	        			}
	        		},
	        		messages:{
	        			user:{
	        				required:"用户名不能为空",
	        				minlength:"用户名不能少于6"
	        			},
	        			password:{
	        				required:"密码不能为空",
	        				digits:"密码必须为数字",
	        				minlength:"密码不能少于六位"
	        			},
	        			email:{
	        				required:"邮箱必填",
	        				email:"邮箱格式不正确"
	        			},
	        			username:{
	        				required:"姓名必填",
	        				maxlength:"不能多于5位"
	        			},
	        			sex:{
	        				required:"性别必须勾选"
	        			}
	        		}
//	        		errorElement:"label",
//	        		success:function(label){
//	        			label.text(" ").addClass("success");
//	        		}
	        	});
	        });
		</script>
		<script>
			$(function(){
				//1 创建数组保存对应的城市
				var city = new Array(3);
				city[0]=new Array("武汉","黄冈","襄阳");
				
				
			});
		</script>
	</head>
	<body>
		<table border="1px" align="center" width="1300px" cellpadding="0px" cellspacing="0px">
			<!--1.logo部分-->
			<tr>
				<td>
					<!--嵌套一个一行三列的表格-->
					<table border="1px" width="100%">
						<tr height="50px">
							<td width="33.3%">
								<img src="../img/logo2.jpg" height="47px" />
							</td>
							<td width="33.3%">
								<img src="../img/header.png" height="47px" />
							</td>
							<td width="33.3%">
								<a href="#">登录</a>
								<a href="#">注册</a>
								<a href="#">购物车</a>
							</td>
						</tr>
					</table>
				</td>				
			</tr>
			<!--2.导航栏部分-->
			<tr height="50px">
				<td bgcolor="black">
					    
					<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>    
					<a href="#">
						<font color="white">家用电器</font>
					</a>
				</td>
			</tr>
			<!--3.注册表单-->
			<tr>
				<td height="600px" background="../img/regist_bg.jpg">
					<!--嵌套一个十行二列的表格-->
					<form action="#" id="formCheck" method="get" name="regForm" onsubmit="return checkForm()">
						<table border="1px" width="750px" height="400px" align="center" cellpadding="0px" cellspacing="0px" bgcolor="white">
							<tr height="40px">
								<td colspan="2">
									<font size="4">会员注册</font>    USER REGISTER 
								</td>
							</tr>
							<tr>
								<td width="80px">
									用户名
								</td>
								<td>
									<input type="text" name="user" size="34px" id="user" onfocus="showTips('user','用户名必填')"<span id="userspan"></span>
								</td>
							</tr>
							<tr>
								<td>
									密码
								</td>
								<td>
									<input type="password" name="password" size="34px" id="password" /><span id="passwordspan"></span>
								</td>
							</tr>
							<tr>
								<td>
									确认密码
								</td>
								<td>
									<input type="password" name="repassword" size="34px" id="repassword"></input>
								</td>
							</tr>
							<tr>
								<td>
									Emaile
								</td>
								<td>
									<input type="text" name="email" size="34px" id="eamil"/>
								</td>
							</tr>
							<tr>
								<td>
									姓名
								</td>
								<td>
									<input type="text" name="username" size="34px"/>
								</td>
							</tr>
							<tr>
								<td>籍贯</td>
								<td>
									<select id="province">
										<option>===请选择===</option>
										<option value="">湖北</option>
										<option value="">湖南</option>
										<option value="">河北</option>
										<option value="">河南</option>
									</select>
									<select  id="city">
										
									</select>
								</td>
							</tr>
							<tr>
								<td>
									性别
								</td>
								<td>
									<input type="radio" name="sex" value="男"/>男
									<input type="radio" name="sex" value="女"/>女
								</td>
							</tr>
							<tr>
								<td>
									出生日期
								</td>
								<td>
									<input type="text" name="birthday" size="34px"/>
								</td>
							</tr>
							<tr>
								<td>
									验证码
								</td>
								<td>
									<input type="text" name="yzm" />
									<img src="../img/yanzhengma.png" />
								</td>
							</tr>
							<tr>
								<td colspan="2">
									<input type="submit" value="注册" />
								</td>
							</tr>
						</table>
					</form>
				</td>				
			</tr>
			<!--4.广告图片-->
			<tr>
				<td>
					<img src="../img/footer.jpg"  width="100%"/>
				</td>
			</tr>
			<!--5.友情链接和版权信息-->
			<tr>
				<td align="center">
					<a href="#">关于我们</a>
					<a href="#">联系我们</a>
					<a href="#">招贤纳士</a>
					<a href="#">法律声明</a>
					<a href="#">友情链接</a>
					<a href="#">支付方式</a>
					<a href="#">配送方式</a>
					<a href="#">服务声明</a>
					<a href="#">广告声明</a>
					<p>
						Copyright © 2016-2018 xx商城 版权所有 
					</p>
				</td>
			</tr>
		</table>
	</body>
</html>

  

原文地址:https://www.cnblogs.com/qurui1997/p/10487389.html