三 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. TP框架实现分页

    TP框架自带分页的实现方法,所以使用这个分页方案,不用再重新造轮子 1,先看效果图 2,源码 /** * TODO 基础分页的相同代码封装,使前台的代码更少 * @param $m 模型,引用传递 * ...

  2. xpath 参考

    using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Te ...

  3. VS XML注释

    1.<c> <c>text</c> 其中: text 希望将其指示为代码的文本. 备注 <c> 标记为您提供了一种将说明中的文本标记为代码的方法.使用 ...

  4. TinyFrame升级之三：逻辑访问部分

    在上一篇,我们打造了自己的数据访问部分,这篇,我们准备讲解如何打造逻辑访问部分. 在上一篇中,我们利用Repository模式构建了基于泛型的操作合集.由于这些操作的合集都是原子性的操作,也就是针对单 ...

  5. 仿造slither.io第二步：加个地图，加点吃的

    前言 上一篇博文讲了如何造一条蛇,现在蛇有了,要让它自由的活动起来,就得有个地图啊,而且只能走也不行呀,还得有点吃的,所以还得加点食物,这一篇博文就来讲讲如何添加地图和食物. 预览效果 当前项目最新效 ...

  6. Android视频播放之VideoView

    Android视频播放之VideoView 1.VideoView类介绍 Android的VideoView组件可以从不同的来源(例如资源文件或内容提供器)读取图像,计算和维护视频的画面尺寸以使其适用 ...

  7. JSON返回DateTime/Date('123123123')/解决办法

    Date.prototype.format = function (format) //author: meizz    {        var o = {            "M+& ...

  8. [codeforces 519E]E. A and B and Lecture Rooms(树上倍增）

    题目:http://codeforces.com/problemset/problem/519/E 题意:给你一个n个点的树,有m个询问(x,y),对于每个询问回答树上有多少个点和x,y点的距离相等 ...

  9. TF2ZP函数

    TF2ZP 中TF是什么意思?   Transfer function   tf 就是传递函数的意思,简称传函 tf2zp是将传递函数转换为零极点形式的一个转换函数   [Z,P,K] = TF2ZP ...

  10. Beta冲刺---Day1

    站立式会议 站立式会议内容总结: 照片 老师是对的,其实无论在什么时候,都不会有一段很长很空闲的时间.比如说这个时候就还是有一大堆的作业.考试. 希望我们组员能够告别拖延症,然后再编码的时候全心地投入 ...