Dwz/Jquery--使用Ajax提交表单时调用表单设置的校验

喜欢ヅ旅行 2022-09-23 14:57 205阅读 0赞

# 案例 #

今天有一个需求就是点击按钮时，使用ajax方式提交表单，而且不是直接用form表单下的submit按钮提交，表单中用的校验是dwz 自带的校验方式，表单模板如下：

ajax调用方式如下：

//提交表单
                $.ajax({
                    type: $form .method || 'POST',
                    url:$form.attr("action"),
                    data:$form.serializeArray(),
                    dataType:"json",
                    cache: false,
                    success: function(data, textStatus) {
                    	result.msg = data.message;
                        result.flag = true;
                        return result;
                    },
                    error:  function(data,
                            textStatus, errorThrown) {
                    	 result.msg = data.message;
                         result.flag = false;
                         return result;
                    }
                });

发现使用ajax提交方式，并不会调用表单中的校验（class="required digits"），而是直接提交了

# 解决方案 #

使用Jquery 插件中的valid方法，在js中使用$fom.valid()方式就可以在ajax方式调用form表单中配置的校验方法了

Jquery 插件中的valid插件

// 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;
            }
        }

例子:

## Jquery validate插件源码 ##

$.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); 
    		
    		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;
    	}
    });