jQuery formValidator表单验证插件

时间：2022-09-12 10:34:26
1.01版本
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、jQuery pageValidator插件主要功能

1、2种错误提示模式：文字提示、窗口提示

2、呈现时的提示
3、可以为空，空时的提示
4、获得焦点提示
5、发生不同种错误，给出不同的提示
6、可以为空，不为空时要检验控制
7、长度控制、值比较
8、范围控制
9、2个对象比较控制
10、选择个数控制
11、Ajax读取数据
12、正则表达式控制
13、同个页面，你可以划分多个校验组，每个组的校验都是互不影响的
14、单个对象或者整个校验组验证完成、或者出错，有额外的回调函数提供

目前支持5种大的校验方式，分别是：InputValidator（针对input、textarea控件）、SelectValidator（针对select控件）、CompareValidator、AjaxValidator、RegexValidator
每种格式支持的控件类型如下：

input textarea select
校验方式 text radio checkbox file textarea select-one
InputValidator √ √ √ √ √  
SelectValidator           √
CompareValidator √     √ √  
AjaxValidator √ √ √ √ √ √
RegexValidator √     √ √  
如果你用了不支持的校验功能，插件将忽略这个校验功能。



插件目前提示错误，有两种模式：showword和showalert,即文字提示和窗口提示，下面的5大验证方式，针对showalert这种方式不是都必须的，有些配置是没有作用的
下面分别罗列全局初始化和5种校验方式公开的属性
       
formValidator: 用来做初始化的类型，必须先执行
属性 属性名称 默认值 showword showalert 详细解释
validatorGroup 校验组 "1" √ √ 一个页面的控件可以分成多个组，分开校验
empty 是否可以为空 false √    
automodify 输入错误离开焦点的时候，自动修复错误 false √ √ 先给出提示然后，自动修复，目前只支持text、file、textarea三种类型
onempty 空时候的提示 "输入内容为空" √   可以为空，为空时候的提示
onshow 显示时候的提示 "请输入内容" √    
onfocus 获得焦点的提示 "请输入内容" √    
oncorrect 输入正确后的提示 "输入正确" √   当你焦点离开控件的时候，如果输入正确将出现该提示
onvalid 校验通过后的回调函数 null √ √ 参数1：对象本身 参数2：值 校验通过后，你还希望执行一些操作，你可以通过这个属性来执行
onfocusevent 获得焦点后要追加的回调函数 null √ √ 参数1：对象本身
onblurevent 失去焦点后要追加的回调函数 null √ √ 参数1：对象本身
       
InputValidator：  
属性 属性名称 默认值 详细解释
type 比较类型 "size" "size":表示比较长度 "value":比较值。
min 最小长度/值 0  
max 最大长度/值 99999999999999  
defaultValue 默认值 null 能满足radio或checkbox默认选中某选项的需求
onerror 发生错误的提示 "输入错误"  
       
SelectValidator:  
属性 属性名称 默认值 详细解释
defaultValue 默认值 "必须选择" 能满足select默认选中某个选项
       
CompareValidator：  
属性 属性名称 默认值 详细解释
desID 要比较控件的ID "" 要跟源目标进行比较的目标ID
operateor 比较符号 "=" 一共有如下几种类型:=、!=、>、>=、<、<=、
datatype 数据类型 "string" 目前只支持2种:"string"、"number"
onerror 发生错误的提示 "输入错误"  
       
RegexValidator:  
属性 属性名称 默认值 详细解释
regexp 正则表达式 "" 采用的是显式构造函数new RegExp("pattern"[,"flags"]); 由于Javascript 中'\' 被用作转义字符，所以在使用显示构造函数构造实例对象的时候，需要使用'\\' 代替'\'
param 附加参数 "i" g：代表可以进行全局匹配。
i：代表不区分大小写匹配。
m：代表可以进行多行匹配。
可以任意组合,当然也可以不加参数
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  
error 当请求失败时调用的函数 "请求失败" 你可以自己定义这个错误，在error里自动打出
       
 
公共函数: 主要是设置全局参数和判断是否通过校验
函数名 函数说明
jQuery.formValidator.initConfig 参数：配置类型
属性 默认值 说明
validatorGroup "1" 你要针对哪个组进行配置
alertMessage false 是否弹出窗口
onSuccess null 该组校验通过后的回调函数,返回false，阻止表单的提交
submitOnce false 校验通过后，是否灰掉所有的提交按钮
onError null 该组校验失败后的回调函数
jQuery.formValidator.PageIsValid 一个参数： 不是配置类型
validatorGroup "1" 你要针对哪个组进行验证
       
问答：      
1、如何实现一个控件，根据不同的情况，实现不同的控制？
你只需要在你的不同种情况下，重新设置你的【一行代码】
 
2、一个页面上我有几个tab页，如何实现每个Tab页上的控件单独校验？
每个Tab页上需要校验的控件，你在写【一行代码】的时候，显示的声明组号
 
3、我采用的页面上文字问题的方式，点提交的时候，有校验未通过的，除了文字提示外，还可以再弹出窗口提示吗？
这个问题很简单，你只要设置改组的全局配置，
jQuery.formValidator.initConfig({onError:function(){alert("有部分校验没有通过，请看页面具体提示");}})
 
3、所有校验通过后，我还要再做别的判断可以吗？我自己的判断没有通过可以中断提交吗？

同样很简单，你页只需设置该组的全局配置，
jQuery.formValidator.initConfig({onSuccess:function()
{
if(你的额外判断失败)
     return false;
else
     return true;
}})


2、jQuery pageValidator插件 API帮助文档

 


3、下载API帮助、源码、示例
下载 http://www.cnblogs.com/Files/wzmaodong/pageValidator.rar



4、示例代码

<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>
标签：

相关文章