`
yeyuan
  • 浏览: 230873 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

使用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);
		}
	}
});

分享到:
评论

相关推荐

    jquery form jquery.form.js

    在这个主题中,我们将深入探讨jQuery Form的核心功能、使用方法以及常见应用场景。 一、jQuery Form插件简介 jQuery Form插件主要由`jquery.form.js`脚本组成,它扩展了jQuery的$.ajax方法,提供了一种更加简单...

    jquery.form.js和使用说明

    而jQuery Form Plugin是jQuery的一个扩展,专门为表单处理提供了丰富的功能,包括异步提交表单、表单验证以及实时反馈等功能。本文将详细解析jQuery Form Plugin的使用及其核心知识点。 首先,`jquery.form.js`是这...

    jquery.form.js

    其中,`jquery.form.js`是jQuery的一个重要插件,它扩展了jQuery的核心功能,使得表单的异步提交以及文件上传变得异常简单。本文将详细探讨`jquery.form.js`的使用方法、主要功能及其在实际项目中的应用。 一、`...

    jquery.form.min.js

    在Web开发中,jQuery是一个非常流行的JavaScript库,它简化了DOM操作、事件处理、动画以及Ajax交互等任务。而在处理表单(form)相关的操作时,jQuery Form插件是不可或缺的一部分。在给定的压缩包文件中,我们看到...

    使用jQuery.form插件,实现完美的表单异步提交

    此外,`$.fn.ajaxSubmit`方法还可以接受一个完整的jQuery.ajax选项对象,这意味着你可以使用所有jQuery的Ajax选项,如`cache`、`timeout`、`contentType`等,来定制你的异步请求。 总结一下,jQuery.form插件通过...

    jquery表单验证插件jquery.form.js.pdf

    文档中提到的`ajaxForm`方法是jquery.form.js插件中的一个重要函数,它用于在文档的DOM加载完成后绑定一个表单,以便能够通过AJAX方式提交表单,同时可以提供一个回调函数来处理服务器响应。例如,在代码示例`$('#...

    jquery.form.js下载_jquery.form.js上传文件插件下载

    **jQuery.form.js插件详解与应用** jQuery.form.js是一款基于jQuery库的插件,它为开发者提供了方便、灵活的表单处理功能,尤其在异步(AJAX)提交表单方面表现出色。这款插件使得在网页上实现无刷新的文件上传和...

    jQuery.form.js

    总结起来,jQuery Form Plugin 3.51.0版本是一个强大的工具,它通过提供丰富的API和事件,帮助开发者高效地处理HTML表单,实现异步提交、文件上传和数据验证等功能,大大提升了Web应用的交互性和用户体验。...

    jQuery.form.js结合canvas上传图片显示进度圈效果

    首先,`jQuery.form.js` 是一个jQuery插件,它扩展了原生的HTML表单提交,提供了异步文件上传的功能。通过使用AJAX方式,我们可以实现无刷新的文件上传,同时还能监控上传进度,这对于大型文件上传尤其有用。 核心...

    jquery.form.js(最新的)

    **jQuery.form.js** 是一个非常流行的JavaScript库,用于简化AJAX(异步JavaScript和XML)交互,特别是与HTML表单的交互。这个库是jQuery的一个扩展,它为处理表单数据提供了一种方便且强大的方式,包括无刷新的提交...

    jquery.form.js中文API.pdf

    jquery.form.js是一款基于jQuery的扩展插件,用于以AJAX方式提交表单。...由于文档的扫描识别可能不完全准确,一些代码或文本可能存在误差,建议结合实际的jQuery和jquery.form.js的官方文档进行深入学习和验证。

    jquery.validate+jquery.form.rar

    在Web开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了DOM操作、事件处理和Ajax交互。本资源“jquery.validate+jquery.form.rar”是结合了两个重要的jQuery插件:jQuery Validate和jQuery Form,用于...

    jquery.from.js & juery.js

    在网页开发中,jQuery是一个非常重要的JavaScript库,它极大地简化了DOM操作、事件处理、动画效果以及Ajax交互等任务。本文将深入探讨jQuery Form插件(即`jquery.form.js`)及其核心库`jquery.js`,并结合实际应用...

    JQuery.form表单提交参数详解.txt

    JQuery 提供了一个强大的插件——JQuery Form,它可以简化这一过程。本文将详细介绍 JQuery Form 插件中的 `ajaxForm()` 和 `ajaxSubmit()` 方法,并结合实例讲解如何配置这些方法。 #### 二、`ajaxForm()` 和 `...

    jquery-confirm.js和jquery-form.js

    在IT领域,jQuery是一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互。在本主题中,我们重点关注两个特定的jQuery插件:`jquery-confirm.js`和`jquery-form.js`,它们是jQuery生态中...

    jquery form插件的各个版本

    考虑到不同版本的浏览器和jQuery库,选择一个兼容性良好的`jquery.form.js`版本至关重要。通常,较新的版本会支持更多现代浏览器,但可能不兼容旧版浏览器。因此,根据项目的目标用户群体和所使用的jQuery版本选择...

    jquery-form.js

    通过以上介绍,我们可以看出jQuery Form Plugin是一个强大且灵活的工具,它极大地简化了前端开发中处理表单和文件上传的复杂性。在实际项目中,合理运用这个插件,可以提升用户体验,同时减少后端压力,实现高效、...

Global site tag (gtag.js) - Google Analytics