这几天在研究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插件简介 jQuery Form插件主要由`jquery.form.js`脚本组成,它扩展了jQuery的$.ajax方法,提供了一种更加简单...
而jQuery Form Plugin是jQuery的一个扩展,专门为表单处理提供了丰富的功能,包括异步提交表单、表单验证以及实时反馈等功能。本文将详细解析jQuery Form Plugin的使用及其核心知识点。 首先,`jquery.form.js`是这...
其中,`jquery.form.js`是jQuery的一个重要插件,它扩展了jQuery的核心功能,使得表单的异步提交以及文件上传变得异常简单。本文将详细探讨`jquery.form.js`的使用方法、主要功能及其在实际项目中的应用。 一、`...
在Web开发中,jQuery是一个非常流行的JavaScript库,它简化了DOM操作、事件处理、动画以及Ajax交互等任务。而在处理表单(form)相关的操作时,jQuery Form插件是不可或缺的一部分。在给定的压缩包文件中,我们看到...
此外,`$.fn.ajaxSubmit`方法还可以接受一个完整的jQuery.ajax选项对象,这意味着你可以使用所有jQuery的Ajax选项,如`cache`、`timeout`、`contentType`等,来定制你的异步请求。 总结一下,jQuery.form插件通过...
文档中提到的`ajaxForm`方法是jquery.form.js插件中的一个重要函数,它用于在文档的DOM加载完成后绑定一个表单,以便能够通过AJAX方式提交表单,同时可以提供一个回调函数来处理服务器响应。例如,在代码示例`$('#...
**jQuery.form.js插件详解与应用** jQuery.form.js是一款基于jQuery库的插件,它为开发者提供了方便、灵活的表单处理功能,尤其在异步(AJAX)提交表单方面表现出色。这款插件使得在网页上实现无刷新的文件上传和...
总结起来,jQuery Form Plugin 3.51.0版本是一个强大的工具,它通过提供丰富的API和事件,帮助开发者高效地处理HTML表单,实现异步提交、文件上传和数据验证等功能,大大提升了Web应用的交互性和用户体验。...
首先,`jQuery.form.js` 是一个jQuery插件,它扩展了原生的HTML表单提交,提供了异步文件上传的功能。通过使用AJAX方式,我们可以实现无刷新的文件上传,同时还能监控上传进度,这对于大型文件上传尤其有用。 核心...
**jQuery.form.js** 是一个非常流行的JavaScript库,用于简化AJAX(异步JavaScript和XML)交互,特别是与HTML表单的交互。这个库是jQuery的一个扩展,它为处理表单数据提供了一种方便且强大的方式,包括无刷新的提交...
jquery.form.js是一款基于jQuery的扩展插件,用于以AJAX方式提交表单。...由于文档的扫描识别可能不完全准确,一些代码或文本可能存在误差,建议结合实际的jQuery和jquery.form.js的官方文档进行深入学习和验证。
在Web开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了DOM操作、事件处理和Ajax交互。本资源“jquery.validate+jquery.form.rar”是结合了两个重要的jQuery插件:jQuery Validate和jQuery Form,用于...
在网页开发中,jQuery是一个非常重要的JavaScript库,它极大地简化了DOM操作、事件处理、动画效果以及Ajax交互等任务。本文将深入探讨jQuery Form插件(即`jquery.form.js`)及其核心库`jquery.js`,并结合实际应用...
JQuery 提供了一个强大的插件——JQuery Form,它可以简化这一过程。本文将详细介绍 JQuery Form 插件中的 `ajaxForm()` 和 `ajaxSubmit()` 方法,并结合实例讲解如何配置这些方法。 #### 二、`ajaxForm()` 和 `...
在IT领域,jQuery是一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互。在本主题中,我们重点关注两个特定的jQuery插件:`jquery-confirm.js`和`jquery-form.js`,它们是jQuery生态中...
考虑到不同版本的浏览器和jQuery库,选择一个兼容性良好的`jquery.form.js`版本至关重要。通常,较新的版本会支持更多现代浏览器,但可能不兼容旧版浏览器。因此,根据项目的目标用户群体和所使用的jQuery版本选择...
通过以上介绍,我们可以看出jQuery Form Plugin是一个强大且灵活的工具,它极大地简化了前端开发中处理表单和文件上传的复杂性。在实际项目中,合理运用这个插件,可以提升用户体验,同时减少后端压力,实现高效、...