日期:2014-05-16  浏览次数:20283 次

使用jquery.form.js做的一个验证
这几天在研究jquery的form插件。把自己做的例子贴出记录下,本人的记性不是特别好!

贴代码先:

表单就不贴子,有些多,大致说下吧,大部都是文件框(text),其中有一个4个单选框(radio),还有一个submit。

这个验证还有些问题,在提交的时候,虽然提示为能为空,但仍然提交成功,也就是说return false并不能阻止表单的提交。后来在网上求助,才找到解决 办法,把return false换成$('#add').preventDefault(); 就可以了
preventDefault()  这个函数的意思就是阻止默认的提交动作
$(function(){
	$('#add').ajaxForm({
		beforeSubmit:checkForm,//提交前
		success:complate,//提交成功后
		dataType:'json'//数据格式
	});

	function checkForm(){		
			$('input').each(function (index,arr){//选中所有input的标签,并循环
				if($(this).attr('type') == 'text'){//如果类型为text,即文本框
					if($(this).val() == ''){//看是否为空
						$(this).focus();//定位焦点
						$('#error').html('不能为空');//提示			                                      //return false;
						$('#add').preventDefault();//阻止表单提交
					}					
				}
			});
			$('input:gt(6)').each(function (n,v){
				var ck = /^\d*$/;//验证纯数字的正则
      /*gt(6)它的意思从选择第六个input标签后的所有元素,与其相反的是lt(6);是选择第六个元素之前的所有元素。需注意的是这个起始是以0为开始的,跟数组一样,第一个元素是0!*/
				
				if($(this).val() != '' && $(this).attr('type') == 'text'){//不为空且为文本框,因为最后是一个submit
					if(!ck.test($(this).val())){//正则验证						
						$(this).focus();//焦点
						$('#error').html('请输入数字');	//提示			                                    //return false;
						$('#add').preventDefault();//阻止表单提交
					}
				}
			});			
				
	}
        //下面是验证成功后的一些提示信息
	function complate(data){
		if(data.status == 1){
			$('#sub').attr('disabled',true);//禁用按钮,防止重复提交
			$('#error').html(data.info);			
			//alert('提交成功');
		}
		else{
			$('#error').html(data.info);
		}
	}
});