zoukankan      html  css  js  c++  java
  • jquery.validate插件使用

    http://envato.mantizlab.com/themeforest/magneto_admin/forms.html

    (1)jquery.validate.js

    /*
     * jQuery validation plug-in 1.7
     *
     * http://bassistance.de/jquery-plugins/jquery-plugin-validation/
     * http://docs.jquery.com/Plugins/Validation
     *
     * Copyright (c) 2006 - 2008 Jörn Zaefferer
     *
     * $Id: jquery.validate.js 6403 2009-06-17 14:27:16Z joern.zaefferer $
     *
     * Dual licensed under the MIT and GPL licenses:
     *   http://www.opensource.org/licenses/mit-license.php
     *   http://www.gnu.org/licenses/gpl.html
     */

    (function($) {

    $.extend($.fn, {
     // http://docs.jquery.com/Plugins/Validation/validate
     validate: function( options ) {

      // if nothing is selected, return nothing; can't chain anyway
      if (!this.length) {
       options && options.debug && window.console && console.warn( "nothing selected, can't validate, returning nothing" );
       return;
      }

      // check if a validator for this form was already created
      var validator = $.data(this[0], 'validator');
      if ( validator ) {
       return validator;
      }
      
      validator = new $.validator( options, this[0] );
      $.data(this[0], 'validator', validator);
      
      if ( validator.settings.onsubmit ) {
      
       // allow suppresing validation by adding a cancel class to the submit button
       this.find("input, button").filter(".cancel").click(function() {
        validator.cancelSubmit = true;
       });
       
       // when a submitHandler is used, capture the submitting button
       if (validator.settings.submitHandler) {
        this.find("input, button").filter(":submit").click(function() {
         validator.submitButton = this;
        });
       }
      
       // validate the form on submit
       this.submit( function( event ) {
        if ( validator.settings.debug )
         // prevent form submit to be able to see console output
         event.preventDefault();
         
        function handle() {
         if ( validator.settings.submitHandler ) {
          if (validator.submitButton) {
           // insert a hidden input as a replacement for the missing submit button
           var hidden = $("<input type='hidden'/>").attr("name", validator.submitButton.name).val(validator.submitButton.value).appendTo(validator.currentForm);
          }
          validator.settings.submitHandler.call( validator, validator.currentForm );
          if (validator.submitButton) {
           // and clean up afterwards; thanks to no-block-scope, hidden can be referenced
           hidden.remove();
          }
          return false;
         }
         return true;
        }
         
        // prevent submit for invalid forms or custom submit handlers
        if ( validator.cancelSubmit ) {
         validator.cancelSubmit = false;
         return handle();
        }
        if ( validator.form() ) {
         if ( validator.pendingRequest ) {
          validator.formSubmitted = true;
          return false;
         }
         return handle();
        } else {
         validator.focusInvalid();
         return false;
        }
       });
      }
      
      return validator;
     },
     // http://docs.jquery.com/Plugins/Validation/valid
     valid: function() {
            if ( $(this[0]).is('form')) {
                return this.validate().form();
            } else {
                var valid = true;
                var validator = $(this[0].form).validate();
                this.each(function() {
        valid &= validator.element(this);
                });
                return valid;
            }
        },
     // attributes: space seperated list of attributes to retrieve and remove
     removeAttrs: function(attributes) {
      var result = {},
       $element = this;
      $.each(attributes.split(/\s/), function(index, value) {
       result[value] = $element.attr(value);
       $element.removeAttr(value);
      });
      return result;
     },
     // http://docs.jquery.com/Plugins/Validation/rules
     rules: function(command, argument) {
      var element = this[0];
      
      if (command) {
       var settings = $.data(element.form, 'validator').settings;
       var staticRules = settings.rules;
       var existingRules = $.validator.staticRules(element);
       switch(command) {
       case "add":
        $.extend(existingRules, $.validator.normalizeRule(argument));
        staticRules[element.name] = existingRules;
        if (argument.messages)
         settings.messages[element.name] = $.extend( settings.messages[element.name], argument.messages );
        break;
       case "remove":
        if (!argument) {
         delete staticRules[element.name];
         return existingRules;
        }
        var filtered = {};
        $.each(argument.split(/\s/), function(index, method) {
         filtered[method] = existingRules[method];
         delete existingRules[method];
        });
        return filtered;
       }
      }
      
      var data = $.validator.normalizeRules(
      $.extend(
       {},
       $.validator.metadataRules(element),
       $.validator.classRules(element),
       $.validator.attributeRules(element),
       $.validator.staticRules(element)
      ), element);
      
      // make sure required is at front
      if (data.required) {
       var param = data.required;
       delete data.required;
       data = $.extend({required: param}, data);
      }
      
      return data;
     }
    });

    // Custom selectors
    $.extend($.expr[":"], {
     // http://docs.jquery.com/Plugins/Validation/blank
     blank: function(a) {return !$.trim("" + a.value);},
     // http://docs.jquery.com/Plugins/Validation/filled
     filled: function(a) {return !!$.trim("" + a.value);},
     // http://docs.jquery.com/Plugins/Validation/unchecked
     unchecked: function(a) {return !a.checked;}
    });

    // constructor for validator
    $.validator = function( options, form ) {
     this.settings = $.extend( true, {}, $.validator.defaults, options );
     this.currentForm = form;
     this.init();
    };

    $.validator.format = function(source, params) {
     if ( arguments.length == 1 )
      return function() {
       var args = $.makeArray(arguments);
       args.unshift(source);
       return $.validator.format.apply( this, args );
      };
     if ( arguments.length > 2 && params.constructor != Array  ) {
      params = $.makeArray(arguments).slice(1);
     }
     if ( params.constructor != Array ) {
      params = [ params ];
     }
     $.each(params, function(i, n) {
      source = source.replace(new RegExp("\\{" + i + "\\}", "g"), n);
     });
     return source;
    };

    $.extend($.validator, {
     
     defaults: {
      messages: {},
      groups: {},
      rules: {},
      errorClass: "error_small",
      validClass: "valid_small",
      errorElement: "label",
      focusInvalid: true,
      errorContainer: $( [] ),
      errorLabelContainer: $( [] ),
      onsubmit: true,
      ignore: [],
      ignoreTitle: false,
      onfocusin: function(element) {
       this.lastActive = element;
        
       // hide error label and remove error class on focus if enabled
       if ( this.settings.focusCleanup && !this.blockFocusCleanup ) {
        this.settings.unhighlight && this.settings.unhighlight.call( this, element, this.settings.errorClass, this.settings.validClass );
        this.errorsFor(element).hide();
       }
      },
      onfocusout: function(element) {
       if ( !this.checkable(element) && (element.name in this.submitted || !this.optional(element)) ) {
        this.element(element);
       }
      },
      onkeyup: function(element) {
       if ( element.name in this.submitted || element == this.lastElement ) {
        this.element(element);
       }
      },
      onclick: function(element) {
       // click on selects, radiobuttons and checkboxes
       if ( element.name in this.submitted )
        this.element(element);
       // or option elements, check parent select in that case
       else if (element.parentNode.name in this.submitted)
        this.element(element.parentNode);
      },
      highlight: function( element, errorClass, validClass ) {
       $(element).addClass(errorClass).removeClass(validClass);
      },
      unhighlight: function( element, errorClass, validClass ) {
       $(element).removeClass(errorClass).addClass(validClass);
      }
     },

     // http://docs.jquery.com/Plugins/Validation/Validator/setDefaults
     setDefaults: function(settings) {
      $.extend( $.validator.defaults, settings );
     },

     messages: {
      required: "This field is required.",
      remote: "Please fix this field.",
      email: "Please enter a valid email address.",
      url: "Please enter a valid URL.",
      date: "Please enter a valid date.",
      dateISO: "Please enter a valid date (ISO).",
      number: "Please enter a valid number.",
      digits: "Please enter only digits.",
      creditcard: "Please enter a valid credit card number.",
      equalTo: "Please enter the same value again.",
      accept: "Please enter a value with a valid extension.",
      maxlength: $.validator.format("Please enter no more than {0} characters."),
      minlength: $.validator.format("Please enter at least {0} characters."),
      rangelength: $.validator.format("Please enter a value between {0} and {1} characters long."),
      range: $.validator.format("Please enter a value between {0} and {1}."),
      max: $.validator.format("Please enter a value less than or equal to {0}."),
      min: $.validator.format("Please enter a value greater than or equal to {0}.")
     },
     
     autoCreateRanges: false,
     
     prototype: {
      
      init: function() {
       this.labelContainer = $(this.settings.errorLabelContainer);
       this.errorContext = this.labelContainer.length && this.labelContainer || $(this.currentForm);
       this.containers = $(this.settings.errorContainer).add( this.settings.errorLabelContainer );
       this.submitted = {};
       this.valueCache = {};
       this.pendingRequest = 0;
       this.pending = {};
       this.invalid = {};
       this.reset();
       
       var groups = (this.groups = {});
       $.each(this.settings.groups, function(key, value) {
        $.each(value.split(/\s/), function(index, name) {
         groups[name] = key;
        });
       });
       var rules = this.settings.rules;
       $.each(rules, function(key, value) {
        rules[key] = $.validator.normalizeRule(value);
       });
       
       function delegate(event) {
        var validator = $.data(this[0].form, "validator"),
         eventType = "on" + event.type.replace(/^validate/, "");
        validator.settings[eventType] && validator.settings[eventType].call(validator, this[0] );
       }
       $(this.currentForm)
        .validateDelegate(":text, :password, :file, select, textarea", "focusin focusout keyup", delegate)
        .validateDelegate(":radio, :checkbox, select, option", "click", delegate);

       if (this.settings.invalidHandler)
        $(this.currentForm).bind("invalid-form.validate", this.settings.invalidHandler);
      },

      // http://docs.jquery.com/Plugins/Validation/Validator/form
      form: function() {
       this.checkForm();
       $.extend(this.submitted, this.errorMap);
       this.invalid = $.extend({}, this.errorMap);
       if (!this.valid())
        $(this.currentForm).triggerHandler("invalid-form", [this]);
       this.showErrors();
       return this.valid();
      },
      
      checkForm: function() {
       this.prepareForm();
       for ( var i = 0, elements = (this.currentElements = this.elements()); elements[i]; i++ ) {
        this.check( elements[i] );
       }
       return this.valid();
      },
      
      // http://docs.jquery.com/Plugins/Validation/Validator/element
      element: function( element ) {
       element = this.clean( element );
       this.lastElement = element;
       this.prepareElement( element );
       this.currentElements = $(element);
       var result = this.check( element );
       if ( result ) {
        delete this.invalid[element.name];
       } else {
        this.invalid[element.name] = true;
       }
       if ( !this.numberOfInvalids() ) {
        // Hide error containers on last error
        this.toHide = this.toHide.add( this.containers );
       }
       this.showErrors();
       return result;
      },

      // http://docs.jquery.com/Plugins/Validation/Validator/showErrors
      showErrors: function(errors) {
       if(errors) {
        // add items to error list and map
        $.extend( this.errorMap, errors );
        this.errorList = [];
        for ( var name in errors ) {
         this.errorList.push({
          message: errors[name],
          element: this.findByName(name)[0]
         });
        }
        // remove items from success list
        this.successList = $.grep( this.successList, function(element) {
         return !(element.name in errors);
        });
       }
       this.settings.showErrors
        ? this.settings.showErrors.call( this, this.errorMap, this.errorList )
        : this.defaultShowErrors();
      },
      
      // http://docs.jquery.com/Plugins/Validation/Validator/resetForm
      resetForm: function() {
       if ( $.fn.resetForm )
        $( this.currentForm ).resetForm();
       this.submitted = {};
       this.prepareForm();
       this.hideErrors();
       this.elements().removeClass( this.settings.errorClass );
      },
      
      numberOfInvalids: function() {
       return this.objectLength(this.invalid);
      },
      
      objectLength: function( obj ) {
       var count = 0;
       for ( var i in obj )
        count++;
       return count;
      },
      
      hideErrors: function() {
       this.addWrapper( this.toHide ).hide();
      },
      
      valid: function() {
       return this.size() == 0;
      },
      
      size: function() {
       return this.errorList.length;
      },
      
      focusInvalid: function() {
       if( this.settings.focusInvalid ) {
        try {
         $(this.findLastActive() || this.errorList.length && this.errorList[0].element || [])
         .filter(":visible")
         .focus()
         // manually trigger focusin event; without it, focusin handler isn't called, findLastActive won't have anything to find
         .trigger("focusin");
        } catch(e) {
         // ignore IE throwing errors when focusing hidden elements
        }
       }
      },
      
      findLastActive: function() {
       var lastActive = this.lastActive;
       return lastActive && $.grep(this.errorList, function(n) {
        return n.element.name == lastActive.name;
       }).length == 1 && lastActive;
      },
      
      elements: function() {
       var validator = this,
        rulesCache = {};
       
       // select all valid inputs inside the form (no submit or reset buttons)
       // workaround $Query([]).add until http://dev.jquery.com/ticket/2114 is solved
       return $([]).add(this.currentForm.elements)
       .filter(":input")
       .not(":submit, :reset, :image, [disabled]")
       .not( this.settings.ignore )
       .filter(function() {
        !this.name && validator.settings.debug && window.console && console.error( "%o has no name assigned", this);
       
        // select only the first element for each name, and only those with rules specified
        if ( this.name in rulesCache || !validator.objectLength($(this).rules()) )
         return false;
        
        rulesCache[this.name] = true;
        return true;
       });
      },
      
      clean: function( selector ) {
       return $( selector )[0];
      },
      
      errors: function() {
       return $( this.settings.errorElement + "." + this.settings.errorClass, this.errorContext );
      },
      
      reset: function() {
       this.successList = [];
       this.errorList = [];
       this.errorMap = {};
       this.toShow = $([]);
       this.toHide = $([]);
       this.currentElements = $([]);
      },
      
      prepareForm: function() {
       this.reset();
       this.toHide = this.errors().add( this.containers );
      },
      
      prepareElement: function( element ) {
       this.reset();
       this.toHide = this.errorsFor(element);
      },
     
      check: function( element ) {
       element = this.clean( element );
       
       // if radio/checkbox, validate first element in group instead
       if (this.checkable(element)) {
        element = this.findByName( element.name )[0];
       }
       
       var rules = $(element).rules();
       var dependencyMismatch = false;
       for( method in rules ) {
        var rule = { method: method, parameters: rules[method] };
        try {
         var result = $.validator.methods[method].call( this, element.value.replace(/\r/g, ""), element, rule.parameters );
         
         // if a method indicates that the field is optional and therefore valid,
         // don't mark it as valid when there are no other rules
         if ( result == "dependency-mismatch" ) {
          dependencyMismatch = true;
          continue;
         }
         dependencyMismatch = false;
         
         if ( result == "pending" ) {
          this.toHide = this.toHide.not( this.errorsFor(element) );
          return;
         }
         
         if( !result ) {
          this.formatAndAdd( element, rule );
          return false;
         }
        } catch(e) {
         this.settings.debug && window.console && console.log("exception occured when checking element " + element.id
           + ", check the '" + rule.method + "' method", e);
         throw e;
        }
       }
       if (dependencyMismatch)
        return;
       if ( this.objectLength(rules) )
        this.successList.push(element);
       return true;
      },
      
      // return the custom message for the given element and validation method
      // specified in the element's "messages" metadata
      customMetaMessage: function(element, method) {
       if (!$.metadata)
        return;
       
       var meta = this.settings.meta
        ? $(element).metadata()[this.settings.meta]
        : $(element).metadata();
       
       return meta && meta.messages && meta.messages[method];
      },
      
      // return the custom message for the given element name and validation method
      customMessage: function( name, method ) {
       var m = this.settings.messages[name];
       return m && (m.constructor == String
        ? m
        : m[method]);
      },
      
      // return the first defined argument, allowing empty strings
      findDefined: function() {
       for(var i = 0; i < arguments.length; i++) {
        if (arguments[i] !== undefined)
         return arguments[i];
       }
       return undefined;
      },
      
      defaultMessage: function( element, method) {
       return this.findDefined(
        this.customMessage( element.name, method ),
        this.customMetaMessage( element, method ),
        // title is never undefined, so handle empty string as undefined
        !this.settings.ignoreTitle && element.title || undefined,
        $.validator.messages[method],
        "<strong>Warning: No message defined for " + element.name + "</strong>"
       );
      },
      
      formatAndAdd: function( element, rule ) {
       var message = this.defaultMessage( element, rule.method ),
        theregex = /\$?\{(\d+)\}/g;
       if ( typeof message == "function" ) {
        message = message.call(this, rule.parameters, element);
       } else if (theregex.test(message)) {
        message = jQuery.format(message.replace(theregex, '{$1}'), rule.parameters);
       }   
       this.errorList.push({
        message: message,
        element: element
       });
       
       this.errorMap[element.name] = message;
       this.submitted[element.name] = message;
      },
      
      addWrapper: function(toToggle) {
       if ( this.settings.wrapper )
        toToggle = toToggle.add( toToggle.parent( this.settings.wrapper ) );
       return toToggle;
      },
      
      defaultShowErrors: function() {
       for ( var i = 0; this.errorList[i]; i++ ) {
        var error = this.errorList[i];
        this.settings.highlight && this.settings.highlight.call( this, error.element, this.settings.errorClass, this.settings.validClass );
        this.showLabel( error.element, error.message );
       }
       if( this.errorList.length ) {
        this.toShow = this.toShow.add( this.containers );
       }
       if (this.settings.success) {
        for ( var i = 0; this.successList[i]; i++ ) {
         this.showLabel( this.successList[i] );
        }
       }
       if (this.settings.unhighlight) {
        for ( var i = 0, elements = this.validElements(); elements[i]; i++ ) {
         this.settings.unhighlight.call( this, elements[i], this.settings.errorClass, this.settings.validClass );
        }
       }
       this.toHide = this.toHide.not( this.toShow );
       this.hideErrors();
       this.addWrapper( this.toShow ).show();
      },
      
      validElements: function() {
       return this.currentElements.not(this.invalidElements());
      },
      
      invalidElements: function() {
       return $(this.errorList).map(function() {
        return this.element;
       });
      },
      
      showLabel: function(element, message) {
       var label = this.errorsFor( element );
       if ( label.length ) {
        // refresh error/success class
        label.removeClass().addClass( this.settings.errorClass );
       
        // check if we have a generated label, replace the message then
        label.attr("generated") && label.html(message);
       } else {
        // create label
        label = $("<" + this.settings.errorElement + "/>")
         .attr({"for":  this.idOrName(element), generated: true})
         .addClass(this.settings.errorClass)
         .html(message || "asd");
        if ( this.settings.wrapper ) {
         // make sure the element is visible, even in IE
         // actually showing the wrapped element is handled elsewhere
         label = label.hide().show().wrap("<" + this.settings.wrapper + "/>").parent();
        }
        if ( !this.labelContainer.append(label).length )
         this.settings.errorPlacement
          ? this.settings.errorPlacement(label, $(element) )
          : label.insertAfter(element);
       }
       if ( !message && this.settings.success ) {
        label.text("");
        typeof this.settings.success == "string"
         ? label.addClass( this.settings.success )
         : this.settings.success( label );
       }
       this.toShow = this.toShow.add(label);
      },
      
      errorsFor: function(element) {
       var name = this.idOrName(element);
          return this.errors().filter(function() {
        return $(this).attr('for') == name;
       });
      },
      
      idOrName: function(element) {
       return this.groups[element.name] || (this.checkable(element) ? element.name : element.id || element.name);
      },

      checkable: function( element ) {
       return /radio|checkbox/i.test(element.type);
      },
      
      findByName: function( name ) {
       // select by name and filter by form for performance over form.find("[name=...]")
       var form = this.currentForm;
       return $(document.getElementsByName(name)).map(function(index, element) {
        return element.form == form && element.name == name && element  || null;
       });
      },
      
      getLength: function(value, element) {
       switch( element.nodeName.toLowerCase() ) {
       case 'select':
        return $("option:selected", element).length;
       case 'input':
        if( this.checkable( element) )
         return this.findByName(element.name).filter(':checked').length;
       }
       return value.length;
      },
     
      depend: function(param, element) {
       return this.dependTypes[typeof param]
        ? this.dependTypes[typeof param](param, element)
        : true;
      },
     
      dependTypes: {
       "boolean": function(param, element) {
        return param;
       },
       "string": function(param, element) {
        return !!$(param, element.form).length;
       },
       "function": function(param, element) {
        return param(element);
       }
      },
      
      optional: function(element) {
       return !$.validator.methods.required.call(this, $.trim(element.value), element) && "dependency-mismatch";
      },
      
      startRequest: function(element) {
       if (!this.pending[element.name]) {
        this.pendingRequest++;
        this.pending[element.name] = true;
       }
      },
      
      stopRequest: function(element, valid) {
       this.pendingRequest--;
       // sometimes synchronization fails, make sure pendingRequest is never < 0
       if (this.pendingRequest < 0)
        this.pendingRequest = 0;
       delete this.pending[element.name];
       if ( valid && this.pendingRequest == 0 && this.formSubmitted && this.form() ) {
        $(this.currentForm).submit();
        this.formSubmitted = false;
       } else if (!valid && this.pendingRequest == 0 && this.formSubmitted) {
        $(this.currentForm).triggerHandler("invalid-form", [this]);
        this.formSubmitted = false;
       }
      },
      
      previousValue: function(element) {
       return $.data(element, "previousValue") || $.data(element, "previousValue", {
        old: null,
        valid: true,
        message: this.defaultMessage( element, "remote" )
       });
      }
      
     },
     
     classRuleSettings: {
      required: {required: true},
      email: {email: true},
      url: {url: true},
      date: {date: true},
      dateISO: {dateISO: true},
      dateDE: {dateDE: true},
      number: {number: true},
      numberDE: {numberDE: true},
      digits: {digits: true},
      creditcard: {creditcard: true}
     },
     
     addClassRules: function(className, rules) {
      className.constructor == String ?
       this.classRuleSettings[className] = rules :
       $.extend(this.classRuleSettings, className);
     },
     
     classRules: function(element) {
      var rules = {};
      var classes = $(element).attr('class');
      classes && $.each(classes.split(' '), function() {
       if (this in $.validator.classRuleSettings) {
        $.extend(rules, $.validator.classRuleSettings[this]);
       }
      });
      return rules;
     },
     
     attributeRules: function(element) {
      var rules = {};
      var $element = $(element);
      
      for (method in $.validator.methods) {
       var value = $element.attr(method);
       if (value) {
        rules[method] = value;
       }
      }
      
      // maxlength may be returned as -1, 2147483647 (IE) and 524288 (safari) for text inputs
      if (rules.maxlength && /-1|2147483647|524288/.test(rules.maxlength)) {
       delete rules.maxlength;
      }
      
      return rules;
     },
     
     metadataRules: function(element) {
      if (!$.metadata) return {};
      
      var meta = $.data(element.form, 'validator').settings.meta;
      return meta ?
       $(element).metadata()[meta] :
       $(element).metadata();
     },
     
     staticRules: function(element) {
      var rules = {};
      var validator = $.data(element.form, 'validator');
      if (validator.settings.rules) {
       rules = $.validator.normalizeRule(validator.settings.rules[element.name]) || {};
      }
      return rules;
     },
     
     normalizeRules: function(rules, element) {
      // handle dependency check
      $.each(rules, function(prop, val) {
       // ignore rule when param is explicitly false, eg. required:false
       if (val === false) {
        delete rules[prop];
        return;
       }
       if (val.param || val.depends) {
        var keepRule = true;
        switch (typeof val.depends) {
         case "string":
          keepRule = !!$(val.depends, element.form).length;
          break;
         case "function":
          keepRule = val.depends.call(element, element);
          break;
        }
        if (keepRule) {
         rules[prop] = val.param !== undefined ? val.param : true;
        } else {
         delete rules[prop];
        }
       }
      });
      
      // evaluate parameters
      $.each(rules, function(rule, parameter) {
       rules[rule] = $.isFunction(parameter) ? parameter(element) : parameter;
      });
      
      // clean number parameters
      $.each(['minlength', 'maxlength', 'min', 'max'], function() {
       if (rules[this]) {
        rules[this] = Number(rules[this]);
       }
      });
      $.each(['rangelength', 'range'], function() {
       if (rules[this]) {
        rules[this] = [Number(rules[this][0]), Number(rules[this][1])];
       }
      });
      
      if ($.validator.autoCreateRanges) {
       // auto-create ranges
       if (rules.min && rules.max) {
        rules.range = [rules.min, rules.max];
        delete rules.min;
        delete rules.max;
       }
       if (rules.minlength && rules.maxlength) {
        rules.rangelength = [rules.minlength, rules.maxlength];
        delete rules.minlength;
        delete rules.maxlength;
       }
      }
      
      // To support custom messages in metadata ignore rule methods titled "messages"
      if (rules.messages) {
       delete rules.messages;
      }
      
      return rules;
     },
     
     // Converts a simple string to a {string: true} rule, e.g., "required" to {required:true}
     normalizeRule: function(data) {
      if( typeof data == "string" ) {
       var transformed = {};
       $.each(data.split(/\s/), function() {
        transformed[this] = true;
       });
       data = transformed;
      }
      return data;
     },
     
     // http://docs.jquery.com/Plugins/Validation/Validator/addMethod
     addMethod: function(name, method, message) {
      $.validator.methods[name] = method;
      $.validator.messages[name] = message != undefined ? message : $.validator.messages[name];
      if (method.length < 3) {
       $.validator.addClassRules(name, $.validator.normalizeRule(name));
      }
     },

     methods: {

      // http://docs.jquery.com/Plugins/Validation/Methods/required
      required: function(value, element, param) {
       // check if dependency is met
       if ( !this.depend(param, element) )
        return "dependency-mismatch";
       switch( element.nodeName.toLowerCase() ) {
       case 'select':
        // could be an array for select-multiple or a string, both are fine this way
        var val = $(element).val();
        return val && val.length > 0;
       case 'input':
        if ( this.checkable(element) )
         return this.getLength(value, element) > 0;
       default:
        return $.trim(value).length > 0;
       }
      },
      
      // http://docs.jquery.com/Plugins/Validation/Methods/remote
      remote: function(value, element, param) {
       if ( this.optional(element) )
        return "dependency-mismatch";
       
       var previous = this.previousValue(element);
       if (!this.settings.messages[element.name] )
        this.settings.messages[element.name] = {};
       previous.originalMessage = this.settings.messages[element.name].remote;
       this.settings.messages[element.name].remote = previous.message;
       
       param = typeof param == "string" && {url:param} || param;
       
       if ( previous.old !== value ) {
        previous.old = value;
        var validator = this;
        this.startRequest(element);
        var data = {};
        data[element.name] = value;
        $.ajax($.extend(true, {
         url: param,
         mode: "abort",
         port: "validate" + element.name,
         dataType: "json",
         data: data,
         success: function(response) {
          validator.settings.messages[element.name].remote = previous.originalMessage;
          var valid = response === true;
          if ( valid ) {
           var submitted = validator.formSubmitted;
           validator.prepareElement(element);
           validator.formSubmitted = submitted;
           validator.successList.push(element);
           validator.showErrors();
          } else {
           var errors = {};
           var message = (previous.message = response || validator.defaultMessage( element, "remote" ));
           errors[element.name] = $.isFunction(message) ? message(value) : message;
           validator.showErrors(errors);
          }
          previous.valid = valid;
          validator.stopRequest(element, valid);
         }
        }, param));
        return "pending";
       } else if( this.pending[element.name] ) {
        return "pending";
       }
       return previous.valid;
      },

      // http://docs.jquery.com/Plugins/Validation/Methods/minlength
      minlength: function(value, element, param) {
       return this.optional(element) || this.getLength($.trim(value), element) >= param;
      },
      
      // http://docs.jquery.com/Plugins/Validation/Methods/maxlength
      maxlength: function(value, element, param) {
       return this.optional(element) || this.getLength($.trim(value), element) <= param;
      },
      
      // http://docs.jquery.com/Plugins/Validation/Methods/rangelength
      rangelength: function(value, element, param) {
       var length = this.getLength($.trim(value), element);
       return this.optional(element) || ( length >= param[0] && length <= param[1] );
      },
      
      // http://docs.jquery.com/Plugins/Validation/Methods/min
      min: function( value, element, param ) {
       return this.optional(element) || value >= param;
      },
      
      // http://docs.jquery.com/Plugins/Validation/Methods/max
      max: function( value, element, param ) {
       return this.optional(element) || value <= param;
      },
      
      // http://docs.jquery.com/Plugins/Validation/Methods/range
      range: function( value, element, param ) {
       return this.optional(element) || ( value >= param[0] && value <= param[1] );
      },
      
      // http://docs.jquery.com/Plugins/Validation/Methods/email
      email: function(value, element) {
       // contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/
       return this.optional(element) || /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(http://www.cnblogs.com/steven9801/admin/file://([/x01-/x09/x0b/x0c/x0d-/x7f]%7C[/u00A0-/uD7FF/uF900-/uFDCF/uFDF0-/uFFEF]))))*(((/x20%7C/x09)*(/x0d/x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i.test(value);
      },
     
      // http://docs.jquery.com/Plugins/Validation/Methods/url
      url: function(value, element) {
       // contributed by Scott Gonzalez: http://projects.scottsplayground.com/iri/
       return this.optional(element) || /^(https?|ftp):\/\/(((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?(((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?)(:\d*)?)(\/((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)?(\?((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(\#((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/i.test(value);
      },
           
      // http://docs.jquery.com/Plugins/Validation/Methods/date
      date: function(value, element) {
       return this.optional(element) || !/Invalid|NaN/.test(new Date(value));
      },
     
      // http://docs.jquery.com/Plugins/Validation/Methods/dateISO
      dateISO: function(value, element) {
       return this.optional(element) || /^\d{4}[\/-]\d{1,2}[\/-]\d{1,2}$/.test(value);
      },
     
      // http://docs.jquery.com/Plugins/Validation/Methods/number
      number: function(value, element) {
       return this.optional(element) || /^-?(?:\d+|\d{1,3}(?:,\d{3})+)(?:\.\d+)?$/.test(value);
      },
     
      // http://docs.jquery.com/Plugins/Validation/Methods/digits
      digits: function(value, element) {
       return this.optional(element) || /^\d+$/.test(value);
      },
      
      // http://docs.jquery.com/Plugins/Validation/Methods/creditcard
      // based on http://en.wikipedia.org/wiki/Luhn
      creditcard: function(value, element) {
       if ( this.optional(element) )
        return "dependency-mismatch";
       // accept only digits and dashes
       if (/[^0-9-]+/.test(value))
        return false;
       var nCheck = 0,
        nDigit = 0,
        bEven = false;

       value = value.replace(/\D/g, "");

       for (var n = value.length - 1; n >= 0; n--) {
        var cDigit = value.charAt(n);
        var nDigit = parseInt(cDigit, 10);
        if (bEven) {
         if ((nDigit *= 2) > 9)
          nDigit -= 9;
        }
        nCheck += nDigit;
        bEven = !bEven;
       }

       return (nCheck % 10) == 0;
      },
      
      // http://docs.jquery.com/Plugins/Validation/Methods/accept
      accept: function(value, element, param) {
       param = typeof param == "string" ? param.replace(/,/g, '|') : "png|jpe?g|gif";
       return this.optional(element) || value.match(new RegExp(".(" + param + ")$", "i"));
      },
      
      // http://docs.jquery.com/Plugins/Validation/Methods/equalTo
      equalTo: function(value, element, param) {
       // bind to the blur event of the target in order to revalidate whenever the target field is updated
       // TODO find a way to bind the event just once, avoiding the unbind-rebind overhead
       var target = $(param).unbind(".validate-equalTo").bind("blur.validate-equalTo", function() {
        $(element).valid();
       });
       return value == target.val();
      }
      
     }
     
    });

    // deprecated, use $.validator.format instead
    $.format = $.validator.format;

    })(jQuery);

    // ajax mode: abort
    // usage: $.ajax({ mode: "abort"[, port: "uniqueport"]});
    // if mode:"abort" is used, the previous request on that port (port can be undefined) is aborted via XMLHttpRequest.abort()
    ;(function($) {
     var ajax = $.ajax;
     var pendingRequests = {};
     $.ajax = function(settings) {
      // create settings for compatibility with ajaxSetup
      settings = $.extend(settings, $.extend({}, $.ajaxSettings, settings));
      var port = settings.port;
      if (settings.mode == "abort") {
       if ( pendingRequests[port] ) {
        pendingRequests[port].abort();
       }
       return (pendingRequests[port] = ajax.apply(this, arguments));
      }
      return ajax.apply(this, arguments);
     };
    })(jQuery);

    // provides cross-browser focusin and focusout events
    // IE has native support, in other browsers, use event caputuring (neither bubbles)

    // provides delegate(type: String, delegate: Selector, handler: Callback) plugin for easier event delegation
    // handler is only called when $(event.target).is(delegate), in the scope of the jquery-object for event.target
    ;(function($) {
     // only implement if not provided by jQuery core (since 1.4)
     // TODO verify if jQuery 1.4's implementation is compatible with older jQuery special-event APIs
     if (!jQuery.event.special.focusin && !jQuery.event.special.focusout && document.addEventListener) {
      $.each({
       focus: 'focusin',
       blur: 'focusout' 
      }, function( original, fix ){
       $.event.special[fix] = {
        setup:function() {
         this.addEventListener( original, handler, true );
        },
        teardown:function() {
         this.removeEventListener( original, handler, true );
        },
        handler: function(e) {
         arguments[0] = $.event.fix(e);
         arguments[0].type = fix;
         return $.event.handle.apply(this, arguments);
        }
       };
       function handler(e) {
        e = $.event.fix(e);
        e.type = fix;
        return $.event.handle.call(this, e);
       }
      });
     };
     $.extend($.fn, {
      validateDelegate: function(delegate, type, handler) {
       return this.bind(type, function(event) {
        var target = $(event.target);
        if (target.is(delegate)) {
         return handler.apply(target, arguments);
        }
       });
      }
     });
    })(jQuery);

    (2)custom.js

    $(document).ready(function() {

      //BOX LOGIN ERROR TEST//
      $("#content-login .error").hide();
      $("#error").click(function() {
       $("#box-login").show('shake', 55);
       $(".header-login").show('shake', 55);
       $("#content-login .error").show('blind', 500);
       return false;
      });
      
      //LANGUAGE //
      $(".flag").hide();
      $(".language_button").click(function() {
       $(".flag").toggle('drop');
      });
      
      //BOX SORTABLE //
      $(".column.half").sortable({
       connectWith: '.column.half',
       handle: '.box-header'
      });
      $(".column.full").sortable({
       connectWith: '.column.full',
       handle: '.box-header'
      });
      $(".box").find(".box-header").prepend('<span class="close"></span>').end();
      $(".box-header .close ").click(function() {
       $(this).parents(".box .box-header").toggleClass("box-header closed").toggleClass("box-header");
       $(this).parents(".box:first").find(".box-content").toggle();
       $(this).parents(".box:first").find(".example").toggle();
      });
      
      //MESSAGE - TAG HIDE //
      $(".message").click(function() {
                          $(this).hide('blind', 500);
                          return false;
            });
      $(".tag").click(function() {
                          $(this).hide('highlight', 500);
                          return false;
            }); 
      
      //SEARCH INPUT//
      $("#search_input").focusin(
      function() {
       $('#search_input').val('');
      });
      $("#search_input").focusout(
      function() {
       $('#search_input').val('Search...');
      });
      
      //VALIDATION FORM//
      var validator = $("#formtest").validate({
            rules: {
                firstname: {
                    required: true,
                    minlength: 2
       },
                lastname: {
           required: true,
                    minlength: 2
       },
                username: {
                    required: true,
                    minlength: 2
                },
                password: {
                    required: true,
                    minlength: 5
                },
                password_confirm: {
                    required: true,
                    minlength: 5,
                    equalTo: "#form-password"
                },
                email: {
                    required: true,
                    email: true
                },
       email_confirm: {
                    required: true,
                    minlength: 5,
                    equalTo: "#form-email"
                },
                dateformat: "required",
                terms: "required"
            },
            messages: {
                firstname: "Enter your firstname",
                lastname: "Enter your lastname",
                username: {
                    required: "Enter a username",
                    minlength: jQuery.format("Enter at least {0} characters"),
                    remote: jQuery.format("{0} is already in use")
                },
                password: {
                    required: "Provide a password",
                    rangelength: jQuery.format("Enter at least {0} characters")
                },
                password_confirm: {
                    required: "Repeat your password",
                    minlength: jQuery.format("Enter at least {0} characters"),
                    equalTo: "Enter the same password as above"
                },
                email: {
                    required: "Please enter a valid email address",
                    minlength: "Please enter a valid email address",
                    remote: jQuery.format("{0} is already in use")
                },
                dateformat: "Choose your preferred dateformat",
                terms: "Please accept terms of use"
            },
            errorPlacement: function(error, element) {
                if ( element.is(":radio") )
                    error.appendTo( element.parent().prev() );
                else if ( element.is(":checkbox") )
                    error.appendTo ( element.parent().prev() );
                else
                    error.appendTo( element.prev() );
            },
            submitHandler: function() {
                alert("Validate!");
            },
            success: function(label) {
                label.html("&nbsp;").addClass("valid_small");
            }
      });
      $("#form-username").focus(function() {
       var firstname = $("#form-firstname").val();
       var lastname = $("#form-lastname").val();
       if(firstname && lastname && !this.value) {
        this.value = firstname + "." + lastname;
       }
      });
      $("#reset").click (function(){
       $("#formtest .form-field").val ("");
      });
      
      //TEXTAREA INPUT//
       $("#form-message").resizable({
       handle: "se",
       containment: '#formtest'
       });
       $("textarea.form-field").resizable({
       handle: "se",
       containment: '.box-content'
       });
       
      //CHECKBOX //
      $(".checkbox").button();
      $(".radiocheck").buttonset();
      
      //WYSIWYG//
      $('#wysiwyg').wysiwyg();
      
      //TABLE//
      oTable = $('#tabledata').dataTable({
        "bJQueryUI": true,
        "sPaginationType": "full_numbers"
       });
      $("#checkboxall").click(function()    
      {
       var checked_status = this.checked;
       $("input[name=checkall]").each(function()
       {
        this.checked = checked_status;
       });
      });
      $("#checkboxalltabs").click(function()    
      {
       var checked_status = this.checked;
       $("input[name=checkalltabs]").each(function()
       {
        this.checked = checked_status;
       });
      });
      $("#checkboxalltabs2").click(function()    
      {
       var checked_status = this.checked;
       $("input[name=checkalltabs2]").each(function()
       {
        this.checked = checked_status;
       });
      });
      $(".openable").click(function()    
      {
       $(this).parents().next(".openable-tr").toggle();
      });
      
      //LIGHTBOX//  
      $(".lightbox").fancybox();
      
      $(".lightbox[rel=lightbox-gallery]").fancybox();
      
      //GALLERY//
      $(".gallery-list li").hover(function() {
       $(this).find(".gallery-buttons").toggle();
      });
      
      //ACCORDION//
      $(".accordion").accordion();
      
      //DIALOG//
      $('.dialog').dialog({
       autoOpen: false,
        800,
       height: 260,
       modal: true
      });
      $('.opener').click(function() {
       $('.dialog').dialog('open');
      });
      $('.closer').click(function() {
       $('.dialog').dialog('close');
      });
      
      //DATAPICKER//
      $(".datepicker").datepicker();
      
      //TABS - SORTABLE//
      $(".tabs").tabs();
      $(".tabs.sortable").tabs().find(".ui-tabs-nav").sortable({axis:'x'});
      
      //SKIN//
      $(".skin_block").hide();
      $('.skin_button').click(function() {
       $(".skin_block").toggle('drop');
      });
      
      //SLIDER//
      $(".slider-vertical").slider({
       orientation: "vertical",
       range: "min",
       min: 0,
       max: 100,
       value: 60,
       slide: function(event, ui) {
        $(".amount-vert").val(ui.value);
       }
      });
      $(".amount-vert").val($(".slider-vertical").slider("value"));
      
      $(".slider-horizontal").slider({
       range: true,
       min: 0,
       max: 500,
       values: [75, 300],
       slide: function(event, ui) {
        $(".amount-hor").val('$' + ui.values[0] + ' - $' + ui.values[1]);
       }
      });
      $(".amount-hor").val('$' + $(".slider-horizontal").slider("values", 0) + ' - $' + $(".slider-horizontal").slider("values", 1));
      
      //PROGRESSBAR//
      
      $(".progressbar").progressbar({value:0});
      $(".progressbar .ui-progressbar-value").animate({'5%'}, 1500);
      
      $("#prog-10").click(function() {
       $(".progressbar .ui-progressbar-value").animate({'10%'}, 1500);
      });
      $("#prog-30").click(function() {
       $(".progressbar .ui-progressbar-value").animate({'30%'}, 1500);
      });
      $("#prog-50").click(function() {
       $(".progressbar .ui-progressbar-value").animate({'50%'}, 1500);
      });
      $("#prog-70").click(function() {
       $(".progressbar .ui-progressbar-value").animate({'70%'}, 1500);
      });
      $("#prog-100").click(function() {
       $(".progressbar .ui-progressbar-value").animate({'100%'}, 1500);
      });
      
      $(".progressbaractive").progressbar({value: 0});
      $(".progressbarpending").progressbar({value: 0});
      $(".progressbarsuspended").progressbar({value: 0});
      
      $(".progressbaractive .ui-progressbar-value").animate({'60%'}, 1500);
      $(".progressbarpending .ui-progressbar-value").animate({'30%'}, 1500);
      $(".progressbarsuspended .ui-progressbar-value").animate({'10%'}, 1500);
    });

    (3)html

    <form id="formtest" method="get" action="">
       <label class="form-label required"> first name </label>
       <input id="form-firstname" class="form-field width60" name="firstname" type="text" value="" maxlength="100"/>
       
       <label class="form-label"> last name </label>
       <input id="form-lastname" class="form-field width60" name="lastname" type="text" value="" maxlength="100"/>
       
       <label class="form-label"> username </label>
       <input id="form-username" class="form-field width60" name="username" type="text" value="" maxlength="100"/>
       
       <label class="form-label"> password </label>
       <input id="form-password" class="form-field width60" name="password" type="password" value="" maxlength="100"/>
       
       <label class="form-label"> confirm password </label>
        <input id="form-confirmpassword" class="form-field width60" name="password_confirm" type="password" value="" maxlength="100"/>
       
       <label class="form-label"> email address </label>
       <input id="form-email" class="form-field width60" name="email" type="text" value="" maxlength="100"/>
       
       <label class="form-label"> confirm email address </label>
       <input id="form-confirmemail" class="form-field width60" name="email_confirm" type="text" value="" maxlength="100"/>
       
       <label class="form-label"> message </label>
       <textarea id="form-message" class="form-field width90" name="message" cols="" rows=""></textarea>
       
       <label class="form-label"> date format </label>
       <p class="radiocheck">
       <input id="dateformat_eu" type="radio" value="0" name="dateformat" />
       <label for="dateformat_eu">DD/MM/YYYY</label>
     
       <input id="dateformat_am" type="radio" value="0" name="dateformat" />
       <label for="dateformat_am">MM/DD/YYYY</label>
       </p>

       <label class="form-label"> Terms of Use </label>
       <p class="terms radiocheck" >
       <input class="checkbox" id="terms" type="checkbox" name="terms" />
       <label for="terms" id="lterms">I have read and accept the Terms of Use.</label>
       </p>
       
       <input id="reset" class="button red" type="button" value="Reset" name="reset" />
       <input id="validate" class="button themed" type="submit" value="Validate" name="signup" />
      </form>

  • 相关阅读:
    common-pool2连接池详解与使用
    Nginx实现页面缓存
    Nginx实现动静分离
    lnmp环境下nginx配置‘负载均衡’
    用phpstudy搭建的lnmp环境下mysql授权远程连接
    新浪OAuth网络登录,请求access_token时遇到21323的错误
    使用curl进行模拟登录
    yii2.0分页
    yii2.0表单自带验证码
    yii2.0查询关联数据以及widgets小部件
  • 原文地址:https://www.cnblogs.com/fx2008/p/2301827.html
Copyright © 2011-2022 走看看