使用jquery的validate插件实现表单校验

最新推荐文章于 2024-06-29 14:47:07 发布

ginger_mr

最新推荐文章于 2024-06-29 14:47:07 发布

阅读量701

点赞数

分类专栏： Callback

本文链接：https://blog.csdn.net/qq_40332952/article/details/104475175

版权

Callback 专栏收录该内容

51 篇文章 2 订阅

订阅专栏

使用jquery的validate插件实现表单校验

validate介绍

一款优秀的表单验证插件——validation插件
特点：
1.内置验证规则：拥有必填、数字、email、url和信用卡号码等19类内置验证规则
2.自定义验证规则：可以很方便的自定义验证规则
3.简单强大的验证信息提示：默认了验证信息提示，并提供自定义覆盖默认提示信息的功能
4.实时验证：可以通过keyup或bulr事件触发验证，而不仅仅在表单提交的时候验证。
下载：
http://bassistance.de/jquery-plugins/jquery-plugin-validation/

在这里插入图片描述
导入指定的validate就可以使用了

代码演示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#fathre{
				border:1px solid red;
				width:1320px;
				height:757px;
				margin:auto;
			}
			#fathre2{
				border:1px solid green;
				width:1320px;
				height:50px;
			}
			.son_1{
				border:1px solid black;
				width:438px;
				height:50px;
				/*div*/
				float:left;
			}
			#biaoqian{
				height:35px;
				padding-top:15px;
			}
			#title{
				border:1px solid blue;
				width:1320px;
				height:50px;
				background-color:black;
			}
			#clear{
				/*清除浮动*/
				clear:left;
			}
			#checkout{
				border:1px solid red;
				width:1320px;
				height:500px;
				background-image:url(../img/regist_bg.jpg);
				padding-top:50px;
			}
			#button{
				border:1px solid red;
				width:1320px;
				height:80px;
			}
			ul li{
				display: inline;
				color:white;
			}
			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;
			}
		</style>
		<!--导入jquery库-->
		<script src="../js/jquery-1.11.0.min.js"></script>
		<!--导入vaildate库要先导入jquery库因为是基于jquery的-->
		<script src="jquery.validate.min.js"></script>
		<script>
			
			$(function(){
				$("#checkform").validate({
						rules:{
							username:{
								required:true,
								minlength:6
							},
							password:{
								required:true,
								minlength:6
							},
							repassword:{
								required:true,
								equalTo:"[name=password]"
							},
							email:{
								required:true,
								email:true
							},
							name:{
								required:true,
								minlength:3
							},
							sex:{
								required:true
							}
							
						},
						messages:{
							username:{
								required:"用户名不能为空!",
								minlength:"用户名不能少于6位!"
							},
							password:{
								required:"密码不能为空!",
								minlength:"密码不能少于6位!"
							},
							repassword:{
								required:"确认密码不能为空!",
								equalTo:"两次密码不一致!"
							},
							email:{
								required:"邮箱不能为空!",
								email:"邮箱格式不正确!"
								
							},
							name:{
								required:"姓名不能为空!",
								minlength:"姓名不能少于3位!"
							},
							sex:{
								required:"性别必选!"
							}
						},
						 //用来创建提示信息标签,validate插件默认的就是label,就是把提示信息放到该标签中
						 //这里我换成了input测试了,后面就是一个文本框
						errorElement:"label",
						success: function(label) { //验证成功后的执行的回调函数
						//label指向上面那个错误提示信息标签label
						label.text("  ") //清空错误提示消息
							.addClass("success"); //加上自定义的success类
					}
						
				});
			});
		</script>
	</head>
	<body>
		<div id="fathre">
			<div id="father2">
			<div class="son_1">
				<img src="../img/logo2.png" width="200px" height="40px"/>
			</div>
			<div class="son_1" align="center">
				<img src="../img/header.png" width="300px" height="40px" />
			</div>
			<div id="biaoqian" class="son_1" align="center">
				<a href="#">登录</a>
				<a href="#">注册</a>
				<a href="#">购物车</a>
			</div>
			</div>
			<div id="clear"></div>
			<div id="title">
				<ul>
			  <font size="5"><li>首页</li></font>&nbsp;
					<li>手机数码</li>&nbsp;
					<li>电脑办公</li>&nbsp;
					<li>鞋靴箱包</li>
				</ul>
			</div>
			<div id="checkout" align="center">
				<form  action="#" method="" id="checkform">
				<div  style="background-color:white;width:500px;height:400px;border:1px;">
					<table border="1px" width="500px" height="400px" cellspacing="0px">
						<!--创建一个十行两列表格-->
						<tr height="10%" >
							
							<td colspan="2">
								&nbsp;&nbsp;
								<strong><font size="4">会员注册</font>&nbsp;&nbsp;USER REGISTER</strong>
							</td>
							
						</tr>
						<tr height="10%" >
							<td width="25%" height="10%">&nbsp;&nbsp;
								用户名
							</td>
							<td width="70%">
								<font color="red">*</font>
								<input type="text" name="username"/>
							</td>
						</tr>
						<tr height="10%" >
							<td width="25%" height="10%">&nbsp;&nbsp;
								密码
							</td>
							<td >
								<font color="red">*</font>
								<input type="text" name="password"/>
							</td>
						</tr>
						<tr height="10%" >
							<td width="25%" height="10%">&nbsp;&nbsp;
								确认密码
							</td>
							<td >
								<font color="red">*</font>
								<input type="text" name="repassword"/>
							</td>
						</tr>
						<tr height="10%" >
							<td width="25%" height="10%">&nbsp;&nbsp;
								Email
							</td>
							<td >
								<font color="red">*</font>
								<input type="text" name="email"/>
							</td>
						</tr>
						<tr height="10%" >
							<td width="25%" height="10%">&nbsp;&nbsp;
								姓名
							</td>
							<td >
								<font color="red">*</font>
								<input type="text" name="name"/>
							</td>
						</tr>
						<tr height="10%" >
							<td width="25%" height="10%">&nbsp;&nbsp;
								性别
							</td>
							<td >
								<font color="red">*</font>
								<input type="radio" name="sex"/>男
								<input type="radio" name="sex"/>女
								<label for="sex" class="error" style="display:none;"></label>
							</td>
						</tr>
						<tr height="10%" >
							<td width="25%" height="10%">&nbsp;&nbsp;
								出生日期
							</td>
							<td >
								<font color="red">*</font>
								<input type="text" name="birthday"/>
							</td>
						</tr>
						<tr height="10%" >
							<td width="25%" height="10%">&nbsp;&nbsp;
								验证码
							</td>
							<td >
								<font color="red">*</font>
								<img src="../img/yanzhengma.png" />
							</td>
						</tr>
						<tr height="10%" >
							<td colspan="2" align="center">
								<input type="submit" value="注册"/>
							</td>
						</tr>
					</table>
				</div>
				</form>
			</div>
			<div id="button">
				<img src="../img/footer.jpg" width="100%" height="100%"/>
			</div>
				<div 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>	
				</div>
		</div>
	</body>
</html>