jQuery表单验证

最新推荐文章于 2022-03-24 13:45:10 发布

Sword_A

最新推荐文章于 2022-03-24 13:45:10 发布

阅读量590

点赞数

文章标签： jquery class styles stylesheet javascript email

本文链接：https://blog.csdn.net/yuluo727282752/article/details/7413027

版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>

<!--引入jQuery类库文件-->
<script language="javascript" type="text/javascript" src="../js/jquery-1.7.1.min.js"></script>

<link rel="stylesheet" type="text/css" media="screen" href=".././include/jquery-validation-1.9.0/demo/css/screen.css" />

<script src=".././include/jquery-validation-1.9.0/lib/jquery.js" type="text/javascript"></script>
<script src=".././include/jquery-validation-1.9.0/lib/jquery.metadata.js" type="text/javascript"></script>
<script src=".././include/jquery-validation-1.9.0/jquery.validate.js" type="text/javascript"></script>
<!--CSS-->


<style type="text/css">
.cmxform fieldset p.error label { color: red; }
div.container {
	background-color: #eee;
	border: 1px solid red;
	margin: 5px;
	padding: 5px;
}
div.container ol li {
	list-style-type: disc;
	margin-left: 20px;
}


 div.container { display: none; }  
.container label.error {
	display: inline;
}
form.cmxform { width: 30em; }
form.cmxform label.error {
	display: block;
	margin-left: 1em;
	width: auto;
}
</style>

</head>
	
	<script type="text/javascript" language="JavaScript">

		
		
		$.validator.setDefaults({
			
			submitHandler:function(){
				//alert("取消按钮");				
			}
		});
			
			$(function(){
			/*
			 * form1的验证规则
			 * 
			 * 
			 */
				$("#form1").validate({
					rules:{
						user:{
							required:true,
							minlength:6
							
						},
						
						password:{
							required:true,
							minlength:6
							
						}
	
					},
					messages:{
						
						user:{
							required:"用户名不能为空",
							minlength:"用户名长度不能小于6位!"
						},
						password:{
							required:"密码不能为空",
							minlength:"密码长度不能小于6位"
							
						}
						
					}
					
				});
				
				/*
				 * 
				 * 
				 * form2
				 */
				
				
				var container = $('div.container');
				
				var validator=$("#form2").validate({
					
					errorContainer:container,
					errorLabelContainer:$("ol",container),
					wrapper:'li',
					meta:"validate"
										
				});
				
				$(".cancel").click(function(){
					
					validator.resetForm();
					
				});
			
			});
	
	
	</script>




<body>

<div id="main">

<form method="get" class="cmxform" id="form1" action="">
	<fieldset>
		<legend>用户登录</legend>
		<p>
			<label>用户名</label>
			<input name="user" title="Please enter your username (at least 3 characters)" class="{required:true,minlength:3}" />
		</p>
		<p>
			<label>密码</label>
			<input type="password" maxlength="12" name="password" title="Please enter your password, between 5 and 12 characters" class="{required:true,minlength:5}" />
		</p>
		<div class="error">
		</div>
		<p>
			<input class="submit" type="submit" value="Login"/>
		</p>
	</fieldset>
</form>
	
	
<!-- our error container -->
<div class="container">	
	<h4>你有严重的错误表单提交,请见下文了解详情</h4>
	<ol>
		<li><label for="email" class="error">请输入你的邮件地址 
</label></li>
		<li><label for="phone" class="error">请输入您的电话号码</label></li>
		<li><label for="address" class="error">请输入您的地址</label></li>
		<li><label for="avatar" class="error">请选择一幅图像</label></li>
		<li><label for="cv" class="error">请选择一个文件</label></li>
	</ol>
</div>

<form class="cmxform" id="form2" method="get" action="">
	<fieldset>
		<legend>注册</legend>
		<p>
			<label for="email">Email：</label>
			<input id="email" name="email" class="{validate:{required:true,email:true}}" />
		</p>
		<p>
			<label for="agree">请选择你的学历</label>
			<select id="color" name="color" title="请选择你的学历" class="{validate:{required:true}}">
				<option></option>
				<option>本科</option>
				<option>研究生</option>
				<option>博士</option>
				<option>大专</option>
				<option>其他</option>
			</select>
		</p>
		<p>
			<label for="phone">联系方式：</label>
			<input id="phone" name="phone" class="some styles {validate:{required:true,number:true, rangelength:[2,8]}}" />
		</p>
		<p>
			<label for="address">地址：</label>
			<input id="address" name="address" class="some other styles {validate:{required:true,minlength:3}}" />
		</p>
		<p>
			<label for="avatar">上传头像：</label>
			<input type="file" id="avatar" name="avatar" class="{validate:{required:true,accept:true}}" />
		</p>
		<p>
			<label for="agree">同意XXXXX协议</label>
			<input type="checkbox" class="checkbox" id="agree" title="Please agree to our policy!" name="agree" class="{validate:{required:true}}" />
		</p>
		<p>
			<label for="cv">简历：</label>
			<input type="file" id="cv" name="cv" class="{validate:{required:true,accept:'docx?|txt|pdf'}}" />
		</p>
		<p>
			<input class="submit" type="submit" value="Submit"/>
			<input class="cancel" type="submit" value="Cancel"/>
		</p>
	</fieldset>
</form>

<div class="container">
	<h4>注册错误 ，重新填写!!</h4>
</div>



</div>



</body>
</html>

Sword_A

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery表单验证

.cmxform fieldset p.error label { color: red; }div.container { background-color: #eee; border: 1px solid red; margin: 5px; padding: 5px;}div.container ol li { list-style-type: disc; margin-le
复制链接

扫一扫