Skip to content

Latest commit

 

History

History
214 lines (179 loc) · 7.32 KB

使用说明.md

File metadata and controls

214 lines (179 loc) · 7.32 KB

#validator.js

最后更新:2013-8-19 by RocShow

依赖库

介绍

Validator.js 对常用的表单验证方法进行了封装,提供了清晰易用的调用接口。

特性

1.自动校验。实时侦测用户输入,实时校验

2.错误输入自动校正。根据不同的规则,对用户的错误输入提供合理的自动纠正

3.定时器与事件绑定切换。可自由选择使用定时器触发校验还是输入事件触发校验

4.校验结果细节展示。 对于有多个校验规则联合校验的情况,校验结果会显示每个校验规则的具体结果

5.内置31种常用校验规则

6.可灵活扩展新的校验规则

7.可使用自定义函数或正则表达式进行验证

使用说明

典型的使用方式:

vld = new Validator([{
            field: "#text1",
            rule: ["required","max[10]"],
            msg: "该项必填",
            tipDir: "left",
            tipOffset: {
                left: -50,
            },
            dynamicVld: true
        }, {
            field: "#text2",
            rule: ["min[3]","max[10]"],
            msg: "长度必须在3到10之间",
            tipOffset: {
                left: 50,
            },
            dynamicVld: true
        }], {
            vldOnBlur: true,
            errorField: "#errField",
            errorClass: "error",
            tipDir: "right",
            tipOffset: {
                left: 5,
            },
            timer: false,
            parent: $(".outer").first(),
            autoRevise: true
            //listenScroll:false,
        });

Validator构造函数

Validator构造函数接受两个参数,第一个为数组,表示需要验证的规则集合,第二个为object类型的options,表示全局的设置.

数组的设置

每一个数组元素为如下格式的object:

{
    field: '', //需要验证的input的标签的id
    rule: [], //验证规则,数组格式,每个元素为string类型的验证规则,格式为:规则名[参数]
    msg: '', //验证失败后的错误提示信息
    tipDir:'', //Error Tip的位置,up,down,left,right之一
    tipOffset: {
        left: '', //Error Tip距离原始位置的左偏移量
        top: '' //Error Tip距离原始位置的上偏移量
    },
    limiter: {
        //limiter.js设置
    },
    dynamicVld: boolean //是否进行动态验证
}

options的设置及默认值

{
    version: "1.0.2", //版本号
    vldOnBlur: false, //元素失去焦点时验证
    checkOnError: true, //当前input内的数据不合法时自动验证数据
    focus1stErr:true,//发生错误时第一个错误input获取焦点
    timer: true, //是否使用定时器验证,若否,使用keydown和onpaste代替
    errorFiled: null, //集中显示错误信息的区域。
    errorClass: "", //错误时input标签应用的css样式
    errorLocClass: "", //错误时错误提示标签应用的样式,如show
    errTipTpl: "<div class='errorTip' style='z-index:10;"
                + "position:absolute;'>{{message}}</div>", //错误Tip模板,absolute定位
    tipDir: "right", //错误tip的显示位置,可选up,down left,right,关闭tip的话设置为false
    tipOffset: null, //错误tip显示位置的偏移量,需要包含left和top
    defaultMsg: "输入有误,请重新输入", //默认的错误提示信息
    parent: "body", //父节点$selector,为空的话自动指定为body
    autoRevise: false /* 动态验证时使用修正后的值替换错误值,若为false,
                         则使用上一次保存的值替换错误值。
                         注:上一次保存的值不一定是正确值
                      */
}

其中,limiter的设置方式为:

limiter: {
    wrapper: "",    /**
                     * 字数统计的容器元素
                     * @type NodeList
                     * @default ""
                     */
    target: "",     /**
                     * 目标元素,比如文本框
                     * @type NodeList
                     * @default ""
                     */
    el: "",    /**
                 * 元素
                 * @type NodeList
                 * @default ""
                 */
    tpl: "",   /**
                 * 字数统计使用的模板(未超出字数和超出字数的情况是不一样的)
                 * @type String
                 * @default ""
                 */
    
    defaultTpl: '<span class="ks-letter-count"><em class="J_LetterRemain">{remain}</em>字节</span>',
                /**
                 * 字数统计默认模板
                 * @type String
                 * @default "<span class="ks-letter-count">您还可以输入<em class="J_LetterRemain">{remain}</em>个字</span>"
                 */

    exceedTpl: '<span class="ks-letter-count-exceed">超出<em class="J_LetterRemain exceed-letter">{remain}</em>字节</span>',
                /**
                 * 超出字数后的模板
                 * @type String
                 *  @default "<span class="ks-letter-count">已经超出<em class="J_LetterRemain exceed-letter">{remain}</em>个字</span>"
                 */

    max: 50,    /**
                 * 最大允许输入的字数,超出的临界点
                 * @type Number
                 * @default 50
                 */
    len: 0, /**
                 * 字数,只读属性
                 * @type Number
                 * @default 0
                 */
    isRejectTag: false,    /**
                             * 算字数时是否排除html标签(富编辑器一般需要把html标签所占的字数去掉)
                             * @type Boolean
                             * @default false
                             */
    isEnToCn: false,   /**
                         * 将英文算成半个汉字
                         * @type Boolean
                         * @default false
                         */
    isCut: false   /**
                     * 超过最大字数时予以截断
                     * @type Boolean
                     * @default false
                     */
};

通过调用vld.isPassed()确认验证是否通过.

通过调用vld.results()获取详细的验证结果.

通过调用vld.revise()手动进行一次数据修正.

除了设定的事件被触发时会进行验证,也可通过代码调用验证功能:vld.validateAll()vld.validateOne(index).

API

####window.ValidatorDefaults(opts) @param opts string 设置参数

设置Validator的全局参数

####window.Validator(validations,opts) 如之前描述

####Validator.results() @return [] 获取验证结果的详细描述

####Validator.isPassed() @return boolean 是否全部验证都通过

####Validator.validateAll() @return boolean 是否全部验证都通过

手动进行全部验证

####Validator.revise() @return boolean 修正后的值是否全部通过验证

手动修正全部数据,之后进行一次全部验证

####Validator.validateOne(index) @param index integer 需要验证的规则下标

手动验证指定index的validation

##单个input验证 $obj.validator(validation)