jQuery学习(八)——使用JQ插件validation进行表单校验
1、官网下载：http://bassistance.de/jquery-plugins/jquery-plugin-validation/
目录结构：
2、引入jquery库和validation插件
复制dist文件夹下的
和localization文件夹下的
放到WEB项目的js文件夹下提供使用
注意：validate是jQuery插件，必须在jQuery的基础上进行运行，导入顺序是jQuery库，validate库和国际化资源库（可选）
<!--依赖的JQuery库-->
<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
<!--引入validate校验库-->
<script type="text/javascript" src="../js/jquery.validate.min.js" ></script>
<!--引入国际化库，中文提示（可选）-->
<script type="text/javascript" src="../js/messages_zh.js" ></script>
3、常用校验类型：（其他类型网上查找即可）
| 校验类型 | 取值 | 描述 |
| required | true|false | 必填字段 |
| 邮件地址 | ||
| url | 路径 | |
| date | 数字 | 日期 |
| dateISO | 字符串 | 日期（YYYY-MM-dd） |
| number | 数字（负数，小数） | |
| digits | 整数 | |
| minlength | 数字 | 最小长度 |
| maxlength | 数字 | 最大长度 |
| rangelength | [minL,maxL] | 长度范围 |
| min | 最小值 | |
| max | 最大值 | |
| range | [min,max] | 值范围 |
| equalTo | jQuery表达式 | 两个值比较 |
| remote | url路径 | ajax校验 |
4、语法：
$(…).validate({
rules:{},
messages:{}
});
rules规则语法：
rules:{
字段名：校验器,
字段名：校验器
}
校验器语法：
语法：{校验器:值,校验器:值,…}
message提示语法：
message:{
字段名:{校验器:"提示",校验器:"提示",…}
}
5、案例：使用JQuery完成注册页面表单校验
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网站注册页面</title>
<style>
#contanier{
border: 0px solid white;
width: 1300px;
margin: auto;
}
#form{
height: 500px;
padding-top: 70px;
margin-bottom: 10px;
}
label.error{
background:url(../img/unchecked.png) no-repeat 10px 3px;
padding-left: 30px;
font-family:georgia;
font-size: 15px;
font-style: normal;
color: red;
}
label.success{
background:url(../img/checked.png) 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> <!--依赖的JQuery库-->
<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
<!--引入validate校验库-->
<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:4,
},
sex:{
required:true,
}
},
messages:{
user:{
required:"用户名不能为空",
minlength:"用户名不能少于3位！",
},
password:{
required:"密码不能为空！",
digits:"密码必须是整数！",
minlength:"密码不能少于6位！",
},
repassword:{
required:"确认密码不能为空！",
equalTo:"两次密码输入不一致！"
},
email:{
required:"邮箱不能为空！",
email:"邮箱格式不正确！"
},
username:{
required:"姓名不能为空！",
maxlength:"姓名不得多于4位！",
},
sex:{
required:"性别必须勾选！",
}
},
errorElement:"label", //用来创建错误提示信息标签,validate插件默认的就是label
success:function(label){ //验证成功后的执行的回调函数
//label指向上面那个错误提示信息标签label
label.text("") //清空错误提示信息
.addClass("success"); // 加上自定义的success类
}
})
});
</script>
</head>
<body>
<div id="contanier">
<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>
</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>
</body>
</html>
在谷歌浏览器内运行，效果如下：
jQuery学习(八)——使用JQ插件validation进行表单校验的更多相关文章
- day32(表单校验js和jquery表单校验)
校验用户名.密码.密码一直性. <style> .error { color: red } .success { color: green } </style> <scr ...
- 使用jQuery的validation插件实现表单校验
前端表单校验: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- 【JAVAWEB学习笔记】28_jqueryAjax：json数据结构、jquery的ajax操作和表单校验插件
Ajax-jqueryAjax 今天内容: 1.json数据结构(重点) 2.jquery的ajax操作(重点) 3.jquery的插件使用 一.json数据结构 1.什么是json JSON(J ...
- 第一百八十六节，jQuery，验证表单插件，Ajax 表单插件，验证和提交表单
jQuery,验证表单插件,Ajax 表单插件,验证和提交表单 HTML <form id="reg" method="post" action=&quo ...
- jQuery用面向对象的思想来编写验证表单的插件
本人的重点是怎么构建一个简单有效可扩展的jQuery表单验证插件,这篇文章没有教你怎么用 validate plugin.我们的重点在学习一些jQuery,Javascript面向对象编程的知识. 下 ...
- jQuery Validation Engine 表单验证，自定义规则验证方法
jQuery Validation Engine 表单验证说明文档http://code.ciaoca.com/jquery/validation-engine/ js加到jquery.validat ...
- JQuery中内容操作函数、validation表单校验
JQuery:内容体拼接(可以直接拼接元素节点和内容节点) JQuery实现: 方案1:A.append(B); == B.appendTo(A);A的后面拼接B 方案2: A.prepend(B); ...
- 2.12 学习总结 之 表单校验插件validate
一.说在前面 昨天 学习了ajax的相关知识 今天 学习表单校验插件validate, 并使用ajax 自定义校验规则 二.validate 插件 1.网络上有许多成熟的插件共使用者参考,插件就是将j ...
- jquery.validation.js 表单验证
jquery.validation.js 表单验证 官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuer ...
随机推荐
- DIV水平方向居中的几种方法
一.使用margin: 1 #center0 { 2 background: red; 3 margin: 0 auto; 4 } 或者: margin: auto; 这样的前提是父盒子里没有其他盒子 ...
- CSS3中的2D和3D转换知识介绍
一 2D转换 转换是CSS3中具有颠覆性的特征之一,可以实现元素的位移.旋转.变形.缩放,甚至支持矩阵方式,配合即将学习的过渡和动画知识,可以取代大量之前只能靠Flash才可以实现的效果. 1.移动 ...
- Python介绍与学习
Python是一种面向对象的解释型计算机程序设计语言,由荷兰人Guido van Rossum于1989年发明,第一个公开发行版发行于1991年. Python是纯粹的自由软件, 源代码和解释器CPy ...
- libvirtd.service
[root@kvm-server ~]# systemctl status libvirtd.service ● libvirtd.service - Virtualization daemon Lo ...
- hadoop中HDFS文件系统 nameNode出现的问题 nameNode无法打开
1,修改core-site.xml文件,先改成localhost,将所有进程关闭stop-all.sh(或者是先关闭所有进程,然后再修改文件),然后重启,在修改core-site.xml文件成ip地址 ...
- poj2411 Mondriaan's Dream （状压dp+多米诺骨牌问题）
这道题的解析这个博客写得很好 https://blog.csdn.net/shiwei408/article/details/8821853 大致意思就是我们可以只处理两行之间的关系,然后通过这两个关 ...
- MVC总结
一.转自https://zhuanlan.zhihu.com/p/35680070 MVC无人不知,可很多程序员对MVC的概念的理解似乎有误,换言之他们一直在错用MVC,尽管即使如此软件也能被写出来, ...
- jquery中的jsonp跨域调用
jquery jsonp跨域调用接口
- CF735E Ostap and Tree
比较毒瘤的树形DP,子状态难想.这是主要是搬运一篇题解. 用\(f[i][j]\)表示\(i\)的子树中离\(i\)最近黑点的距离为\(j\),且距离超过\(j\)的点都被满足的方案数.转移时新建一个 ...
- tomcat的连接数与线程池
在使用tomcat时,经常会遇到连接数.线程数之类的配置问题,要真正理解这些概念,必须先了解Tomcat的连接器(Connector). 在前面的文章中写到过:Connector的主要功能,是接收连接 ...