zepto.form.js 完美替代 jquery.form.js，新增表单校验方法含ajax

最新推荐文章于 2022-03-07 20:58:34 发布

原创最新推荐文章于 2022-03-07 20:58:34 发布 · 4.9k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#zepto #jquery #form

javascript 专栏收录该内容

1 篇文章

订阅专栏

作者QQ：156791941，技术问题可以探讨，加Q请注明来意

源码如下，暂时只提供了ajaxSubmit方法，有更好的意见可以跟我反馈，项目有需求本人会持续更新，敬请关注。

(function($) {
	$.fn.ajaxSubmit = function(options) {
		var form = this;
		
		var formAction = form.attr('action');
		var formMethod = form.attr('method');
		if(formMethod == null ||
				!/^(POST|GET)$/i.test(formMethod.trim())){
			formMethod = "GET";
		}
		var params = new Object();
		
		/*组合参数*/				
		var items = form.find("input[type=hidden],"+
                "input[type=text],"+
                "input[type=password],"+
                "textarea,"+
                "select,"+
                "input[type=radio]:checked,"+
                "input[type=checkbox]:checked");
		
		items.each(function(index){
			params[this.name] = this.value;
		});
		/**/
		
		var dataType = options.dataType;
		if(dataType == null)
			dataType = 'json';
		
		var success = options.success;
		if(success == null){
			success = function(){
			};
		}
		
		$.ajax({
			type: formMethod,
			url: formAction,
			data: params,
			dataType: dataType,
			success: success,
                        traditional: true
		});
	};
})(Zepto);

(function($){    
			$.extend($.fn, {
				v$required:function(){
					
					if ( this[0].nodeName.toLowerCase() === "select" ) {
						var val = this.val();
						return val && val.length > 0;
					}
					
					var value = this.val();
					
					return value !== undefined && value !== null && value.length > 0;
				},
				v$range:function(min,max){
					var len = this.val().length;
					return len >= min && len <= max;
				},
				v$email:function(){
					var value = this.val();
					return /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/.test( value );
				},
				v$equalTo:function(param){
					var value = this.val();
					var target = $( param );
					
					return value === target.val();
				},
				v$remote:function(url,param){
					var result = false;
					
					if(!param){
						param = {};
						param[this.attr("name")] = this.val();
					}
					
					$.ajax({
						url: url,
						data: param,
						type: 'POST',
						dataType: 'text',
						traditional: true,
						async: false,
						success: function(data){
							result === data;
						}
					});
					
					return result;
				}
			})
		})(Zepto);

使用方法

$("#formId").ajaxSubmit({

...

});