用户
 找回密码
 入住 CI 中国社区
搜索
查看: 6620|回复: 3
收起左侧

在发个表单验证js库 jQuery formValidator

[复制链接]
发表于 2011-4-22 00:36:46 | 显示全部楼层 |阅读模式
本帖最后由 cmsphp 于 2011-4-22 00:41 编辑

在线演示地址:http://www.cmsphp.com/js/formValidator/

1. jQuery formValidator表单验证插件是什么? [top]

        jQuery formValidator表单验证插件是客户端表单验证插件。
       在做B/S开发的时候,我们经常涉及到很多表单验证,例如新用户注册,填写个人资料,录入一些常规数据等等。在这之前,页面开发者(JavaScript开发者)需要编写大量的JavaScript来进行表单元素的校验,而这些校验在平时开发中不停的重复书写。
       常见的校验如不能为空,必须满足长度要求,必须为数字,必须为Email等等。一般要判断的表单元素比较多,开发过程就显得枯燥无味——重复的代码不断重复,而且可能还要兼容多种浏览器,更多的考虑因素使人头疼不已。由于每个要校验的页面虽然逻辑基本相同,但是在大多数情况下,出于种种原因,开发者宁愿再编写一套JS文件,为了便于管理。
       jQuery formValidator表单插件致力于改善这一过程。你只关心业务逻辑,而无需关系实现过程,只需简单的配置,无需写代码就能实现表单的检验。它包括常规检验功能和可扩展校验功能。针对每个表单元素你只需要写一行配置信息就能完成校验。而这些配置信息无需写入表单元素,实现了js代码和html代码的分离。这样做的好处,使B/S开发过程中,分工更加明确,页面设计着只需关心他的页面(设计的时候不必担心把脚本弄坏了),javascript开发者只需关心脚本的开发。
       而插件本身包含的校验方式可以有无数种,只要你扩展正则表达式和函数。本插件于同类校验插件最大的区别:校验功能可以扩展;实现了校验代码于html代码的完全分离;你只需写一行配置信息就能完成一个表单元素的所有校验。插件本身提供了很多回调函数,使调用者能最大限度的发挥自己的想象能力来完成自己的业务需求。 在同一个页面你可以拥有很多个校验组,你只需在提交的按钮那里调用
return jQuery.formValidator.pageIsValid('校验组号') 来完成多个组的校验,互不干扰。
      插件具备跨浏览器的能力。目前在ie和ff两种浏览器下调试通过,你不用再考虑在多浏览器下如何兼容,jQuery formValidator帮你做到了这些。

2. jQuery formValidator能做什么,不能做什么? [top]

jQuery formValidator表单校验插件支持的验证功能(还有很多功能没有罗列)罗列如下:

    支持所有类型客户端控件的校验
    支持jQuery所有的选择器语法,只要控件有唯一ID和type属性。
    支持函数和正则表达式的扩展。提供扩展库formValidatorReg.js,你可以自由的添加、修改里面的内容。
    支持2种校验模式。第一种:文字提示(showword模式);第二种:弹出窗口提示(showalert模式)
    支持多个校验组。如果一个页面有多个提交按钮,分别做不同得提交,提交前要做不同的校验,所以你得用到校验组的功能。
    支持4种状态的信息提示功能,可以灵活的控制4种状态是否显示。第一种:刚打开网页的时候进行提示;第二种:获得焦点的时候进行提示;第三种:失去焦点时,校验成功时候的提示;第四种:失去焦点时,校验失败的错误提示。
    支持自动构建提示层。
    支持自定义错误提示信息。
    支持控件的字符长度、值范围、选择个数的控制。值范围支持数值型和字符型;选择的个数支持radio/checkbox/select三种控件
    支持2个控件值的比较。目前可以比较字符串和数值型。
    支持服务器端校验。
    支持输入格式的校验。

jQuery formValidator不能做的:

    目前对控件ID是动态产生的情况支持的不是很好。例如asp.net里的gridview控件,因为它的每行数据都是动态产生的,捕捉不到控件的ID。不过你硬要写,也是能实现的。
    其他没有提到的,很希望你能告诉我们。

3. 什么情况下,我应该使用jQuery formValidator? [top]

只要控件ID是一定的,即:控件ID是你自己指定的,这种情况你都可以调用。当然动态产生ID的,你也可以调用。jQuery formValidator可以帮助你减轻客户端校验编程的压力,让你有更多的精力投入对业务的关注中。

无论你是大型系统还是小型系统都适合调用本插件,本插件的压缩版本只有6K(可能本网页的一张图片就有几十K),个人认为可以忽略网页的加载时间。

4. 快速开始 [top]

你可以有两种方法快速开始(看到效果)

    直接查看Demo页面 (goto>>)
    下载最新的版本,直接在本地查看。(goto>>)

无论是那种方法,演示的例子中都有详细的步骤,以及对应的代码。

5. 使用插件必须加载的文件 [top]

//加载jQuery类库
<script src="jquery_last.js" type="text/javascript"></script>
//加载插件的样式库,如果你是自动构建提示层,请加载validatorAuto.css
<link type="text/css" rel="stylesheet" href="style/validator.css"></link>
//加载插件
<script src="formValidator.js" type="text/javascript"></script>
//加载扩展库
<script src="formValidatorRegex.js" type="text/javascript"></script>

6 jQuery formValidator插件的API帮助[top]

目前支持5种大的校验方式,分别是:inputValidator(针对input、textarea、select控件的字符长度、值范围、选择个数的控制)、compareValidator(提供2个对象的比较,目前可以比较字符串和数值型)、ajaxValidator(通过ajax到服务器上做数据校验)、regexValidator(提供可扩展的正则表达式库) 、functionValidator (提供可扩展函数库来做校验)

每种格式支持的控件类型如下:
          input         textarea         select
校验方式         text         radio         checkbox         file         password         textarea         select-one
inputValidator         √         √         √         √         √         √         √
compareValidator         √                             √         √         √          
ajaxValidator         √                             √         √         √         √
regexValidator         √                             √         √         √          
functionValidator         √         √         √         √         √         √         √
如果你用了不支持的校验功能,插件将忽略这个校验功能。

插件目前提示错误,有两种模式:showword和showalert,即文字提示和窗口提示,下面的4大验证方式,针对showalert这种方式不是都必须的,有些配置是没有作用的
下面分别罗列全局初始化和5种校验方式公开的属性
formValidator:         用来做初始化的类型,必须先执行。("√"为showalert可用参数)
属性         属性名称         默认值         showalert         详细解释
validatorgroup         校验组         "1"         √         一个页面的控件可以分成多个组,分开校验
empty         是否可以为空         false         √          
automodify         输入错误离开焦点的时候,自动修复错误         false         √         先给出提示然后,自动修复,目前只支持text、file、textarea三种类型
onempty         空时候的提示         "输入内容为空"                   可以为空,为空时候的提示。为空者不显示
onshow         显示时候的提示         "请输入内容"                   为空者不显示
onfocus         获得焦点的提示         "请输入内容"                   为空者不显示
oncorrect         输入正确后的提示         "输入正确"                   当你焦点离开控件的时候,如果输入正确将出现该提示。为空者不显示
tipid         显示错误的容器ID         表单ID+"Tip"                   如果不自动构建提示层,表示提示成的ID号
如果自动构建提示层,表示提示层相对的目标控件
tipcss         自动构建的提示层的样式         "left":"10px",
"top":"1px",
"height":"20px",
"width":"250px"                   主要用于定位自动构建的提示层
forcevalid         强制输入的值必须有效         true         √         是否把一个全角字符当做2个长度的参数
defaultvalue         默认值         null         √         所有input和select表单。如果你不设置就保持原值,一旦设置就设为默认值。
                               
inputValidator:          
属性         属性名称         默认值         详细解释
type         比较类型         "size"         (对select无效)
"size":表示比较长度 ,默认值
"number":数值型比较
"string":字符型比较
"date":短日期类型
"datetime":长日期类型
min         最小长度/值         0         默认数值型。如果进行字符比较,请收入字符型
对select-one而言inputValidator里的参数min和max表示选择的索引号范围
对select-multiple而言inputValidator里的参数min和max表示选择的个数
max         最大长度/值         99999999999         同上
onerror         发生错误的提示         "输入错误"         为空者不显示。
onerrormin         比min属性小的提示         null         当用户输入的值比min属性小的时候的错误提示
onerrormax         比max属性大的提示         null         当用户输入的值比max属性大的时候的错误提示
empty         控件文本值是否允许两边为空         两边都允许出现空         默认值{leftempty:true,rightempty:true,emptyerror:null}
leftempty:表示左边是否允许为空
rightempty:表示右边是否允许为空
emptyerror:出现该错误的时候的提示,如果为null,则利用onerror属性来提示错误。
                               
compareValidator:          
属性         属性名称         默认值         详细解释
desid         要比较控件的ID         ""         要跟源目标进行比较的目标ID
operateor         比较符号         "="         一共有如下几种类型:=、!=、>、>=、<、<=
datatype         数据类型         "string"         目前只支持2种:"string"、"number","datetime","date"
onerror         发生错误的提示         "输入错误"         为空者不显示。
                               
regexValidator:          
属性         属性名称         默认值         详细解释
regexp         正则表达式         ""         采用的是显式构造函数new RegExp("pattern"[,"flags"]); 由于Javascript 中'\' 被用作转义字符,所以在使用显示构造函数构造实例对象的时候,需要使用'\\' 代替'\'
param         附加参数         "i"         g:代表可以进行全局匹配。
i:代表不区分大小写匹配。
m:代表可以进行多行匹配。
可以任意组合,当然也可以不加参数
datatype         数据类型         "string"         "string":自己写的表达式,"enum":枚举名。具体请见demo3.htm
你可以自己修改、添加formValidatorRegex.js里的枚举项目名和表达式。
onerror:         发生错误的提示         "输入错误"         为空者不显示。
                               
ajaxValidator:         几乎所有的属性跟$.ajax()的属性一样,请参考$.ajax()函数的帮助
属性         属性名称         默认值         详细解释
type         请求的类型         "GET"         "POST" 或 "GET"
url         发送到的URL地址         ""          
datatype         返回的数据类型         "html"         xml、html、script、json
data         数据         ""          
async         是否以异步的方式发送         true          
success         当请求成功时调用的函数         null          
processdata         自动处理返回的数据为字符串         true         在默认的情况下,如果data选项传进的数据是一个对象而不是字符串,将会自动地被处理和转换成一个查询字符串
complete         当请求完成时调用的函数         null          
beforesend         当请求前时调用的函数         null         有个一个参数,根$.ajax里的beforeSend参数一样。
buttons         你点提交的按钮(组)jQuery对象         null         当你触发了ajax校验,buttons里对应的按钮(组)就会灰掉,一直等待服务器返回数据为止
error         当请求失败时调用的函数         "请求失败"         你可以自己定义这个错误,在error里自动打出。为空者不显示。

functionValidator
属性         属性名称         默认值         返回值的解释
fun         外部函数名()
参数1:元素的值,
参数2:元素对象         默认当作处理过程        
true/false         校验成功/失败
字符串         校验失败,返回值当作自定义错误
无         处理过程
onerror         发生错误的提示         "输入错误"         函数return false的时候,显示该错误信息
           
公共函数:         主要是设置全局参数和判断是否通过校验
函数名         函数说明
$.formValidator.initConfig         参数:配置类型
属性         默认值         说明
validatorgroup         "1"         你要针对哪个组进行配置
formid         ""         要自动注册pageIsValid函数的表单ID号
alertmessage         false         是否弹出窗口
autotip         false         是否自动构建提示层
errorfocus         true         发生错误的时候,第一个出错控件是否获得焦点
forcevalid         true         是否一直输入正确为止才允许离开焦点
wideword         true         是否把一个全角字符当做2个长度
onsuccess         null         该组校验通过后的回调函数,返回false,阻止表单的提交
submitonce         false         校验通过后,是否灰掉所有的提交按钮
onerror         null         该组校验失败后的回调函数, 有两个参数
参数1         一个校验没有通过的错误信息
参数2         一个校验没有通过的元素对象
debug         false         是否处于调试模式。true:不提交表单
$.formValidator.pageIsValid         一个参数: 不是配置类型
validatorgroup         "1"         你要针对哪个组进行验证
$.formValidator.isOneValid         一个参数: 当时设置验证的表单元素ID。
返回是否校验成功的信息。
$.formValidator.setFailState         function("tipid","显示的信息")
在showword模式下,如果你的额外校验没有通过,你可以通过它来设置成失败信息和状态
$.formValidator.getLength         function("表单元素id")
checkbox或radiobutton表示(同组)选择的个数。
对select-one,选择索引的值
对select-multiple,inputValidator里的参数min和max表示选择的个数
其它input表示的表示字符长度。
$.formValidator.retSetTipState         function(校验组号) 来把该组的提示内容恢复到onshow状态

formValidator3.3.rar (130.07 KB, 下载次数: 212)
发表于 2011-5-8 02:58:15 | 显示全部楼层
看起来不错。回头考虑换了用用。、
发表于 2012-7-18 13:06:12 | 显示全部楼层
怎么看不懂啊
发表于 2012-7-19 09:02:28 | 显示全部楼层
这个验证我使用过,还不错

本版积分规则