JQuery 插件概述：

插件（plugin）也被成为扩展，是一种遵循一定规范的应用程序编写出来的程序，JQuery有大量

现成的插件。

一句话，JQuery插件就是别人依照Jquery官方规范写好的各种功能，我们可以拿过来直接用，而不需要再去写。

jquery-validation-1.15.0

下载链接http://jqueryvalidation.org/

这个插件有三个主要方法

1、validate()

　　用于验证表单，也是该插件最核心的方法

2、valid()

　　验证表单是否通过

3、rules()

　　为一个表单控件、查看、新增、移除规则

增加了一些选择器

:blank

　　选择所有没有值或者值为空白的表单控件

:filled

　　选择所有填写了非空值的表单控件

:unchecked

　　与JQuery提供的:checked选择器相反

配置选项

1）rules：为各种表单添加验证规则

　　$("form1").validate({

　　　　rules{

　　　　　　控件1：{

　　　　　　　　　　验证规则1，验证规则2，验证规则3，验证规则4

　　　　　　　　},

　　　　　　控件2：{

　　　　　　　　　　验证规则1，验证规则2，验证规则3，验证规则4

　　　　　　　　　　......

　　　　　　　　},

　　　　　　　　......

　　　　　　　}

　　　　});

在validation的包里面找到了了一个本地化的文件里面应该是所有的规则了

$.extend( $.validator.messages, {

    required: "这是必填字段",

    remote: "请修正此字段",

    email: "请输入有效的电子邮件地址",

    url: "请输入有效的网址",

    date: "请输入有效的日期",

    dateISO: "请输入有效的日期 (YYYY-MM-DD)",

    number: "请输入有效的数字",

    digits: "只能输入数字",

    creditcard: "请输入有效的信用卡号码",

    equalTo: "你的输入不相同",

    extension: "请输入有效的后缀",

    maxlength: $.validator.format( "最多可以输入 {0} 个字符" ),

    minlength: $.validator.format( "最少要输入 {0} 个字符" ),

    rangelength: $.validator.format( "请输入长度在 {0} 到 {1} 之间的字符串" ),

    range: $.validator.format( "请输入范围在 {0} 到 {1} 之间的数值" ),

    max: $.validator.format( "请输入不大于 {0} 的数值" ),

    min: $.validator.format( "请输入不小于 {0} 的数值" )

} );

使用：

1) required：

name属性值:'required'

2) minlength

说明：最小字符长度

使用: minlength:数字

3) maxlength

说明：最大字符长度

使用：maxlength：数字

4) rangelength

说明：字符长度必须介于某个区间

使用：rangelength:[5,10]

5) min

说明：输入的最小值

使用：min:5

6) max

说明：输入的最大值

使用max:10

7) range

说明：输入的值必须介于某个区间

使用：range:[5,10]

8) number

说明：必须是合法数字

使用：number:true

9)digits:

说明：必须是整数

使用：digits：true

10) email

说明：必须是email正确格式的电子邮件

使用：email：true

11) url

说明：必须输入正确格式的网址

使用：url：true

12) equalTo

说明：输入值必须和给定选择器的字段的值相同

使用：equalTo:'选择器'

13)remote

使用：ajax方法调用服务器断脚本，验证输入值

使用：remote：'服务器端脚本'

例如：remote: check.php默认会提交当前验证的值到远程地址，如果需要提交其他的值，可以使用data选项

remote：{

　　　　url:'checkPassword.do',

　　　　type:'post',

　　　　data:{

　　　　　　　　username:'qwerty',

　　　　　　　　password:'123456'

　　　　　}

}

参数与值和$.ajax方法相同

还有一些验证规则需要引入additional-methods.min.js,这里面添加了很多验证规则，

14) extension

说明：验证上传的文件的后缀名

使用：extension:合法的后缀名（不带点），多个的后缀明之间用竖线隔开

例如:extension:'cpp|java'

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script type="text/javascript" src="../js/jquery-1.12.1.js"></script>

<script type="text/javascript" src="../js/validation/jquery.validate.js"></script>

<script type="text/javascript">

    $(document).ready(function()

    {

        $("#form1").validate({

            rules: {

                field1:{

                    required:true

                    /*如果只有一个验证规则则可以

                    field：'required',就不需要用对象了*/

                },

                field2:{

                    required:true

                },

                field3:{

                    required:true,

                    //要验证minlength则必须加上required规则

                    //否则它就不验证

                    minlength:2,

                    maxlength:6

                },

                field4:{

                    required:true,

                    rangelength:[4,6]

                },

                field5:{

                    required:true,

                    min:5,

                    max:10

                },

                field6:{

                    required:true,

                    range:[5,10]

                },

                field7:{

                    required:true,

                    number:true

                },

                field8:{

                    required:true,

                    digits:true

                },

                field9:{

                    required:true,

                    email:true

                },

                field10:{

                    required:true,

                    url:true

                },

                field11:{

                   equalTo:'input[name="field6"]'

                }

            }

        });

    });

</script>

<style type="text/css">

form {

    margin: 10px 100px 10px 100px;

}

</style>

</head>

<body>

    <form id="form1">

        <div>

            field1:<input type="text" name="field1" />

        </div>

        <div>

            field2:<input type="text" name="field2" />

        </div>

        <div>

            field3:<input type="text" name="field3" />

        </div>

        <div>

            field4:<input type="text" name="field4" />

        </div>

        <div>

            field5:<input type="text" name="field5" />

        </div>

        <div>

            field6:<input type="text" name="field6" />

        </div>

        <div>

            field7:<input type="text" name="field7" />

        </div>

        <div>

            field8:<input type="text" name="field8" />

        </div>

        <div>

            field9:<input type="text" name="field9" />

        </div>

        <div>

            field10:<input type="text" name="field10" />

        </div>

        <div>

            field11:<input type="text" name="field11" />

        </div>

        <div>

            field16:<input type="text" name="field16" required="true" min="5"/>

            <!--如果属性比较少可以直接写在html标签里面  -->

        </div>

        <div>

             <input type="submit" name="submit" value="submit"/>

        </div>

    </form>

</body>

</html>

jquery插件-表单验证插件的更多相关文章

  1. jQuery formValidator表单验证插件

    什么是jQuery formValidator? jQuery formValidator表单验证插件是客户端表单验证插件. 在做B/S开发的时候,我们经常涉及到很多表单验证,例如新用户注册,填写个人 ...

  2. 【锋利的jQuery】表单验证插件踩坑

    和前几篇博文提到的一样,由于版本原因,[锋利的jQuery]表单验证插件部分又出现照着敲不出效果的情况. 书中的使用方法: 1. 引入jquery源文件, 2. 引入表单验证插件js文件, 3. 在f ...

  3. jquery validate表单验证插件-推荐

    1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家.     1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素  3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...

  4. jquery validate表单验证插件

    1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家.     1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素  3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...

  5. jQuery Validate 表单验证插件----自定义一个验证方法

    一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW  访问密码 f224 二.引入依赖包 <script src="../../scripts/j ...

  6. jQuery Validate 表单验证插件----自定义校验结果样式

    一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW  访问密码 f224 二.引入依赖包 <script src="../../scripts/j ...

  7. jQuery Validate 表单验证插件----通过name属性来关联字段来验证，改变默认的提示信息，将校验规则写到 js 代码中

    一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW  访问密码 f224 二. 添加一个另外一个插件jquery.validate.messages_cn.js. ...

  8. jQuery Validate 表单验证插件----利用jquery.metadata.js将校验规则直接写在class属性里面并定义错误信息的提示

    一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW  访问密码 f224 二. 添加一个另外一个插件jquery.metadata.js 并把校验规则写在控件里面 ...

  9. jQuery Validate 表单验证插件----在class属性中添加校验规则进行简单的校验

    一.下载插件包. 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW  访问密码 f224 二.jQuery表单验证插件----添加class属性形式的校验 <!DOCTY ...

  10. jQuery Validate 表单验证插件----Validate简介，官方文档，官方下载地址

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

随机推荐

  1. C10K 问题引发的技术变革

    C10K 问题引发的技术变革 http://rango.swoole.com/archives/381

  2. QT 常用控件一

    QWidget 创建窗口 如果widget未使用腹肌进行创建,则在显示时视为窗口或顶层widget. 由于顶层widget没有父级对象类来确保在其不再使用时删除,所以需要开发人员在应用程序中对其进程跟 ...

  3. codevs1842 递归第一次

    难度等级:白银 1842 递归第一次 题目描述 Description 同学们在做题时常遇到这种函数 f(x)=5 (x>=0) f(x)=f(x+1)+f(x+2)+1 (x<0) 下面 ...

  4. script实现的日期表示

    function clockon(bgclock){ var now=new Date(); var year=now.getYear(); var month=now.getMonth(); var ...

  5. C# where用法

    where 子句用于指定类型约束,这些约束可以作为泛型声明中定义的类型参数的变量. 1.接口约束. 例如,可以声明一个泛型类 MyGenericClass,这样,类型参数 T 就可以实现 ICompa ...

  6. iOS蓝牙开发（二）蓝牙相关基础知识

    原文链接: http://liuyanwei.jumppo.com/2015/07/17/ios-BLE-1.html iOS蓝牙开发(一)蓝牙相关基础知识: 蓝牙常见名称和缩写 MFI ====== ...

  7. 在win8（win8.1）电脑上安装IIS，配置web服务器，发布网站

    1.IIS安装: 打开控制面板——程序和功能——启用或关闭Windows功能——找到(Windows功能下)下的(Internet Infornation Services)把Web 管理工具和万维网 ...

  8. 通向高可扩展性之路（WhatsApp篇）---- 脸书花了190亿买来的WhatsApp的架构

    原文链接:http://highscalability.com/blog/2014/2/26/the-whatsapp-architecture-facebook-bought-for-19-bill ...

  9. 深入理解 cocos2d-x 坐标系

    首先对于初学的,带大家认识 cocos2d-x 中坐标系的几个概念,参考 http://blog.csdn.net/tskyfree/article/details/8292544.其他的往下看. 弄 ...

  10. C 语言学习的第 01 课：先来聊聊计算机吧

    各位同学,新学期,我就是你们的助教了.我的个人信息,你们的任课老师都已经介绍过了,所以我这里也就不再啰嗦.下面,来聊聊今天的话题:“先来谈谈计算机吧”. 想必看到这个题目,你们大家一定是不愿意点击进来 ...