jQueryが高度に柔軟なフォーム検証機能を実現する例【UIなし】

この例では、jQueryが高度に柔軟なフォーム検証機能を実現することについて説明します.皆さんの参考にしてください.具体的には以下の通りです.
フォーム検証はフロントエンドの開発過程でよく見られる需要であり、製品の需要、業務ロジックの違い、フォーム検証の方式方法にも違いがある.最も重要なのは、フォーム検証の核心原則は、エラーメッセージの提示が正確で、ユーザーの入力と体験をできるだけ邪魔/干渉しないことです.
このプラグインはjQuery、demoアドレスに依存します.https://github.com/CaptainLiao/zujian/tree/master/validator
以上の原則に基づいて、個人はフォーム検証の共通方法論をまとめた.
開発の考え方をより明確にするために、フォーム検証のプロセスを2つのステップに分けます.第1のステップは、ユーザーが現在の入力の有効性を検証することを入力します.第2のステップでは、フォームの発行時にフォーム全体を検証します.次のレイアウトを考慮します.

ユーザー名

パスワード

パスワードの確認

携帯電話

メールボックス

送信
一般的なJS検証バージョンは次のとおりです.

(function (window, $, undefined) {
  /**
   * @param {String}    $el           
   * @param {[Array]}    rules             
   * @param {[Boolean]}   isCheckAll            
   * @param {[Function]}  callback              
   * rules       ：name, rule, message, equalTo
   */
  function Validator($el, rules, isCheckAll, callback) {
    var required = 'required';
    var params = Array.prototype.slice.call(arguments);
    this.$el = $el;
    this._rules = [
      {//    
        username: required,
        rule: /^[\u4e00-\u9fa5\w]{6,12}$/,
        message: '        '
      }, {//   
        password: required,
        rule: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z_@]{6,20}$/,
        message: '          ,         '
      }, {//     
        password2: required,
        rule: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z_@]{6,20}$/,
        message: '          ,         ',
        equalTo: 'password'
      }, {//   
        mobile: required,
        rule: /^1[34578]\d{9}$/,
        message: '          '
      }, {//    
        code : required,
        rule: /^\d{6}$/,
        message: '   6      '
      }, {//   
        email : required,
        rule: /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
        message: '        '
      }
    ];
    this.isCheckAll = false;
    this.callback = callback;
    //     
    this._rules = this._rules.concat(params[1]);
    if(params[2]) {
      if(typeof params[2] == 'function') {
        this.callback = params[2];
      }else {//              
        this.isCheckAll = params[2];
      }
    }
    //            
    this.rules = [];
  }

  Validator.prototype._getKey = function (obj) {
    var k = '';
    for(var key in obj) {
      if(obj.hasOwnProperty(key)) {
        if( key !== 'rule' && key !== 'message' && key !== 'equalTo') {
          k = key;
        }
      }
    }
    return k;
  };
  /**
   *             ，        
   */
  Validator.prototype.filterRules = function (arrObj) {
    var _this = this,
      h = {},
      res = [],
      arrObject = this._rules;
    $.each(arrObject, function (i, item) {
      var k = _this._getKey(item);
      try {
        if(!h[k] && h[k] !== 0) {
          h[k] = i;
          res.push(item);
        }else {
          res[h[k]] = $.extend(res[h[k]], item);
        }
      }catch(e) {
        throw new Error('    ')
      }
    });
    this.rules = res;
  };

  Validator.prototype.check = function () {
    var _this = this;
    $.each(_this.rules, function (i, item) {
      var key = _this._getKey(item),
        reg = item.rule,
        equalTo = item.equalTo,
        errMsg = item.message;

      _this.$el.find('[name='+key+']')
        .on('blur', function () {
          var $this = $(this),
            errorMsg = '',
            val = $this.val(),
            ranges = reg.toString().match(/(\d*,\d*)/),
            range = '',
            min = 0,
            max = 0,
            placeholderTxt = $(this).attr("placeholder") ? $(this).attr("placeholder") : '  ';

          //         
          if(val && val != 'undefined') { //     

            if(ranges) { //     
              range = ranges[0];
              min = range.split(',')[0] ? range.split(',')[0].trim() : 0;
              max = range.split(',')[1] ? range.split(',')[1].trim() : 0;
              if(val.length < min || val.length > max) { //          
                if(min && max) {
                  errorMsg = '   '+min+'-'+max+' '+placeholderTxt+'';
                }else if(min) {
                  errorMsg = '    '+min+' '+placeholderTxt+'';
                }else if(max) {
                  errorMsg = '    '+max+' '+placeholderTxt+'';
                }
              }else { //          
                errorMsg = ''+errMsg+'';

              }
            }else { //       
              errorMsg = ''+errMsg+'';
            }

            if(equalTo) {
              var equalToVal = _this.$el.find('[name='+equalTo+']').val();
              if(val !== equalToVal) {
                errorMsg = '       ，     ';
              }
            }

          } else { //    
            errorMsg = '   '+placeholderTxt+''
          }
          if($('.error-msg').length > 0) return;

          //     ，      
          if(!reg.test(val) || (equalTo && val !== equalToVal)) {
            if($this.siblings('.error-msg').length == 0) {
              $this.after(errorMsg)
                .siblings('.error-msg')
                .hide()
                .fadeIn();
            }
          }else {
            $this.siblings('.error-msg').remove();
          }
        })
        .on('focus', function () {
          $(this).siblings('.error-msg').remove();
        })
    });

  };
  Validator.prototype.checkAll = function () {
    var _this = this;
    if(_this.isCheckAll) {
      _this.$el.find('[type=submit]')
        .click(function () {
          _this.$el.find('[name]').trigger('blur');
          if($('.error-msg').length > 0) {
            console.log('     ');
            return false;
          }else {
            console.log('    ');
            _this.callback();
          }
        });
      return false;
    }
  };
  Validator.prototype.init = function () {
    this.filterRules();
    this.check();
    this.checkAll();
  };
  $.fn.validator = function (rules, isCheckAll, callback) {
    var validate = new Validator(this, rules, isCheckAll, callback);
    return validate.init();
  };
})(window, jQuery, undefined);

次のように使用できます.

  var rules = [
    {//    
      username: 'required',
      rule: /^[\u4e00-\u9fa5\d]{6,12}$/,
      message: '     loo2222'
    },
    {//   
      password: 'required',
      rule: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z_@]{6,20}$/,
      message: 'mimmimmia'
    },
    {//     
      password2: 'required',
      rule: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z_@]{6,20}$/,
      message: '          ,         2222',
      equalTo: 'password'
    },
    {//   
      telephone : 'required',
      rule: /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$/,
      message: '        '
    }
  ];
  $('form').validator(rules, true)

PS:ここでは、非常に便利な正規表現ツールを2つ提供します.
JavaScript正規表現オンラインテストツール:http://tools.jb51.net/regex/javascript
正規表現オンライン生成ツール:http://tools.jb51.net/regex/create_reg
jQueryに関する詳細は、「jQuery正規表現用法総括」、「jQuery文字列操作技巧総括」、「jQuery操作xml技巧総括」、「jQuery拡張技巧総括」、「jqueryセレクタ用法総括」および「jQuery常用プラグインおよび用法総括」のトピックを参照してください.
本文で述べたことが皆さんのjQueryプログラム設計に役立つことを望んでいます.