jQuery formValidator使用说明

司空凌
2023-12-01

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. 加载所需jscss文件

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. Formidform 表单 id

2. Debug(是否使用debug模式,默认false

3. Validatorgroup(验证表单分组)

4. Alertmsgalert输出提示信息,默认false

5. Boxyalertmsgboxy.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);

 类似资料: