三 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. matlab FDR校正

    http://home.52brain.com/forum.php?mod=viewthread&tid=27066&page=1#pid170857 http://www.mathw ...

  2. 基于JSch的Sftp工具类

    本Sftp工具类的API如下所示. 1)构造方法摘要 Sftp(String host, int port, int timeout, String username, String password ...

  3. mssql 2008 复制订阅

    广域网的复制订阅 准备工作: 1.a.b服务器创建相同的系统用户密码 2.在a服务器 sql server 配置管理器 创建别名 ip填写b服务器的ip, b服务器端口号 3.在b服务器  sql s ...

  4. Discuz封锁蜘蛛最有效的方法

    闲来无事翻代码,发现一个好东西,Discuz设计者考虑到了有些流氓搜索引擎不遵守roborts.txt,于是设计了一个NOROBOT变量,当这个变量为true 的时候,定义中的搜索引擎都会无法访问,默 ...

  5. Redis学习笔记（一）

    一.Redis入门概述 1.是什么? (1)全称:REmote DIctionary Server(远程字典服务器).是完全开源免费的,用C语言编写的, 遵守BCD协议.是一个高性能的(key/val ...

  6. Oracle PL/SQL 入门

    PL/SQL 全称:Procedure Language/SQL.产生背景自己去百度. 模板: Declare ---变量定义 num ; name ) := 'damon'; idesc cnt_i ...

  7. 关于开发中 hosts 文件的修改

    这篇文章只是给自己做个笔记吧. 最近的工作经常要改 hosts 文件(C:\Windows\System32\drivers\etc\hosts),并且改完后不立即生效.小胡子哥 提到: 因为服务器设 ...

  8. 读懂IL代码就这么简单(三)完结篇

    一 前言 写了两篇关于IL指令相关的文章,分别把值类型与引用类型在 堆与栈上的操作区别详细的写了一遍 这第三篇也是最后一篇,之所以到第三篇就结束了,是因为以我现在的层次,能理解到的都写完了,而且个人认 ...

  9. async 更优雅异步体验

    上一篇<让 Generator 自启动>介绍了通过起动器让 Generator 跑起来,而本篇采用 async 实现更优雅的异步编程. 从例子开始 借用上一篇例子中的例子说起. funct ...

  10. Bootstrap系列 -- 2. 标题

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