基於jquery-validate實現的校驗功能

//JS各種校驗的使用方法
<textarea check="{maxlength:512}" id="description" name="description" ></textarea>
    $("#form1").FValidate({errorModel:'qtip'});
    if ($("#form1").valid()) {
    	$I("form1").FForm('submit');
    } 
    
//需引入下面的JS
(function($) {
  $.extend({
    metadata: {
      defaults: {
        type: 'class',
        name: 'metadata',
        cre: /({.*})/,
        single: 'metadata'
      },
      setType: function(type, name) {
        this.defaults.type = type;
        this.defaults.name = name;
      },
      get: function(elem, opts) {
        var settings = $.extend({}, this.defaults, opts);
        // check for empty string in single property
        if (!settings.single.length)
          settings.single = 'metadata';

        var data = $.data(elem, settings.single);
        // returned cached data if it already exists
        if (data)
          return data;

        data = "{}";

        if (settings.type == "class") {
          var m = settings.cre.exec($(elem).attr('check'));
          if (m)
            data = m[1];
        }
        else if (settings.type == "elem") {
          if (!elem.getElementsByTagName)
            return undefined;
          var e = elem.getElementsByTagName(settings.name);
          if (e.length)
            data = $.trim(e[0].innerHTML);
        }
        else if (elem.getAttribute != undefined) {
          var attr = elem.getAttribute(settings.name);
          if (attr)
            data = attr;
        }

        if (data.indexOf('{') < 0)
          data = "{" + data + "}";

        data = eval("(" + data + ")");

        $.data(elem, settings.single, data);
        return data;
      }
    }
  });
  $.fn.metadata = function(opts) {
    return $.metadata.get(this[0], opts);
  };

})(jQuery);

/**
 * 基於jquery validate進行擴展.
 * 使用方法:
 *   1、在輸入框中配置check屬性定義校驗規則.
 *   2、在提交表單前調用如下方法.
 *     $("#formid").FValidate({errorModel:'qtip'});
 *     if ($("#formid").valid()) {
 *       //校驗通過.
 *     }
 */
(function($) {
  $.extend($.validator.messages, {
    required: "必填字段",
    remote: "請修正該字段",
    email: "請輸入正確格式的電子郵件",
    url: "請輸入合法的網址",
    date: "請輸入合法的日期",
    dateISO: "請輸入合法的日期 (ISO).",
    number: "請輸入合法的數字",
    digits: "只能輸入整數",
    creditcard: "請輸入合法的信用卡號",
    equalTo: "請再次輸入相同的值",
    accept: "請輸入擁有合法後綴名的字符串",
    maxlength: $.validator.format("請輸入一個長度最多是 {0} 的字符串"),
    minlength: $.validator.format("請輸入一個長度最少是 {0} 的字符串"),
    rangelength: $.validator.format("請輸入一個長度介於 {0} 和 {1} 之間的字符串"),
    range: $.validator.format("請輸入一個介於 {0} 和 {1} 之間的值"),
    max: $.validator.format("請輸入一個最大爲 {0} 的值"),
    min: $.validator.format("請輸入一個最小爲 {0} 的值")
  });

  $.extend($.validator, {
    classRules: function(element) {
      var rules = {
       
      };
      if 
      ($(element).attr("name")) 
       
      {
      rules 
        = {
//          isSpecialChar: true
      };
      }

      
      var classes = $(element).attr('check');
      classes && $.each(classes.split(' '), function() {
        if (this in $.validator.classRuleSettings) {
          $.extend(rules, $.validator.classRuleSettings[this]);
        }
      });
      return rules;
    }
  });
}(jQuery));

//手機號碼驗證
jQuery.validator.addMethod("ismobile", function(value, element) {
  var length = value.length;
  var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/;
  return (length == 11 && mobile.exec(value)) ? true : false;
}, "請正確填寫您的手機號碼");
//郵編驗證
jQuery.validator.addMethod("isZipCode", function(value, element) {
  var tel = /^[0-9]{6}$/;
  return (tel.exec(value)) ? true : false;
}, "請正確填寫您的郵編");
//特殊字符驗證
jQuery.validator.addMethod("isSpecialChar", function(value, element) {
  var sChar = new Array('&', '/', '<', '>', '"', '//');
  for (i = 0; i < sChar.length; i++) {
    if (value.indexOf(sChar[i]) >= 0) {
      return false;
    }
  }
  return true;
}, "內容含有特殊字符");


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章