Skip to content

liyuan462/form-checker

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

17 Commits
 
 
 
 

Repository files navigation

jQuery formChecker Plugin

概述

jQuery formChecker Plugin是一个表单验证的插件,来源于实际的项目,实现上参考了工作中用到的后端验证。

快速开始

  1. 引入jQuery,1.4版本以上。

  2. 引入jquery.formChecker.js。

  3. 对要验证的表单元素使用formChecker,其中的options是一个对象,提供配置信息,详见下面的选项一节。

    $("form").formChecker(options)

  4. 获取表单验证通过与否

    var isValid = $("form").formChecker("isValid")

选项

formInput

说明:最主要的选项,用于提供对需要验证的各字段的具体配置。

类型:object

是否必需:是

形式:{'表单输入元素选择器': ['字段描述', '检查器类型', options], ... }

其中,key是要检查的具体元素的选择器,例如'input[name="name"]'。value是一个数组,数组的第一项是该字段的描述,如'姓名';第二项是检查器的类型名,如'str',详见后面的检查器一节;第三项是一个object,是供检查器使用的针对单个字段的配置选项,如{'maxLen': 6},详见后面的检查器选项一节。

global

说明:用于提供一些对全部字段适用的全局性配置,具体选项和单个字段的配置选项一样,详见后面的检查器选项一节。这些配置会被应用到formInput中每个字段中,但会被单个字段中的同名配置覆盖。

类型:object

是否必需:否

形式:{全局配置项:相应值, ...}

检查器

检查器是插件的核心,所有的字段必须指定一个检查器,并提供相应的选项,选项详见下面的检查器选项一节,检查器现提供如下几种:

'str'

说明:用于普通字符串的检查

强制规则:无

'int'

说明:用于整数的检查

强制规则:只能包含数字

'ascii'

说明:继承自'str',用于限制输入是可打印的ascii字符

强制规则:只能是可打印的ascii字符

'chinese'

说明:继承自'str',用于限制输入为汉字

强制规则:只能是汉字

'mobile'

说明:用于手机号码的检查

强制规则:只能是以1开头的11位数字

'email'

说明:用于邮箱格式的检查

强制规则:必需符合邮箱的格式,例如[email protected]

检查器选项

callback

说明:用于供用户补充定义检查逻辑的函数,数据会作为第一个参数传给callback,callback需要返回一个二元组[isValid, data],其中isValid表示是否有效,data在有效时会作为有效数据,在无效时则会作为错误信息。

类型:函数

默认值:function (v) { return [true, v] }

optional

说明:用于指定字段值可否为空,当为true时,如果字段为空,则会视为有效。

类型:布尔值

默认值:false

max

说明:对于'int'检查器来说,限制的是最大值;对于'str'及其子检查器来说,限制的是最大长度。

类型:整型

默认值:无

min

说明:对于'int'检查器来说,限制的是最小值;对于'str'及其子检查器来说,限制的是最小长度。

类型:整型

默认值:无

format

说明:对'str'及其子检查器适用,指定一个正则表达式,检查时会检查字符串是否符合该正则表达式。

类型:正则表达式

默认值:无

length

说明:对'str'及其子检查器适用,指定用于计算字符串长度的函数,字符串的值会作为第一个参数传递给该函数,函数需返回一个长度值。

类型:函数

默认值:function (v) { return v.length }

messages

说明:用于指定验证未通过时提示信息的内容或模板。

类型:对象

默认值:

{
    max: '%(name) 最大值为%(max)'
    , min: '%(name) 最小值为%(min)'
    , maxLen: '%(name) 最大长度为%(maxLen)个字符'
    , minLen: '%(name) 最小长度为%(minLen)个字符'
    , blank: '%(name) 不能为空'
    , callback: '%(name) 输入出错了'
    , format: '%(name) 格式有错'
    , ascii: '%(name) 不能包含中文'
    , chinese: '%(name) 必须是中文'
    , default: '%(name) 格式有错'
}

解释:其中max/min对应'int'型数据大小检查的提示信息,maxLen/minLen对应'str'型数据长度检查的提示信息,blank对应数据为空时的提示信息,callback对应callback选项检查未通过时的提示信息,format对应format选项检查未通过时的提示信息,ascii对应'ascii'检查器检查未通过时的提示信息,chinese对应'chinese'检查器检查未通过时的提示信息,default对应其他情况下的提示信息。每一项的值是一个字符串模板,其中的%(var)会被替换成实际的预定义好的var的值,其中name即formInput中各字段的字段描述,max/min/maxLen/minLen对应设置的大小/长度范围值。

valueGetter

说明:用于指定获取表单输入元素的值的方式

类型:函数

默认值:输入元素的val()值

解释:输入元素对应的jQuery对象会作为第一个参数传递给valueGetter函数,该函数应该返回一个最终用来验证的值。例如:

valueGetter: function ($element) {
    return $element.val()
}

fail

说明:用于指定字段验证无效时的行为,一般来说是在界面上显示提示信息。

类型:函数

默认值:无

解释:提示信息(根据messages选项产生)会作为第一个参数传递给fail函数,在函数内部可以用this引用无效输入对应的表单元素的jQuery对象,例如

fail: function (msg) {
    this.next('.warn').remove().end().after('<span class="warn">' + msg + '</span>')
}

pass

说明:用于指定字段验证通过时的行为。

类型:函数

默认值:无

解释:没有参数,在函数内部可以用this引用有效输入对应的表单元素的jQuery对象,例如

pass: function () {
    this.next('.warn').remove()
}

isBlurCheck

说明:用于指定是否需要在表单元素失去焦点时自动检查其有效性。

类型:布尔值

默认值:false

示例

$(function () {
    $('form').formChecker({
        global: {
            fail: function (msg) {
                this.next('.warn').remove()
                    .end().after('<span class="warn">' + msg + '</span>')
            }

            , pass: function () {
                this.next('.warn').remove()
            }

            , isBlurCheck: true

            , length: function (value) {
                var s = 0
                for(var i = 0; i < value.length; i++) {
                    s += value.charAt(i).match(/[\u0391-\uFFE5]/) ? 2 : 1
                }
                return s
            }
        }

        , formInput: {
            'input[name="name"]': ['名称', 'str', {
                max: 255
            }]
            , 'input[name="qq"]': ['QQ', 'str', {
                max: 16
                , format: /^\d+$/
            }]
            , 'select[name="city_id"]': ['城市', 'int', {
                min: 1
                , messages: {blank: '请选择', 'default': '请选择'}
            }]
         }

    })

    $('form').submit(function () {
        return $(this).formChecker("isValid")
    })
})

About

a jQuery plugin to help check form values before submit

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published