jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地、无侵入地升级HTML表单以支持Ajax。
jQuery Form有两个核心方法 -- ajaxForm() 和 ajaxSubmit(), 它们集合了从控制表单元素到决定如何管理提交进程的功能。
另外,插件还包括其他的一些方法: formToArray()、formSerialize()、fieldSerialize()、fieldValue()、clearForm()、clearFields() 和 resetForm()等。
下载地址:http://malsup.com/jquery/form/#download
核心方法 -- ajaxForm() 和 ajaxSubmit()
-
$('#myForm').ajaxForm(function(){
-
$('#output1').html("提交成功!欢迎下次再来!").show();
-
});
-
-
$('#myForm2').submit(function(){
-
$(this).ajaxSubmit(function(){
-
$('#output2').html("提交成功!欢迎下次再来!").show();
-
});
-
returnfalse;
-
});
通过Form插件的两个核心方法,都可以在不修改表单的HTML代码结构的情况下,轻易地将表单的提交方式升级为Ajax提交方式
ajaxForm() 和 ajaxSubmit() 都能接受0个或1个参数,当为单个参数时,该参数既可以是一个回调函数,也可以是一个options对象,上面的例子就是回调函数,下面介绍options对象,使得它们对表单拥有更多的控制权
-
varoptions={
-
target:'#output',
-
beforeSubmit:showRequest,
-
success:showResponse,
-
-
-
-
-
-
timeout:3000
-
}
-
-
functionshowRequest(formData,jqForm,options){
-
-
-
-
varqueryString=$.param(formData);
-
varformElement=jqForm[0];
-
varaddress=formElement.address.value;
-
returntrue;
-
};
-
-
functionshowResponse(responseText,statusText){
-
-
varname=$('name',responseXML).text();
-
varaddress=$('address',responseXML).text();
-
$("#xmlout").html(name+""+address);
-
-
$("#jsonout").html(data.name+""+data.address);
-
};
-
-
$("#myForm").ajaxForm(options);
-
-
$("#myForm2").submit(funtion(){
-
$(this).ajaxSubmit(options);
-
returnfalse;
-
});
表单提交之前进行验证: beforeSubmit会在表单提交前被调用,如果beforeSubmit返回false,则会阻止表单提交
-
beforeSubmit:validate
-
functionvalidate(formData,jqForm,options){
-
-
for(vari=0;i<formData.length;i++){
-
if(!formData[i].value){
-
alert('用户名,地址和自我介绍都不能为空!');
-
returnfalse;
-
}
-
}
-
-
-
varform=jqForm[0];
-
if(!form.name.value||!form.address.value){
-
alert('用户名和地址不能为空,自我介绍可以为空!');
-
returnfalse;
-
}
-
-
-
varusernameValue=$('input[name=name]').fieldValue();
-
varaddressValue=$('input[name=address]').fieldValue();
-
if(!usernameValue[0]||!addressValue[0]){
-
alert('用户名和地址不能为空,自我介绍可以为空!');
-
returnfalse;
-
}
-
-
varqueryString=$.param(formData);
-
-
returntrue;
-
}
分享到:
相关推荐
jquery表单验证插件jquery.form.js.pdf
jQuery Form Plugin能够让你简洁的将...插件里面主要的方法, ajaxForm和ajaxSubmit,能够从form组件里采集信息确定如何处理表单的提交过程。 两个方法都支持众多的可选参数,能够让你对表单里数据的提交做到完全的控制。
jquery.form.min.js是一个异步提交表单的插件,使用该插件可以设置callback函数,并且页面不会跳转
文件压缩包里有jquery.form.js和使用说明文档 jquery表单验证插件_jquery.form.js
使用jQuery.form插件,实现完美的表单异步提交
jquery 表单插件 可以异步上传表单内容 不用直接构造
使用jquery.form.js插件,可以完美实现的表单异步提交哦,亲测可用。
version 2.9.0 (Jan, 2018) jquery序列化插件,使用jquery.serializeJSON,可以在基于jQuery或者Zepto的页面中,调用 .serializeJSON() 方法来序列化form表单的数据成JS对象
jquery.form.js是一款jquery插件,通过该插件,我们可以非常简单的实现表单的异步提交,并实现文件上传、进度条显示等等!
jquery.form.js,这是一个jquery插件,jquery的ajax无法提交图片,而这个插件可以完美解决,使用方法,将该文件放到jquery后面引入:$('#order_form').ajaxForm(function(a) { var b = eval("(" + a + ")"); alert...
jquery.form.js ,
jquery.form.js,这是一个完美提交表单的jquery插件,jquery的ajax无法提交图片,而这个插件可以完美解决,使用方法,将该文件放到jquery后面引入:$('#order_form').ajaxForm(function(a) { var b = eval("(" + a ...
jQuery.form.js 异步提交表单 jQuery.form.js 异步提交表单jQuery.form.js 异步提交表单
jquery.formautofill 表单填充控件,在平时使用页面表单或者弹出窗口需要赋值的时候通常情况要一个一个的赋值,有了这个控件可以实现一句话就轻松搞定。
ajaxForm()和ajaxSubmit()方法可以接受0个或1个参数,当为单个参数时,该参数可以是一个回调函数,也可以是一个options对象。以下是一个options对象. var options={ target:'#output1', //把服务器返回内容放入id为...
js表单源码 jquery.form.rar 简单实用的工具 花了很多搞到的。珍惜使用 (function (factory) { "use strict"; if (typeof define === 'function' && define.amd) { // using AMD; register as anon module ...