快捷導(dǎo)航

jQuery實現(xiàn)高度靈活的表單驗證功能示例【無UI】

更新時間：2020年04月30日 10:04:56 作者：廖飛銀

這篇文章主要介紹了jQuery實現(xiàn)高度靈活的表單驗證功能,涉及jQuery正則判斷與頁面元素動態(tài)操作相關(guān)使用技巧,需要的朋友可以參考下

本文實例講述了jQuery實現(xiàn)高度靈活的表單驗證功能。分享給大家供大家參考，具體如下：

表單驗證是前端開發(fā)過程中常見的一個需求，產(chǎn)品需求、業(yè)務(wù)邏輯的不同，表單驗證的方式方法也有所區(qū)別。而最重要的是我們要清楚，表單驗證的核心原則是——錯誤信息提示準(zhǔn)確，并且盡可能少的打擾/干擾用戶的輸入和體驗。

該插件依賴于jQuery，demo地址：https://github.com/CaptainLiao/zujian/tree/master/validator

基于以上原則，個人總結(jié)出表單驗證的通用方法論：

為了使開發(fā)思路更加清晰，我將表單驗證的過程分為兩步：第一步，用戶輸入完驗證當(dāng)前輸入的有效性；第二步，表單提交時驗證整個表單。考慮如下布局：

<form action="">
  <ul>
    <li><label for="username">用戶名</label>
      <input type="text" name="username" id="username" placeholder="用戶名"/></li>
    <li>
      <label for="password">密碼</label>
      <input type="text" name="password" id="password" placeholder="密碼"/>
    </li>
    <li>
      <label for="password">確認(rèn)密碼</label>
      <input type="text" name="password2" id="password-confirm" placeholder="確認(rèn)密碼"/>
    </li>
    <li>
      <label for="phone">手機</label>
      <input type="text" name="mobile" id="phone"/>
    </li>
    <li>
      <label for="email">郵箱</label>
      <input type="text" name="email" id="email"/>
    </li>
  </ul>

  <button type="submit" id="submit-btn">提交</button>

</form>

一個較為通用的JS驗證版本如下：

(function (window, $, undefined) {
  /**
   * @param {String}    $el       表單元素
   * @param {[Array]}    rules      自定義驗證規(guī)則
   * @param {[Boolean]}   isCheckAll   表單提交前全文驗證
   * @param {[Function]}  callback    全部驗證成功后的回調(diào)
   * 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: '只支持?jǐn)?shù)字字母下劃線,且不為純數(shù)字或字母'
      }, {// 重復(fù)密碼
        password2: required,
        rule: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z_@]{6,20}$/,
        message: '只支持?jǐn)?shù)字字母下劃線,且不為純數(shù)字或字母',
        equalTo: 'password'
      }, {// 手機
        mobile: required,
        rule: /^1[34578]\d{9}$/,
        message: '請輸入有效的手機號碼'
      }, {// 驗證碼
        code : required,
        rule: /^\d{6}$/,
        message: '請輸入6位數(shù)字驗證碼'
      }, {// 郵箱
        email : required,
        rule: /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
        message: '請輸入正確的郵箱'
      }
    ];
    this.isCheckAll = false;
    this.callback = callback;
    // 合并參數(shù)
    this._rules = this._rules.concat(params[1]);
    if(params[2]) {
      if(typeof params[2] == 'function') {
        this.callback = params[2];
      }else {// 提交表單時是否開啟全部驗證
        this.isCheckAll = params[2];
      }
    }
    // 用于存儲合去重后的參數(shù)
    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;
  };
  /**
   * 數(shù)組對象重復(fù)數(shù)據(jù)進行合并，后面的覆蓋前面的
   */
  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 = '<span class="error-msg">請輸入'+min+'-'+max+'位'+placeholderTxt+'</span>';
                }else if(min) {
                  errorMsg = '<span class="error-msg">最少輸入'+min+'位'+placeholderTxt+'</span>';
                }else if(max) {
                  errorMsg = '<span class="error-msg">最多輸入'+max+'位'+placeholderTxt+'</span>';
                }
              }else { // 邊界正確但匹配錯誤
                errorMsg = '<span class="error-msg">'+errMsg+'</span>';

              }
            }else { // 沒有邊界限定
              errorMsg = '<span class="error-msg">'+errMsg+'</span>';
            }

            if(equalTo) {
              var equalToVal = _this.$el.find('[name='+equalTo+']').val();
              if(val !== equalToVal) {
                errorMsg = '<span class="error-msg">兩次輸入不一致，請重新輸入</span>';
              }
            }

          } else { // 值為空
            errorMsg = '<span class="error-msg">請輸入'+placeholderTxt+'</span>'
          }
          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: '只支持?jǐn)?shù)字loo2222'
    },
    {// 密碼
      password: 'required',
      rule: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z_@]{6,20}$/,
      message: 'mimmimmia'
    },
    {// 重復(fù)密碼
      password2: 'required',
      rule: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z_@]{6,20}$/,
      message: '只支持?jǐn)?shù)字字母下劃線,不能為純數(shù)字或字母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款非常方便的正則表達(dá)式工具供大家參考使用：

JavaScript正則表達(dá)式在線測試工具：
http://tools.jb51.net/regex/javascript

正則表達(dá)式在線生成工具：
http://tools.jb51.net/regex/create_reg

更多關(guān)于jQuery相關(guān)內(nèi)容可查看本站專題：《jQuery正則表達(dá)式用法總結(jié)》、《jQuery字符串操作技巧總結(jié)》、《jQuery操作xml技巧總結(jié)》、《jQuery擴展技巧總結(jié)》、《jquery選擇器用法總結(jié)》及《jQuery常用插件及用法總結(jié)》

希望本文所述對大家jQuery程序設(shè)計有所幫助。

您可能感興趣的文章: