升级记录
2.0
这次又做了一次比较大的调整:增加了FunctionValidator这种校验方式,现在你可以调用外部函数了;调整了内部部分算法;
你打开下载压缩包里的index.html,将会看到全新的演示。
1、增加FunctionValidator校验方式。作用:你可以用外部函数对表单元素进行校验和处理,返回true/false表示校验是否成功;返回字符串表示自定义错误信息,校验失败;如果没有返回值表示处理过程,校验成功。范例代码如下:
$("#sfzh").formValidator({onshow:"请输入15或18位的身份证",onfocus:"输入15或18位的身份证",oncorrect:"输入正确"}).FunctionValidator({fun:isCardID});
fun这个参数给你的函数传递了2个参数(该表单元素的值,表单元素element) 。具体情况,请看API帮助文档
2、当你调用PageIsValid的时候,如果未校验通过,则给onError传递2个参数(第一个校验没通过元素的错误信息,第一个校验没通过元素element)。范例代码如下:
$.formValidator.initConfig({onError:function(msg){alert(msg)}});
3、AjaxValidator校验方式增加一个配置参数buttons(你点提交的按钮(组)jQuery对象)。作用:当你触发了ajax校验,buttons里对应的按钮(组)就会灰掉,一直等待服务器返回数据为止。范例代码如下:
$("#test1").formValidator({...}).InputValidator({...}).AjaxValidator({
url : "Default.aspx",
datatype : "json",
success : function(data){...},
buttons: $("#button_id"),
error: function(){alert("服务器没有返回数据,可能服务器忙,请重试");},
onerror : "该用户名不可用,请更换用户名重新",
onwait : "正在对用户名进行合法性校验,请稍候..."
});
4、由于增加了自定义错误信息的功能,为了跟FunctionValidator校验方式里"fun"函数返回意义统一,更改了formValidator里的onvalid参数返回的意义,给大家带来不便请谅解。返回true/false表示校验是否成功;返回字符串表示自定义错误信息,校验失败;如果没有返回值表示处理过程,校验成功。
1.3
由于工作忙,网友提了很多珍贵的意见,到现在才更新插件,真的对不住!这次修改了几处不合理的地方。
特别增加了DefaultPassed函数,并且调整了表单元素校验的顺序。
1、增加DefaultPassed函数,作用:如果你的表单元素有默认值,而且是合法的,你可以通过这个,设置默认校验通过,示例代码如下:
$("#sex").formValidator({onshow:"请选择你的性别",onfocus:"没有第三种性别了,你选一个吧",oncorrect:"输入正确",defaultvalue:"1"}).InputValidator({min:1,max:1,onerror:"性别忘记选了,请确认"}).DefaultPassed();
2、修正了showalert模式下,只有值发生改变的时候才触发校验
3、修改了表单提交的时候,表单元素校验的顺序,现在按照表单元素的流顺序进行校验
4、demo1里集成了datatimemask插件,具体应用,请见“出生日期”的代码
5、避免了插件与别的javascript类库的$符号的冲突
6、修改了api帮助文档
1.2.1
修复表单元素额外校验失败还会提交得bug,即formValidator里的onvalid属性
1.2.0
这个版本,内部函数做了比较大的调整,开放了更多的函数提供给大家使用,使插件灵活性更大
特别申明:请保留插件的版权申明,谢谢
1、修改插件文件名为:formValidator.js ; 对应的正则表达式的库也被命名为formValidatorRegex.js。
2、SelectValidator被合并到InputValidtor中去,请大家赶紧修改,语法兼容,只要替换名称即可。
3、因为InputValidtor合并了SelectValidator,所以API帮助里列举了InputValidtor各属性能起作用的各种表单类型
4、开放3个公共函数,这些函数跟你的配置相关:
SetFailState function("tipid","显示的信息"),在showword模式下,如果你的额外校验没有通过,你可以通过它来设置成失败信息和状态。
IsOneValid function("表单元素id"),主要来判断单个表单元素是否验证通过。
GetLength function("表单元素id"),判断表单元素的选择长度(个数)。
checkbox或radiobutton表示(同组)选择的个数。
select表示选择的selectedIndex值。
其它的表示字符长度。
5、formValidator里的onvalid属性,增加了返回值,即插件校验成功后,你还可以额外校验。例子请参见demo1里的【额外校验】
return true表示这个表单元素校验成功
return false表示这个表单元素校验失败
错误信息,你可以通过SetFailState函数要写
6、修复在firefox下,长度验证出错的bug。发现jQuery1.2不支持这么写:$("#textarea").attr("type")
1.1.2
1、为AjaxValidator添加一个addidvalue属性(是否自动添加id和值到url参数后面)
为了修复AjaxValidator在配置信息的时候,取不到运行时候值的bug
插件将自动在url后面自动添加,形式为"id=value"的网页参数
在服务器端,你可以通过Request.querystring["id"]来取值
具体演示请看demo1里的用户名输入和Default.aspx
1.1.1版本
1、紧急修复AjaxValidator校验状态出错,以及显示状态的bug
2、调整了内部OneIsValid和formValidator函数的算法,使判断更加合理、有效
1.1 功能比较全的一个版本.
1、开放AjaxValidator表单验证,主要对$.ajax()的调用,具体演示请看demo1里的用户名输入和Default.aspx
用户名在服务器端的校验,我是用了随机数取模,但是每次运行返回要么都是偶数要么都是奇数(不知道什么问题)。
先是长度校验,再是格式校验,最后才是服务器端校验
2、修正AjaxValidator校验状态出错,以及显示状态的问题bug。
3、修正对AjaxValidator的api帮助。
4、修正内部几个函数的一些bug。
5、未了适应AjaxValidator,调整formValidator初始化的一部分功能。
1.0.3
1、把InputValidator的属性defaultvalue移到formValidator下。
目前defaultvalue属性只支持input和select两种tag
2、增加demo1里的范例内容,增加了性别的选择和默认值的设置(性别、学历、爱国、国家区号、你的描述)。
3、增加RegexValidator的一个属性:datatype,支持外置正则表达式的枚举类型,具体请见demo3.html
你可以额外包含这个js文件,定义一个数据类型,你可以自由的修改里面的名称和对应的值
var regexEnum =
{
intege:"^([+-]?)\\d+$" //整数
}
如何调用范例:$("#zs").formValidator({onshow:"请输入整数",oncorrect:"谢谢你的合作,你的整数正确"}).RegexValidator({regexp:"intege",datatype:"enum",onerror:"整数格式不正确"});
4、修正自动纠错的一个bug
5、修正了api帮助文档
1.0.2版本
1、为formValidator增加tipid属性。
主要为了解决多个表单元素共用一个TIP的问题,提示错误的原则:后面的成功或失败信息都不覆盖前面的失败信息
针对这个属性,已经更新了demo1和源码,具体请看范例
2、修正了部分bug和api说明文档疏漏的地方
1.0.1版本
1、修改formValidator下的属性onvalid
增加2个参数,参数1:对象本身 参数2:值。主要是校验通过后,你还希望执行一些操作,你可以方便的取到对象和值
2、去掉InputValidator、SelectValidator、CompareValidator、RegexValidator、AjaxValidator下的onvalid属性
写文档的时候太过匆忙,所以属性加多了,帮助文档和源码都已经修正
3、为formValidator增加属性:automodify,默认值:false。
这个属性只要针对,如果你输入的是非法的,离开焦点的时候将自动恢复上次的值,并且先都有提示,showword模式的提示变成onshow状态
4、为formValidator增加onfocusevent和onblurevent
因为jQuery的事件注册是覆盖的,不是attachEvent追加的,所以再托管出这两个被插件霸占住的事件onfocus和onblur
onfocusevent:获得焦点的时候,处理系统自动处理的代码后,继续你希望再执行的代码
onblurevent:失去焦点的时候,处理系统自动处理的代码后,继续你希望再执行的代码
5、提交验证过程中,如果没有验证通过,则第一个出错的获得焦点
6、申明一点:RegexValidator采用的是显式构造函数new RegExp("pattern"[,"flags"]); 由于Javascript 中'\' 被用作转义字符,所以在使用显示构造函数构造实例对象的时候,需要使用'\\' 代替'\'
1、插件应用效果图浏览
效果图1:
效果2:
2、jQuery pageValidator插件主要功能
1、2种错误提示模式:文字提示、窗口提示
2、呈现时的提示
3、可以为空,空时的提示
4、获得焦点提示
5、发生不同种错误,给出不同的提示
6、可以为空,不为空时要检验控制
7、长度控制、值比较
8、范围控制
9、2个对象比较控制
10、选择个数控制
11、Ajax读取数据
12、正则表达式控制
13、同个页面,你可以划分多个校验组,每个组的校验都是互不影响的
14、单个对象或者整个校验组验证完成、或者出错,有额外的回调函数提供
3、jQuery pageValidator插件 API帮助文档
目前支持4种大的校验方式,分别是: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 |
输入正确后的提示 |
"输入正确" |
|
当你焦点离开控件的时候,如果输入正确将出现该提示 |
onvalid |
校验通过后的回调函数 |
null |
√ |
参数1:对象本身 参数2:值 校验通过后,你还希望执行一些操作,你可以通过这个属性来执行。 返回值的意义:
true/false |
校验成功/失败 |
字符串 |
校验失败,返回值当作自定义错误 |
无 |
处理过程 |
|
onfocusevent |
获得焦点后要追加的回调函数 |
null |
√ |
参数1:对象本身 |
onblurevent |
失去焦点后要追加的回调函数 |
null |
√ |
参数1:对象本身 |
tipid |
显示错误的容器ID |
表单ID+"Tip" |
|
|
defaultvalue |
默认值 |
null |
√ |
所有input和select表单。如果你不设置就保持原值,一旦设置就设为默认值。 |
|
|
|
|
|
InputValidator: |
|
属性 |
属性名称 |
默认值 |
详细解释 |
type |
比较类型 |
"size" |
(对select无效)"size":表示比较长度 "value":比较值。 |
min |
最小长度/值 |
0 |
(对select无效) |
max |
最大长度/值 |
99999999999999 |
(对select无效) |
onerror |
发生错误的提示 |
"输入错误" |
|
defaultvalue |
默认值 |
null |
能满足预设默认值的需求 |
|
|
|
|
|
CompareValidator: |
|
属性 |
属性名称 |
默认值 |
详细解释 |
desID |
要比较控件的ID |
"" |
要跟源目标进行比较的目标ID |
operateor |
比较符号 |
"=" |
一共有如下几种类型:=、!=、>、>=、<、<= |
datatype |
数据类型 |
"string" |
目前只支持2种:"string"、"number" |
onerror |
发生错误的提示 |
"输入错误" |
|
|
|
|
|
|
RegexValidator: |
|
属性 |
属性名称 |
默认值 |
详细解释 |
regexp |
正则表达式 |
"" |
采用的是显式构造函数new RegExp("pattern"[,"flags"]); 由于Javascript 中'\' 被用作转义字符,所以在使用显示构造函数构造实例对象的时候,需要使用'\\' 代替'\' |
param |
附加参数 |
"i" |
g:代表可以进行全局匹配。 i:代表不区分大小写匹配。 m:代表可以进行多行匹配。 可以任意组合,当然也可以不加参数 |
datatype |
数据类型 |
"string" |
"string":自己写的表达式,"enum":枚举名。具体请见demo3.htm,你可以自己修改附加pageValidatorRegex.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 |
|
buttons |
你点提交的按钮(组)jQuery对象 |
null |
当你触发了ajax校验,buttons里对应的按钮(组)就会灰掉,一直等待服务器返回数据为止 |
error |
当请求失败时调用的函数 |
"请求失败" |
你可以自己定义这个错误,在error里自动打出 |
|
|
FunctionValidator |
属性 |
属性名称 |
默认值 |
返回值的解释 |
fun |
外部函数名 |
默认当作处理过程 |
true/false |
校验成功/失败 |
字符串 |
校验失败,返回值当作自定义错误 |
无 |
处理过程 |
|
|
|
|
公共函数: |
主要是设置全局参数和判断是否通过校验 |
函数名 |
函数说明 |
$.formValidator.initConfig |
参数:配置类型
属性 |
默认值 |
说明 |
validatorGroup |
"1" |
你要针对哪个组进行配置 |
alertMessage |
false |
是否弹出窗口 |
onSuccess |
null |
该组校验通过后的回调函数,返回false,阻止表单的提交 |
submitOnce |
false |
校验通过后,是否灰掉所有的提交按钮 |
onError |
null |
该组校验失败后的回调函数, 有两个参数
第一个 |
一个校验没有通过的错误信息 |
第二个 |
一个校验没有通过的元素对象 |
|
|
$.formValidator.PageIsValid |
一个参数: 不是配置类型
validatorGroup |
"1" |
你要针对哪个组进行验证 |
|
$.formValidator.IsOneValid |
一个参数: 当时设置验证的表单元素ID。 返回是否校验成功的信息。 |
$.formValidator.SetFailState |
function("tipid","显示的信息") 在showword模式下,如果你的额外校验没有通过,你可以通过它来设置成失败信息和状态 |
$.formValidator.GetLength |
function("表单元素id") 判断表单元素的选择长度(个数) checkbox或radiobutton表示选择的个数。 select表示选择的selectedIndex值。 其它的表示字符长度。 |
|
4、下载API帮助、源码、示例下载 http://www.cnblogs.com/Files/wzmaodong/formValidator2.0.rar
5、示例代码
<script type="text/javascript">
$(document).ready(function(){
$.formValidator.initConfig({onError:function(){alert("校验没有通过,具体错误请看错误提示")}});
$("#test1").formValidator({onshow:"请输入用户名",onfocus:"用户名至少6个字符,最多10个字符",oncorrect:"恭喜你,你输对了"}).InputValidator({min:6,max:10,onerror:"你输入的用户名非法,请确认"});
$("#test2").formValidator({onshow:"请选择你的兴趣爱好(至少选择3个,最多选择5个)",onfocus:"你至少选择3个,最多选择5个",oncorrect:"恭喜你,你选对了"}).InputValidator({min:3,max:5,onerror:"你选的个数不对(至少选择3个,最多选择5个)"});
$("#test3").formValidator({onshow:"请选择你的兴趣爱好(至少选一个)",onfocus:"你至少选择1个",oncorrect:"恭喜你,你选对了"}).InputValidator({min:1,onerror:"你选的个数不对"});
$("#xueli").formValidator({onshow:"请选择你的学历",onfocus:"学历必须选择",oncorrect:"谢谢你的配合"}).SelectValidator({onerror: "你是不是忘记选择学历了!"});
$("#password1").formValidator({onshow:"请输入密码",onfocus:"两次密码必须一致哦",oncorrect:"密码一致"}).InputValidator({min:1,onerror:"密码不能为空,请确认"}).CompareValidator({desID:"password2",operateor:"=",onerror:"2次密码不一致,请确认"});
$("#nl").formValidator({onshow:"请输入的年龄(1-99岁之间)",onfocus:"只能输入1-99之间的数字哦",oncorrect:"恭喜你,你输对了"}).InputValidator({min:1,max:99,type:"value",onerror:"年龄必须在1-99之间,请确认"});
$("#aiguo").formValidator({onshow:"爱国的人一定要选哦",onfocus:"你得认真思考哦",oncorrect:"不知道你爱不爱,反正你是选了"}).InputValidator({min:1,max:1,onerror:"难道你不爱国?你给我选!!!!"});
$("#shouji").formValidator({empty:true,onshow:"请输入你的手机号码,可以为空哦",onfocus:"你要是输入了,必须输入正确",oncorrect:"谢谢你的合作",onempty:"你真的不想留手机号码啊?"}).InputValidator({min:11,max:11,onerror:"手机号码必须是11位的,请确认"}).RegexValidator({regexp:"^[1][0-9]{10}$",onerror:"你输入的手机格式不正确"});
$("#lxdh").formValidator({empty:true,onshow:"请输入你的联系电话,可以为空哦",onfocus:"你要是输入了,必须输入正确,格式例如:0577-88069620",oncorrect:"谢谢你的合作",onempty:"你真的不想留联系电话了吗?"}).RegexValidator({regexp:"^[[0-9]{3}-|\[0-9]{4}-]?(\[0-9]{8}|[0-9]{7})?$",onerror:"你输入的联系电话格式不正确"});
$("#ms").formValidator({onshow:"请输入你的描述",onfocus:"描述至少要输入10个汉字或20个字符",oncorrect:"恭喜你,你输对了"}).InputValidator({min:20,onerror:"你输入的描述长度不正确,请确认"});
});
</script>
6、特别说明
如果你在使用过程中碰到什么问题请给我留言,发现bug请不要自行修改,也请留言,达到完善插件的目的,真正服务每个程序开发人员 .
请保留插件的版权申明,谢谢
引用地址:http://www.cnblogs.com/wzmaodong/archive/2008/02/04/1034901.html
在博客园看到非常强大好用,强烈推荐!!!
posted on 2008-03-06 21:41
阿门119 阅读(8695)
评论(3) 编辑 收藏 引用 网摘 所属分类:
JavaScript