三 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. LINQ 常见用法

    以下数据源都假设为data 1.获取某列的不重复数据 List<int> ids =  data.Select(t => t.ID).Distinct().ToList(); 2.对 ...

  2. Android 的图片异步请求加三级缓存 ACE

    使用xUtils等框架是很方便,但今天要用代码实现bitmapUtils 的功能,很简单, 1 AsyncTask请求一张图片 ####AsyncTask #####AsyncTask是线程池+han ...

  3. Web性能优化-合并js与css，减少请求

    Web性能优化已经是老生常谈的话题了, 不过笔者也一直没放在心上,主要的原因还是项目的用户量以及页面中的js,css文件就那几个,感觉没什么优化的.人总要进步的嘛,最近在被angularjs吸引着,也 ...

  4. 【深入ASP.NET原理系列】--ASP.NET请求管道、应用程序生命周期、整体运行机制

    微软的程序设计和相应的IDE做的很棒,让人很快就能有生产力..NET上手容易,生产力很高,但对于一个不是那么勤奋的人,他很可能就不再进步了,没有想深入下去的动力,他不用去理解整个框架和环境是怎么执行的 ...

  5. 【语言基础】c++ 基本数据类型与字节数组（string,char [] ）之间的转化方法

    有时候我们需要将基本数据类型转化为字节,以便写入文件,然后必要时还需要将这些字节读出来.有人说,为啥不把数字直接存进文件呢?比如:100,000,000,我们直接存数字明文到文件那就是9个字符(cha ...

  6. Realm Java的学习、应用、总结

    从React Native珠三角沙龙会议了解到Realm这个开源库,然后开始学习.理解和使用Realm.Realm是跨平台.支持多种主流语言,这里主要是对Realm Java结合实际项目的一些情况进行 ...

  7. jQuery.uploadify-----文件上传带进度条，支持多文件上传的插件

    借鉴别人总结的uploadify:基于jquery的文件上传插件,支持ajax无刷新上传,多个文件同时上传,上传进行进度显示,控制文件上传大小,删除已上传文件. uploadify有两个版本,一个用f ...

  8. “奥特曼攻打小怪兽”java学习打怪升级第一步

    ---恢复内容开始--- 练习:回合制对战游戏:奥特曼和小怪兽进行PK,直到一方的血量为0时结束战斗,输出谁胜利了! 不难看出场景中有两个对象:”奥特曼“这一对象抽象为”Ao"类:     ...

  9. Codeforces Round #359(div 2)

    A:= v = B:^ w ^ C:一天n个小时,一个小时m分(n,m十进制),一个手表有两部分,左边表示时,右边表示分,但都是7进制,而且手表上最多只能有7个数字且数字不能重复,现在要你算出能正确表 ...

  10. jQuery基础--样式篇（3）

    1.jQuiery对象与DOM对象 对于刚刚接触jQuery的初学者,我们要清楚认识一点:jQuery对象与DOM对象是不一样的.可能一时半会分不清楚哪些是jQuery对象,哪些是DOM对象,下面重点 ...