iValidate控件演示


iValidate验证控件基于jquery，首先要引入jquery2以上版本。
其次引入iValidate.js，iValidate.css。
iValidate控件可验证input类型为text和password以及textarea元素。
如需验证select请使用扩展验证（supplyRules）。
如需验证一组radio或一组checkbox请使用扩展验证（supplyRules）并配合隐藏input只显示消息来实现。
通过API可实现单或多元素验证、表单验证、元素禁用、启用、激活销毁等。
控件主要有一下几种验证类型：


1.必填验证（required）



示例：


2.长度验证（length）



示例：


3.数字范围验证（numRange）

整数验证：  

小数验证：  

示例：


4.预定义正则验证（regTypes）

单正则验证：  

复合正则验证：  

示例：


5.扩展验证（supplyRules）

单个扩展验证：  

复合个扩展验证：  

示例：


6.混合验证

必填与长度验证：  

必填、长度验证、正则验证：  

示例：


7.div中的tip消息框


当你的表单中字段过多时，表单过高时，你对div增加overflow样式，
这个时候，你需要在该div的内部再建一个元素包裹住被验证的元素，上同时增加position: relative这个样式，
注意，不能把position: relative和overflow写在同一个元素中。
为了使你在滚动div时，tip消息验证一起滚动。







示例：


8.API

方法 参数 返回值 使用说明

iValidate.init(element, config);

 element，config N/A

element为HTML的DOM对象。
可修改config，其的结构及默认值为： 

                  config: {
                     
                    // 位置
                    position: {
                       
                      // tip上中下，左中右显示位置
                      at: "bottom right",
                       
                      // tip和尖角的位置调整
                      adjust: {
                        tipV: 0, // tip上下调整的位置
                        tipH: 0, // tip左右调整的位置
                        angleV: 0, // 尖角上下调整的位置
                        angleH: 0, // 尖角左右调整的位置
                        trslt: 2.3 // canvas绘画移动调整参数
                      }
                    },
                     
                    // 尖角宽高，和线宽
                    angleSzie:{
                      width: 8,
                      height: 8,
                      lineWidth: "auto"
                    },
                     
                    // tip的样式与显示动画，有scaleFade和fade两种可选
                    style: {
                      classes: "ivtip-default",
                      effect: "scaleFade"
                    },
                     
                    // 内容
                    content: "",
                    // 是否初始化时，创建Tip
                    isInitzCreateTip: false,
                    // 是否自动重置位置，以达到在放大缩小页面时tip在正确位置
                    autoReposition: true,
                    // 是否自动重绘canvas，以达到在放大缩小页面时尖角的分辨率正确
                    autoReDraw: true,
                    // 是否绑定触发验证事件（为false时，输入或鼠标移动至需要验证的元素不在做验证，需通过$.fn.ivValidForm()或$.fn.ivValid()触发验证）。
                    isValidEvent: true,
                    // 当isValidEvent为false时，自动隐藏tip的时间。
                    tipAutoHideTime: 3000,
                    // 延时执行tip显示或隐藏的时间
                    tipTimeout: 120,
                    // 重置Tip位动画速度
                    repTipSpeed: 100,
                    //div层级
                    zindex: 15000
                  }

iValidate.setConfig(configObj)

 configObj N/A

全局设置tip配置；
如： 

                
                var config = {
                  
                  // 位置
                  position: {
                    
                    // tip上中下，左中右显示位置
                    at: "bottom right",
                    
                    // tip和尖角的位置调整
                    adjust: {
                      tipV: 0, // tip上下调整的位置
                      tipH: 0, // tip左右调整的位置
                      angleV: 0, // 尖角上下调整的位置
                      angleH: 0, // 尖角左右调整的位置
                      trslt: 2.3 // canvas绘画移动调整参数
                    },

                    // 是否绑定触发验证事件（为false时，输入或鼠标移动至需要验证的元素不在做验证，需通过$.fn.ivValidForm()或$.fn.ivValid()触发验证）。
                    isValidEvent: true,
                    // 当isValidEvent为false时，自动隐藏tip的时间。
                    tipAutoHideTime: 3000,
                  }
                }
                
                iValidate.setConfig(config);

iValidate.setRegTypes(regTypeObj)

 regTypeObj N/A

全局正则验证规则；
如： 

                var regTypeObj = {
                  "test1": {"regExp": /^\w+([-+.]\w+)/, "contentText": "消息1！"},
                  "test2": {"regExp": /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])/, "contentText": "消息2！"}
                };
                iValidate.setRegTypes(regTypeObj);

iValidate.setSupplyRules(supplyRuleObj)

 supplyRuleObj N/A

全局扩展规则，注：补充验证的方法需要返回布尔值。

              iValidate.setSupplyRules({
                key1: {
                  contentText: 'xxxx', // 消息内容。
                  rule: function($elemt){
                    if(false){
                        return false;
                      }
                      return true
                    }
                  },
                  key2: {
                    /*
                     * 需要$.fn.ivValidForm()或$.fn.ivValid()触发异步验证。
                     * 是否异步验证（默认为false）。rule中会返回回调函数。
                     * 一般用于ajax异步调用后台验证规则，boolean值作为callback的参数。
                     * $elemt为验证元素的jquery对象
                     */ 
                    isAsync: true,
                    contentText: 'yyyyy', // 消息内容。可被callback中第二个参数覆盖
                    rule: function($elemt, callback){

                      // 在页面中可把多个参数放入$elemt，再从此处取出。

                      // 判断条件是否满足执行。
                      if(yy){
                        return $.ajax({
                          url: 'xx',
                          data: {xx: 'xx'},
                          success: function(data, textStatus, jqXHR){

                            /* 
                             * 如果返回的data类型是字符串或对象，根据实际情况必须设置jqXHR.validStatus和data为相同的boolean值。
                             * data的值用于显示异常消息，jqXHR.validStatus参与验证的返回值计算。
                             * 如果data的返回值是boolean则无需操作。直接callback(data);，否则根据实际情传入true（通过验证）或false（未通过）
                             */
                            if($.type(data) == 'string'){
                                // 此处设置为false，只是例子，请根据实际需要设置
                                jqXHR.validStatus = false;
                                data = false;
                            }

                            // callback第一个参数需要boolean，第二个参数为消息内容，不写的话为contentText设置的内容
                            callback(data, '动态消息内容');
                          }
                        });
                      }else{
                        callback(false);
                        return false;
                      }
                    }
                  }
              });

$.fn.ivValidForm()

 callback/不传 true/false

通过jquery选择器得到表单的jquery对象，再调用ivValidForm()方法。
如：$("#formId").ivValidForm();

当$("#formId").ivValidForm(function(validStatus){....})异步验证时，

validStatus参数为验证状态，true表示通过验证，false表示未通过。

且需要配合设置扩展规则中isAsync:true参数才能开启异步验证功能。

$.fn.ivValid()

 callback/不传 true/false

通过jquery选择器得到需验证jquery对象，再调用ivValid()方法。
如：$("input").ivValid();

$.fn.ivValid(function(validStatus){....})与$.fn.ivValidForm(function(validStatus){....})的使用方式类似。

$.fn.ivSetContent(content)

 content N/A

用来设置验证失败后的消息提示内容。
如：$("#text").ivSetContent("验证不通过！");

$.fn.ivDestroy()

 N/A N/A

销毁验证功能。
如：$("textarea").ivDestroy();

$.fn.ivInvocation()

 N/A N/A

启用元素与验证，主要用于解除只读，禁用以及开启验证。
如：$("#text").ivInvocation();

$.fn.ivDisabled()

 N/A N/A

禁用元素与验证。
如：$("#text").ivDisabled();

$.fn.ivReadonly()

 N/A N/A

只读元素且不验证。
如：$("#text").ivReadonly();

$.fn.ivResetStatus()

 N/A N/A

把元素重置为验证前的显示状态，且还原只读与禁用状态。
如：$("#text").ivResetStatus();

$.fn.ivReposition(isRedraw)

 true/false N/A

isRedraw为是否重画canvas（尖角）默认为true。复位消息提示框该方法只会取jquery返回的第一个元素进行复位。
如：$("#text").ivReposition();