三 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. jinja模版

    实现不同机器的差异化配置                 把apache监听的端口统一改为8080     把配置文件files/httpd.conf 文件做成模版         修改lamp.sl ...

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

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

  3. 如何在前台脚本通过json传递数据到后台(使用微软自带的ajax)

    首先,我们要在前台引入json的脚本,以便于把js对象序列化 <script type="text/javascript" src="/js/jquery.json ...

  4. favicon.ico文件简介

    本地调试时,控制台经常会打印如下的错误(对 favicon.ico 的请求在 chrome 调试面板下不可见,可在抓包工具,比如 Fiddler 中看到): favicon.ico 是啥?看下面这张图 ...

  5. Javascript中判断数组的正确姿势

    在 Javascript 中,如何判断一个变量是否是数组? 最好的方式是用 ES5 提供的 Array.isArray() 方法(毕竟原生的才是最屌的): var a = [0, 1, 2]; con ...

  6. 制作stick侧边栏导航效果

    其实这种效果网上好多的插件,但是我想自己实现看看,其实把思路理清实现起来就非常简单了,让我们看看: 分析: 从图中我们可以看出:右边的top=100px,那么它应该在第一个框的top+height=1 ...

  7. 告别编译运行 ---- Android Studio 2.0 Preview发布Instant Run功能

    以往的Android开发有一个头疼的且拖慢速度的问题,就是你每改一行代码要想看到结果必须要编译运行到手机或者模拟器上,而且需要从头(可能是登录界面)一直点击到你修改的界面为止.开发一个完整的Andro ...

  8. Windows 10 自动升级画面

  9. C语言字符串与数字相互转换

    在C/C++语言中没有专门的字符串变量,通常用字符数组来存放字符串.字符串是以“\0”作为结束符.C/C++提供了丰富的字符串处理函数,下面列出了几个最常用的函数. ● 字符串输出函数puts. ● ...

  10. AVL树插入操作实现

    为了提高二插排序树的性能,规定树中的每个节点的左子树和右子树高度差的绝对值不能大于1.为了满足上面的要求需要在插入完成后对树进行调整.下面介绍各个调整方式. 右单旋转 如下图所示,节点A的平衡因子(左 ...