三 Validator对象

1、介绍：Validate方法返回的对象称作Validator对象

2、使用

Validator对象常用方法

　　Validator.form()　　

　　　　返回：Boolean

　　　　验证：form返回成功还是失败(整个表单)

　　Validator.element()

　　　　返回：Boolean

　　　　验证单个元素是成功还是失败（单个的表单元素）

　　Validator.resetForm()

　　　　把前面验证的Form回复到验证前的状态
　　Validator.showErrors()

　　　　显示特定的错误信息

　　Validator.numberOfInvalids()

　　　　返回验证不通过的字段数

静态方法（只要引入了Validator的js就可以直接使用，不需要再获取validator对象，通常使用来做配置的）

　　jQuery.validator.setDefaults()

　　　  改变默认的配置

　　jQuery.validator.addClassRules()

　　　　增加组合验证类型，可以在一个css类里面用多种验证规则　　　

　　jQuery.validator.format()

　　　　用参数代替模板中的{n}

　　jQuery.validator.addMethod

　　　　添加一个新的验证方法（可以是自定义的）

<!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" src="../js/validation/messages_zh.js"></script>

<script type="text/javascript">

    $.validator.setDefaults({

        debug:true

        });

    $.validator.addClassRules({

        sunshengli:{

            required:true,

            rangelength:[3,9]

        }

        });

    /**param1：参数似乎规则的名字

     *param2：函数：验证的函数

     *param2：value

     */

    $.validator.addMethod('sifangku',function(value,element,args){

        if (args) {

            return /^[a-zA-Z_][a-zA-Z_0-9]*/.test(value);

        }else

        {

            //不验证

            return true;

        }

        },"这里是错误提示-对不起没有通过sifangku验证，element指的是filed对象");

    $(document).ready(function()

    {

        var validator = $("#form1").validate({

            rules: {

                field1:{

                    required:true,

                    rangelength:[4,6],

                    sifangku:true

                }

            },

            messages:{

                field1:{

                    required:'field1不能为空',

                    rangelength:'field1的长度必须子{0}与{1}之间',

                    /*{0}取的是上述属性的第一个值，{1}取的是上述属性的第二个值  */

                }

            },

            invalidHandler:function(event,validator){

                console.log('对不起您有'+validator.numberOfInvalids()+"个字段没有通过验证");

            }

        });

        $("button.form").click(function(){

            console.log(validator.form());

            });

        $("button.element").click(function(){

            console.log(validator.element('#form1 input:eq(0)'));

            });

        $("button.resetForm").click(function(){

            validator.resetForm();

            });

        $("button.showErrors").click(function(){

            validator.showErrors({

                field1:'fieldHasError'

                });

            });

        $("button.numberOfInvalids").click(function(){

            console.log(validator.numberOfInvalids());

        });

        //演示$.validator.format的其他用途

        var urls = [

                    {

                        url:'http://www.baidu.com',

                        name:'baidu'

                    },

                    {

                        url:'http://taobao.com',

                        name:"taobao"

                    }

                    ];

        var html="";

        for(var i = 0; i < urls.length;i++)

        {

            html +='<br><a href='+urls[i].url+'>'+urls[i].name+'</a>';

        }

        $('body').append(html);

        //用$.validator.format实现

        var temp =$.validator.format('<br><a href={0}>{1}</a>');

        var html1="";

        for(var i = 0; i < urls.length;i++)

        {

            html1+=temp(urls[i].url,urls[i].name);

        }

        $('body').append(html1);

    });

    //模板方法，占位符

    var template = $.validator.format('{0}-的-{1}');

    ///alert(template('小明','皮卡球'))

</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" class="sunshengli"/>

        </div>

        <div>

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

        </div>

    </form>

    <button class="form">Validator.form()</button>

    <button class="element">Validator.element()</button>

    <button class="resetForm">Validator.resetForm()</button>

    <button class="showErrors">Validator.showErrors()</button>

    <button class="numberOfInvalids">Validator.numberOfInvalids()</button>

</body>

</html>

　　　　

　　

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

  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表单验证插件的基本使用方法及功能拓展

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

  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插件 -- 表单验证插件jquery.validate.js, jquery.metadata.js

    原文地址:http://blog.csdn.net/zzq58157383/article/details/7718352   最常使用JavaScript的场合就是表单的验证,而jQuery作为一个 ...

随机推荐

  1. P3369 【模板】普通平衡树（Treap/SBT）

    题目描述 您需要写一种数据结构(可参考题目标题),来维护一些数,其中需要提供以下操作: 插入x数 删除x数(若有多个相同的数,因只删除一个) 查询x数的排名(若有多个相同的数,因输出最小的排名) 查询 ...

  2. SQL使用开窗函数与CTE查询每月销售额的前几名

    WITH tagTab AS( SELECT YearMonth, pm=RANK() OVER(PARTITION BY YearMonth ORDER BY amount DESC) FROM S ...

  3. C#.NET 大型通用信息化系统集成快速开发平台 4.1 版本 - 成熟组件化运行效果分解

    1:成熟的组件就是可以写很少的代码,可以实现很多功能.2:又可以用源码方式调用,又可以用dll方式调用.3:不需要学习里面的细节,只要会调用就可以了.4:成熟稳定,功能齐全,bug少,甚至没bug.5 ...

  4. 关于Microsoft Visual Studio 2010系统自带的数据库

    转自:http://blog.sina.com.cn/s/blog_a570cca601012x5w.html 1.Visual studio Tools>命令提示 2.aspnet_regsq ...

  5. IO（一）----字节流

    File类是文件的抽象表示,如果要对文件的内容进行读写就需要使用IO流技术. IO流简介:(Input/Output) I/O类库中使用"流"这个抽象概念.Java对设备中数据的操 ...

  6. 在GoF设计模式

    在GoF设计模式中,结构型模式有: 1.适配器模式 Adapter   适配器模式是将一个类的接口转换成客户希望的另外一个接口.适配器模式使得原本由于接口不兼容而不能一起工作的那些类可以一起工作.   ...

  7. iptables/Netfilter 学习

    开始学iptables,因为它是和路由器技术紧密结合在一起的. iptables的命令看起来眼花缭乱,随便找两个: iptables -A FORWARD -p tcp -s -d -j ACCEPT ...

  8. 如何重现难以重现的bug

    生活中有这么一种现象:如果你关注某些东西,它就会经常出现在你眼前,例如一个不出名的歌手的名字,一种动物的卡通形象,某个非常专业的术语,等等等等.这种现象也叫做“孕妇效应”.还有类似的一种效应叫做“视网 ...

  9. 关于BOM

    BOM:浏览器对象模型 (Browser Object Model)主要定义的是JS操作浏览器的方法和属性. 大部分方法都在window下. 常用方法:(JS里面规定如果方法前面是window,win ...

  10. Bootstrap系列 -- 2. 标题

    一. Bootstrap标题 在Bootstrap中使用标题和Html本身没有太大的区别使用h1-h6, 而Bootstrap只是默认修改了H1-h6的样式,网上找到如下资料参考 二. Bootstr ...