jQuery formValidator使用说明

说明：jQuery formValidator表单验证插件，它是基于jQuery类库，实现了js脚本于页面的分离。对一个表单对象，你只需要写一行代码就可以轻松实现20种以上的脚本控制。现支持一个表单元素累加很多种校验方式,采用配置信息的思想，而不是把信息写在表单元素上，能比较完美的实现ajax请求。并结合jquery.boxy实现遮罩提示。

 

一、 所需元素

 

jquery-1.3.2.js（需要jquery-1.3.2以上版本）

formValidator.js（表单验证基础js）

formValidatorRegex.js（表单验证所需正则js）

jquery.boxy.js（遮罩提示js）

validator.css（表单验证样式）

boxy.css（遮罩提示样式）

 

二、 使用说明

 

a) 使用方法

 

i. 加载所需js和css文件

ii. 初始化验证控件（

$.formValidator

.initConfig({

   formid:"form1",

   onerror:function(msg){

     Boxy.alert("<center>"+msg+"</center>",

     null,{title:"提示信息"});}

});

iii. 表单验证

          $("#nl")

         .formValidator({

            onshow:"请输入的年龄（1-99岁之间）",

            onfocus:"只能输入1-99之间的数字哦",

            oncorrect:"恭喜你,你输对了"})

         .inputValidator({

           min:1,max:99,type:"value",

           onerrormin:"你输入的值必须大于等于1",

           onerror:"年龄必须在1-99之间，请确认"})

          .defaultPassed();

     });

b) 参数说明：

i. 初始化验证控件：initConfig

1. Formid（form 表单 id）

2. Debug（是否使用debug模式，默认false）

3. Validatorgroup（验证表单分组）

4. Alertmsg（alert输出提示信息，默认false）

5. Boxyalertmsg（boxy.alert输出提示信息，默认false）

6. Validobjectids（多个表单id，用“,”分隔）

7. Onsuccess（成功时回调涵数）

8. Onerror（失败时回调涵数）

9. Submitonce（是否提交表单，默认false）

10. Autotip（是否使用自动验证提示，默认false）

ii. 表单验证

  验证方式有如下几种

1. formValidator（基础验证）

初始参数：

   validatorgroup : "1",

     empty :false,

     submitonce : false,

     automodify : false,

     onshow :"请输入内容",

     onfocus: "请输入内容",

     oncorrect: "输入正确",

     onempty: "输入内容为空",

     defaultvalue : null,

     bind : true,

     validatetype : "InitValidator",

     tipcss : 

     {

        "left" : "10px",

        "top" : "1px",

        "height" : "20px",

        "width":"250px"

     },

triggerevent:"blur"

2. inputValidator(input验证)

初始参数:

   isvalid : false,

     min : 0,

     max : 99999999999999,

     type : "size",

     onerror:"输入错误",

     validatetype:"InputValidator",

   empty:{leftempty:true,rightempty:true,leftemptyerror:null,rightemptyerror:null}

3. compareValidator（比较验证）

 初始参数：

   isvalid : false,

          desid : "",

          operateor :"=",

          onerror:"输入错误",

 validatetype:"CompareValidator"

4. ajaxValidator(ajax验证)

   初始参数：

isvalid : false,

     lastValid : "",

     type : "GET",

     url : "",

     addidvalue : true,

     datatype : "html",

     data : "",

     async : true,

     cache : false,

     beforesend : function(){return true;},

     success : function(){return true;},

     complete : function(){},

     processdata : true,

     error : function(){},

     buttons : null,

     onerror:"服务器校验没有通过",

     onwait:"正在等待服务器返回数据",

   validatetype:"AjaxValidator"

5. regexValidator（正则验证）

初始参数：

  isvalid : false,

    regexp : "",

    param : "i",

    datatype : "string",

    onerror:"输入的格式不正确",

validatetype:"RegexValidator"

 

三、 注意事项

 

formValidatorRegex.js方便扩展，可把常用的正则加入这个文件。

Bug：还有一个ajax验证时在没有改变值的情况下，失去焦点时没有进行验证。目前不影响使用。