zoukankan      html  css  js  c++  java
  • 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>
    

      

  • 相关阅读:
    call/cc 总结 | Scheme
    用call/cc合成所有的控制流结构
    词法作用域 vs 动态作用域
    数论部分第二节:埃拉托斯特尼筛法
    1022: [SHOI2008]小约翰的游戏John【Nim博弈,新生必做的水题】
    C++面向对象作业1
    数论部分第一节:素数与素性测试【详解】
    基数排序与桶排序,计数排序【详解】
    计蒜客:百度的科学计算器(简单)【python神解】
    优质免费在线学习网站【自用】
  • 原文地址:https://www.cnblogs.com/qurui1997/p/10487389.html
Copyright © 2011-2022 走看看