JavaScript练习四之简易表单验证

 写该组件主要是为了练习正则表达式。以针对大部分日常工作上遇到的验证情况添加了多种校验规则，尚未做兼容性处理(┬＿┬)

使用方式
 1、首先于页面中引入js文件<script type="text/javascript" src="formValidate.js"></script>
 2、在页面将校验规则直接与元素进行绑定完成快速校验，方法为<td><input name="number"  class="form_control" '''rule="require;number"'''></td>， 该方法可以使利用内置方式或者自定义方式进行验证。
 3、在简单的绑定完参数之后，可使用一些组件提供的一些内置校验规则完成校验，使用$('form[name="testForm"]').formValid()即可完成验证。
 4、上述方式只能完成一些简单的逻辑校验，如要实现逻辑较为复杂的校验，可使用如下方法，对要验证的表单进行整体的参数设置 ，所有参数配置都不是必须项，所以开发的时候可以根据所需进行取舍。 

  （1）rule:参数为自定义规则，可完成逻辑较为复杂的验证。
  （2）fields：对页面元素进行规则绑定。
  （3）valid：校验完成之后的相应事件。
                $('form[name="testForm"]').formValid({
                        rule   : {
                            'fun1' : function(param){
                            //此处添加自定义校验规则...
                            //返回值true为验证通过，false或者string都为验证失败
                            },
                            'fun2'   : function(param) {
                            //此处添加自定义校验规则...
                            //返回值true为验证通过，false或者string都为验证失败
                            },
                        },
                        fields : {
                             //此处与页面中元素进行绑定，详细校验规则在后续会添加
                        'field1' : 'number', //字段1类型为校验规则为数字
                        'field2' : 'fun1', //字段2使用上述的自定义校验规则1
                        'field3' : 'fun2', //字段3使用上述的自定义校验规则2
                        'field4' : 'number;range[-100~100]',//范围为-100~100的数值
                        'field5' : 'cn;length[~200]',//校验规则为汉字,且汉字长度不得超过200
                        },
                        valid : function(form){
                        //此处为校验成功之后的响应事件
                        alert('表单1验证成功');
                 }
              });

   4、在写好rule自定义规则后，可直接与页面的元素进行绑定。如果存在多个校验，校验优先级为直接绑定<参数配置绑定。如果存在多个同名规则，则校验
   优先级为内置规则<自定义规则，如果同时存在action和valid相应规则，则form中的action参数跳转将失效（这方面可做优化）

 

//@charset "utf-8";
 /**
 * function : 表单验证
 * author   : yinggaozhen
 * create   : 2015-07-28
 * version  : 0.1.8
 */
 (function($, undefined) {
     var GN = 'YingGaoZhen';
     var _isCheck = false;
     var ruleArry;
     isString = function(s) {
         return typeof s === 'string';
     }
     isFunction = function(f) {
          return typeof f === 'function';
     }
     
     function _initValidArray() {
          ruleArry = {
               'require' : [/^\S+$/, "请输入必须值"],
               'number'  : [/^\-?\d*$/, "请输入数字"],
               'tel'     : [/^(?:(?:0\d{2,3}[\- ]?[1-9]\d{6,7})|(?:[48]00[\- ]?[1-9]\d{6}))$/, "电话格式不正确"],
               'mobile'  : [/^1[3-9]\d{9}$/, "手机号格式不正确"],
               'email'   : [/^[\w\+\-]+(\.[\w\+\-]+)*@[a-z\d\-]+(\.[a-z\d\-]+)*\.([a-z]{2,4})$/i, "请输入正确的邮箱"],
               'date'    : [/^\d{4}-\d{1,2}-\d{1,2}$/, "请输入正确日期"],
               'url'     : [/^(https?|ftp):\/\/[^\s]+$/i, "网址格式不正确"],
               'english' : [/^\w*$/, "请输入正确的英文"],
            'cn'        : [/^[\u0391-\uFFE5]+$/, "请输入中文"],
               'stock'   : [/^(((002|000|300|600)[\d]{3})|60[\d]{4})$/, "请输入正确的股票代码"],
          }
     }
     
     $.fn['formValid'] = function(options) {
          _initValidArray();
          new formValid(this, options);
          return this;
     }
     
     function formValid(element, options) {
          var me = this;
          me.$el = element;
          me._init(options);
     }
     
     formValid.prototype = {
          _init : function(options) {
               var me = this;
               me._setOption(options);
               me._checkRule();
               me.$el.on('click' , 'input,textarea', {el : me}, me._focusIn)
                      .on('focusout','input,textarea', {el : me}, me._focusOut)
                      .on('submit',{el : me}, me._submit);
          },
          _validate : function(fieldVal,rule) {
               if (rule[0].test(fieldVal)) {
                    return true;
               } else {
                    return rule[1];
               }
          },
          _checkRule : function() {
               var me = this,
                   fields = me._getField();
               $form = me.$el;
               me._isAjaxSubmit = true;
               me._errorFields = new Array();
               $.each(fields, function(field, rule){
                    var fieldVal = $form.find('*[name="'+field+'"]').val();
                    var ret = me._getRule(fieldVal, rule);
                    if(true !== ret) {
                         me._isAjaxSubmit = false;
                         if('boolean' === typeof ret) ret = '';
                         me._addErrorFields(field, ret);
                    }
               });
          },
          _getRule : function(fieldVal, rule) {
               var me = this,
                   validRet = false,
                   rules,
                   tRe;
               if (isString(rule)) {
                    validRet = true;
                    rules = rule.split(';');
                    $.each(rules, function(ruleIndex, ruleValue){
                         tRet = me._getCustomRule(fieldVal, ruleValue);
                         if(null === tRet){
                              if(typeof ruleArry[ruleValue] !== 'undefined') {
                                   tRet = me._validate(fieldVal, ruleArry[ruleValue]);
                              } else {
                                   tRet = me._changeRule(fieldVal, ruleValue);
                              }
                         }
                         validRet = tRet === true ? true : tRet;
                         if (true !== validRet) {
                              return false;
                         }
                    })
               }
               return validRet;
          },
          _changeRule : function(fieldVal, rule) {
               var me  = this,
                    ret = fieldVal,
                    filterRet = false;
               if(-1 !== rule.indexOf('range')) {
                    filterRet  = me._filterShell(fieldVal, 'range', rule);
               } else if (-1 !== rule.indexOf('length')) {
                    filterRet  = me._filterShell(fieldVal, 'length', rule);
               }
               return filterRet;
          },
          _addErrorFields : function(fields, errorMsg){
               var errorField = {fields:fields,errorMsg:errorMsg};
               this._errorFields.push(errorField);
          },
          _filterShell : function(fieldVal, ruleType, rule) {
               var shellReg = /(?:\[)(\-?\d*\~\-?\d*)(?:\])/;
               var range = shellReg.exec(rule)[1].split('~'),
                    ret = false,
                    v = fieldVal,
                    a,
                    b;
               a = range[0];
               b = range[1];
               switch(ruleType){
               case 'range' :
                    v = +v;
                    break;
               case 'length' :
                    v = v.length;
               default:
                    break;
               }
               if (a && b && v >= a && v <= b) {
                    ret = true;
               } else if (!a && b && v <= +b){
                    ret = true;
               } else if (a && !b && v >= +a) {
                    ret = true
               } else {
                    ret = '请输入指定范围的数值';
               }
               return ret;
          },
          _blurInputTips : function($input) {
               var me = this,
                    name = $input[0].name,
                    inputType = $input.attr('type'),
                    spanClass;
               var inputInfo = me._getInputState($input);
               $spanClass = $input.next('span');
               if (inputType != 'submit') {
                    if (inputInfo.state == -1) {
                         $input.removeClass('success').addClass('error');
                         if(undefined !== $spanClass.html()) {
                              $spanClass.removeClass('reg-span-success').addClass('reg-span-error');
                              $spanClass.html(inputInfo.msg);
                         } else {
                              $input.after('<span for="'+name+'" ermsg class="reg-span-error">'+inputInfo.msg+'</span>');
                         }
                    } else if (inputInfo.state == 0) {
                         $input.removeClass('error').addClass('success');
                         if(undefined !== $spanClass.html()) {
                              $spanClass.removeClass('reg-span-error').addClass('reg-span-success');
                              $spanClass.html('<img src="sucess.png">');
                         } else {
                              $input.after('<span for="'+name+'" ermsg class="reg-span-success"><img src="sucess.png"></span>');
                         }
                    }
               }
          },
          _showErrorTips : function() {
               var me = this,
                    $form = me.$el,
                    $input,
                    inputList,
                    inputInfo;
               inputList = $form.find('input');
               $.each(inputList, function(pi, pv) {
                    $input = $(pv);
                    me._blurInputTips($input);
               });
          },
          _getInputState : function($input) {
               var me = this,
                    ef = this._errorFields,
                    ret = {
                         msg : '',
                         state : 0
                    },
                    fields,
                    name = $input[0]['name'];
               
               fields = me._getField();
               $.each(ef, function(efi, efv) {
                    if (efv.fields == name) {
                         msg = efv.errorMsg;
                         ret.msg = msg;
                         ret.state = -1;
                    }
               })
               if (undefined == fields[name]) {
                    ret.state = -2;
               }
               return ret;
          },
          _getErrorFields : function() {
               return this._errorFields;
          },
          _setOption : function(options) {
               if ('undefined' === typeof options.fields) {
                    options.fields = {};
               }
               this._options = options;
          },
          _getField : function() {
               var me = this;
               $inputList = me.$el.find('[rule]');
               $.each($inputList, function(ipi, ipv){
                    var name = $(ipv).attr('name'),
                         rule = $(ipv).attr('rule');
                         if (undefined === me._options.fields[name]) {
                              me._options.fields[name] = rule;
                         }
               });
               return me._options.fields;
          },
          _getCustomRule : function(fieldVal, cusRule) {
               var cusRuleFunc,
                   ret = null;
               if('undefined' !== typeof this._options.rule && 'undefined' !== typeof this._options.rule[cusRule]) {
                    cusRuleFunc = this._options.rule[cusRule];
                    if(isFunction(cusRuleFunc)){
                        ret = cusRuleFunc(fieldVal);
                        ret = undefined === ret ? true : ret;
                    }
               }
               return ret;
          },
          _focusIn : function(e) {
               var el = e.data.el,
                    $input = $(this),
                    inputInfo;
               el._checkRule();
               el._blurInputTips($input);
          },
          _focusOut : function(e) {
               var el = e.data.el,
                    $input = $(this),
                    inputInfo;
               el._checkRule();
               el._blurInputTips($input);
          },
          _submit : function(e) {
               var me = e.data.el,
                   form = e.target,
                    isSubmit;
               
               me._checkRule();
               isSubmit = me._isAjaxSubmit;
               e.preventDefault();
               if (true === isSubmit && 'function' === typeof me._options.valid) {
                    me._options.valid(me.$el);
               } else if(true === isSubmit && 'undefined' === typeof me._options.valid) {
                    form.submit();
               } else {
                    me._showErrorTips();
               }
          },
     }
 }(jQuery));