jQuery formValidator使用说明

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验证时在没有改变值的情况下，失去焦点时没有进行验证。目前不影响使用。

 

四、formValidator分组，formValidator同一页面使用两次，ajaxForm提交

 

$.formValidator.initConfig({
    validatorGroup:"2",
    formID:"validateEmailForm",
    AjaxPrompt : "有数据正在异步验证，请稍等...",
    theme : "126",
    submitOnce : true,
    ajaxForm : {
        type : "POST",
        dataType : "html",
        buttons : $("#button"),
        url : "sendEmailValidateLink",
        success : function(data) {
            if(data == "noLogin"){
                alert("您还没有登录！");
            }else if (data == "success") {
                $("#emailValidatedDiv").html("");
                return true;
            }
            return false;
        }
    },
    onError : function(msg) {
    },
    submitAfterAjaxPrompt : '有数据正在异步验证，请稍等...'
});

----------------------------------------------------------------
$("#valid").formValidator({
    validatorGroup:"2",
    onShowFixText : "点击验证码可更换验证码，验证码不区分大小写。",
    onShow : "请输入验证码",
    onFocus : "验证码的长度必须是4位",
    onCorrect : "验证码正确"
}).inputValidator({
    min : 4,
    max : 4,
    onError : "验证码的长度必须是4位,请确认"
}).ajaxValidator({
    type : "POST",
    dataType : "html",
    async : true,
    url : "validateCode",
    success : function(message) {
        if (message == "success") {
            return true;
        }else{
            return false;
        }
    },
    buttons : $("#button"),
    error : function(jqXHR, textStatus, errorThrown) {
        alert("服务器忙" + errorThrown);
    },
    onError : "验证码错误",
    onWait : "正在进行合法性校验，请稍候..."
});

提交按钮是判断：

var setting = {};

$("#valid").formValidator.pageIsValid(setting.validatorGroup);