关于 jquery.form和jquery.validata冲突的解决方案

最新推荐文章于 2021-08-18 16:57:54 发布

weixin_34405332

最新推荐文章于 2021-08-18 16:57:54 发布

阅读量196

点赞数

文章标签： javascript php ViewUI

本文介绍了一个使用jQuery实现的表单验证功能及文件上传进度显示的方法。文章详细描述了如何设置表单验证规则，包括电子邮件、姓名等字段的验证，并通过Ajax提交表单。此外，还介绍了文件上传过程中进度条的更新逻辑以及成功上传后的处理。

他们两个都一个submitHandler;

好好看看吧

//就是加入这个
$.validator.setDefaults({
    submitHandler: function(form){
    	$.ajax({
			url: '/index.php?ctrl=feedback&act=index',
			type: 'post',
			dataType: 'text',
			data: $("form").serialize() ,
			success:  function (result) {
				if(result==1111){
						$(".err-box").html('success');
				}else if(result==1002){
					$(".err-box").html('check code error');
				}else{
					$(".err-box").html('error');
				}
				$(".err-box").show();
				$("#submitbutton").attr('src',"<?=DOC_ROOT?>images/sendbtn-b.png");						
			},
			beforeSend: function(){
				$("#submitbutton").attr('src',"<?=DOC_ROOT?>images/loading.gif");
				$("#submitbutton").attr('disabled',true);
			}	
				
		});
		return false;
    }
});

$(function(){
	// ----------------上传 start
	var bar = $('.bar');
    var percent = $('.percent');
    //var showimg = $('#showimg');
    var progress = $(".progress");
    var btn = $(".btn span");
    $("#fileupload").wrap("<form id='myupload' action='/index.php?ctrl=feedback&act=upload' method='post' enctype='multipart/form-data'></form>");
    $("#fileupload").change(function(){
        $("#myupload").ajaxSubmit({
            dataType:  'json',
            beforeSend: function() {
            //    progress.show();
                var percentVal = '0%';
                bar.width(percentVal);
                percent.html(percentVal);
                btn.html("upload loading...");
            },
            uploadProgress: function(event, position, total, percentComplete) {
                var percentVal = percentComplete + '%';
                bar.width(percentVal);
                percent.html(percentVal);
            },
            success: function(data) {
            	btn.html("upload success!");
            	$("#attachments").val(data.path);
            },
            error:function(xhr){
                btn.html("upload failed !");
                bar.width('0')
               // files.html(xhr.responseText);
            }
        });
    });
	// ----------------- end 



	
	$("img#vcodeImg").bind("click",function(){
		// $("img#vcodeImg").attr('src',"<?=DOC_ROOT?>images/loading.gif");
		$("#vcodeImg2").show();
		document.getElementById('vcodeImg').onload=function(){
			$("#vcodeImg2").hide();
		}
		 document.getElementById('vcodeImg').src='/index.php?ctrl=feedback&act=verifyimg&' + Math.random();
		 
	});
	$("#name2").bind("focus",function(){
		//$("img#vcodeImg").attr('src',"<?=DOC_ROOT?>images/loading.gif");
		document.getElementById('vcodeImg').onload=function(){
			$("#vcodeImg2").hide();	
		}
		document.getElementById('vcodeImg').src='/index.php?ctrl=feedback&act=verifyimg&' + Math.random();
		$("#name2").unbind("focus");
		
		$("#vcodeImg2").show();
	});
	$("#feedback_post_form").validate({
		rules: {
			email: {
				required: true,
				email: true
			},
			name:{
				required:true,
				maxlength:20,
				minlength:2
			},
			subject:{
				required:true,
				maxlength:20,
				minlength:2
			},
			description:{
				required:true,
				maxlength:1000,
				minlength:10
			},
			name2:{
				required:true,
				maxlength:4,
				minlength:4
			}
		},
		messages: {
				
				email: {
				/*	required: "input Email address",
					email: "validata email!"*/
				},
				name:{
				}
			}
		/*,
		submitHandler:function() {  
				$.ajax({
					url: '/index.php?ctrl=feedback&act=index',
					type: 'post',
					dataType: 'text',
					data: $("form").serialize() ,
					success:  function (result) {
						if(result==1111){
								$(".err-box").html('success');
						}else if(result==1002){
							$(".err-box").html('check code error');
						}else{
							$(".err-box").html('error');
						}
						$(".err-box").show();
						$("#submitbutton").attr('src',"<?=DOC_ROOT?>images/sendbtn-b.png");						
					},
					beforeSend: function(){
						$("#submitbutton").attr('src',"<?=DOC_ROOT?>images/loading.gif");
						$("#submitbutton").attr('disabled',true);
					}	
						
				});
			}*/
		});

})