jQuery Validation 插件

优点:
1.表单验证非常简单方便,并且提供了许多配置项目
2.国际化,可以自定义提示信息

命令行安装

//初始化bower
bower init

//使用bower安装jquery
bower install jquery --save-dev

//使用bower安装jquery-validate插件
bower install jquery-validate --save-dev

//使用bower安装angular
bower install angular --save-dev

最简单的效果:
<form id="demoForm">
<fieldset>
<legend>用户登录</legend>
<p>
<label for="username" style="display: inline-block;width: 80px;">用户名:</label>
<input type="text" name="username" id="username"/>
</p>
<p>
<label for="password" style="display: inline-block;width: 80px;">密码:</label>
<input type="password" name="password" id="password"/>
</p>
<p>
<input type="submit"/>
</p>
</fieldset>
</form>

<!-- 要先引入jquery插件,再引入jquery.validate -->
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/jquery-validation/dist/jquery.validate.min.js"></script>
<script>
$('#demoForm').validate({
rules: { //rules里面的username和password都是name的属性值,而不是id
username: {
required: true,
minlength:2,
maxlength:10
},
password: {
required:true,
minlength:2,
maxlength:16
}
},
messages: {
username: {
required: '必须填写用户名',
minlength: '不低于2位',
maxlength: '不大于10位'
},
password: {
required:'必须填写密码',
minlength: '不低于2位',
maxlength: '不低于16位'
}
}
});
</script>

注意:rules里面的username和password都是name的属性值,而不是id

//点击提交按钮不提交
$('#demoForm').validate({
debug:true
});

基本验证方法
required 必填
remote:'remote.php/remote.json' 远程校验
minlength 最小长度
maxlength 最大长度
rangelength: [2, 10] 长度
min 最小值(代表数字的值)
max 最大值(代表数字的值)
range: [2, 10] 值范围(代表数字的值)(数字在2-10之间)
email:true Email格式
url:true URL格式
date:true 日期
dataISO:true 日期(格式是:yyy-mm-dd 或者 yyy/mm/dd)
number 数字
digits 整数
equlaTo 与另一个元素值相等

高级API
valid()方法:检查表单是否验证通过或某些元素是否有效

$('#check').click(function () {
console.log($('#demoForm').valid() ? '表单填写正确' : '表单填写错误');
});

rules()方法(浏览器控制台输入验证console)
1.rules() 获取表单某一元素的校验规则
$('#username').rules();
//Object {required: true, rangelength: Array[2], remote: "remote.json"}

2.rules('add', rules) 向表单增加校验规则
$('#username').rules('add', {minlength: 2, maxlength:10});
//Object {required: true, rangelength: Array[2], minlength: 2, maxlength: 10, remote: "remote.json"}

3.rules('remove', rules) 删除表单元素校验规则
$('#username').rules('remove', 'minlength maxlength')
//Object {minlength: 2, maxlength: 10}
$('#username').rules()
//Object {required: true, rangelength: Array[2], remote: "remote.json"}

Validator对象

var validator = $('#form').validate({});
validate()方法返回Validator对象
Validator对象的方法:
Validator.form() 验证表单是否有效,返回 true/false
Validator.element(element) 验证某个元素是否有效,返回true/false
Validator.resetForm() 把表单恢复到验证前原来的状态(错误信息会被清除掉)
Validator.showErrors(errors) 针对某个元素显示特定的错误信息
Validator.numberOfInvalids() 返回无效的元素数量(要触发验证var bool = $('#demoForm').valid(),才能统计数量)

[红字]提示:在console控制台,shift+enter才是换到下一行,enter是提交

validator.showErrors({
username:'你填错了,哈哈'
});

Validator对象的静态方法 — — 直接调用
$.validator.addMethod(name,method[,message]) 增加自定义的验证方法
$.validator.format(template,argument,argumentN...) 格式化字符串,用参数代替模板中的{n}
$.validator.setDefaults(options) 修改插件默认设置
$.validator.addClassRules(name,rules) 为包含class属性名批量增加验证类型(下图为实例,给classname为“txt”的元素添加验证类

型)

validate()方法配置项(jquery-validate插件的核心内容)
submitHandler通过验证后运行的函数,可以加上表单提交方法
invalidHandler无效表单提交后运行的函数
ignore对某些元素不进行验证
rules定义校验规则
messages定义提示信息
groups对一组元素的验证,用一个错误提示,用errorPlacement控制把出错信息放在那实例调用:
submitHandler:function(from){
//表单提交的方式
from.submit();

//表单序列化
console.log($(form).serialize());
}

ignore:"#hh" 对类hh不进行校验

每个rules的配置方法都有一个默认depends:function(element){条件},表示当函数满足条件时,才开始检验该配置方法<br>
当配置方法有参数时可为该方法添加参数param:x,当depends中函数满足条件时才传入参数进行配置

username:{
required:{
depends:function(element){
return $("#password").is(":filled"); //只有当密码被填写时才验证用户名
}
}
}

更多参考API文档。。。。

jquery-validate插件的更多相关文章

  1. jquery.validate插件在booststarp中的运用

    现在在网络上已经可以找到很多基于bootstarp的表单认证,但是验证的都不全面的,下载后,我们还要理解作者的思路然后进行修改添加,这种修改方式往往适合学习,时间很多的时候.但是我们很多时候是没有时间 ...

  2. jQuery Validate 插件

    >>>>>>>>>>>>>>>>>>>>>>>>> ...

  3. jquery validate 插件使用小结

    项目中整合了jquery validate插件,仿照别人的使用写了我的表单验证,结果不起作用.然后就各种找原因. 在网上下了jquery validate插件的完整包,看了看里边的例子,跟我的使用貌似 ...

  4. 【jQuery】(6)---jQuery validate插件

    jQuery  validate插件 一.导入js库                                      先导入jQuery库,然后导入Validate插件,如果是中文提示还需要 ...

  5. JQuery Validate插件与实现

    菜鸟拙见,望请纠正 一:效果展示:以下是两个注册表单验证,左边使用Jquery validate插件实现,右边是自己用JQuery实现,效果差不多,但个人推荐用插件,毕竟前人栽了树而且长大了后人当然好 ...

  6. jQuery Validate 插件为表单提供了强大的验证功能

    之前项目开发中,表单校验用的jQuery Validate 插件,这个插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的 ...

  7. 使用JQuery.Validate插件来校验页面表单有效性

    使用JQuery.Validate插件来校验页面表单有效性​1. [代码] 常见的注册表单元素 <form action="#" method="post" ...

  8. jQuery Validate插件实现表单强大的验证功能

    转自:http://www.jb51.net/article/76595.htm jQuery Validate插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来编写用户自 ...

  9. 前端验证,jquery.validate插件

    jQuery Validate 简介: jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用 ...

  10. 表单验证神器——jquery.validate插件

    jquery.validate.js插件应用举例,ajax方式提交数据. html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tr ...

随机推荐

  1. T-Sql操作Xml数据(转)

    T-Sql操作Xml数据 一.前言 SQL Server 2005 引入了一种称为 XML 的本机数据类型.用户可以创建这样的表,它在关系列之外还有一个或多个 XML 类型的列:此外,还允许带有变量和 ...

  2. P4014 分配问题

    \(\color{#0066ff}{题目描述}\) 有 \(n\) 件工作要分配给 \(n\) 个人做.第 \(i\) 个人做第 \(j\) 件工作产生的效益为 \(c_{ij}\) .试设计一个将 ...

  3. CF581B Luxurious Houses 模拟

    The capital of Berland has n multifloor buildings. The architect who built up the capital was very c ...

  4. kuangbin专题十二 HDU1074 Doing Homework (状压dp)

    Doing Homework Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)To ...

  5. Windows Server上用命令来起停IIS站点

    平时,在Server上管理IIS,都是在界面上进行一些配置,然后再做一些start和stop操作... 对于配置的人来说,会做一些重复步骤,所以适当的使用命令,能大大提高效率. 下面命令是自己之前使用 ...

  6. POJ-1128-Frame Stacking

    链接:https://vjudge.net/problem/POJ-1128 题意: 每张图片上面画了一些边框,给出这些边框叠在一起后的图片,图片边框一定是由一个字母表示并且每条边至少三个字符,输入保 ...

  7. lintcode - 统计比给定整数小的数的个数(两种方法)

    class Solution { public: /* * @param A: An integer array * @param queries: The query list * @return: ...

  8. 搭建 flask 应用

    参考文档:http://docs.jinkan.org/docs/flask/quickstart.html#a-minimal-application 1.使用Pycharm创建Flask应用 fr ...

  9. Dev Express Report 学习总结(三)关于子报表Sub-Report的使用

    子报表即在一个Report(主报表)中嵌入另一个Report(子报表),从理论上来讲,任何一个Report都可以作为一个子报表,但在实际使用过程中,只有主报表和子报表构成一对多关系时才会使用子报表.使 ...

  10. spark on yarn,client模式时,执行spark-submit命令后命令行日志和YARN AM日志

    [root@linux-node1 bin]# ./spark-submit \> --class com.kou.List2Hive \> --master yarn \> --d ...