jQuery表单插件jquery,form插件之formDdata参数校验表单及验证后提交
分类:微服架构

jQuery form插件之formDdata参数校验表单及表达后提交,jqueryformddata

Form Plugin API 里提供了众多有效的章程能够让您轻轻易松的管理表单里的多少和表单的交由进度。

测验情况:安插到汤姆cat中的web项目。

意气风发、引进依赖js

<script src="jquery-1.3.1.js" type="text/javascript"></script>
<script src="jquery.form.js" type="text/javascript"></script>

二、初阶化回调函数。

率先,我们开端化那么些表单,给它三个 beforeSubmit 回调函数 - 这是七个用来校验的函数。

$(document).ready(function() { 
$('#myForm').ajaxForm({ 
target:'#output1', // 用服务器返回的数据 更新 id为output1的内容.
beforeSubmit: validate // 提交前,验证
}); 
});

三、校验法规

function validate(formData, jqForm, options) { 
// formdata是数组对象,每个对象拥有名称和值.
// 数据如下面的格式:
// [ 
// { name: username , value: usernameValue }, 
// { name: password , value: passwordValue } 
// ] 
for (var i=0; i < formData.length; i++) { 
if (!formData[i].value) { 
alert('用户名,地址和自我介绍都不能为空!'); 
return false; 
} 
} 
var queryString = $.param(formData); //组装数据
//alert(queryString); //类似 : name=1&add=2 
return true; 
}

四、详细代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jQuery form插件的使用--用 formData 参数校验表单</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="jquery-1.3.1.js" type="text/javascript"></script>
<script src="jquery.form.js" type="text/javascript"></script>
<script type="text/javascript"> 
$(document).ready(function() { 
$('#myForm').ajaxForm({ 
target: '#output1', // 用服务器返回的数据 更新 id为output1的内容.
beforeSubmit: validate // 提交前,验证
}); 
});
function validate(formData, jqForm, options) { 
// formdata是数组对象,每个对象拥有名称和值.
// 数据如下面的格式:
// [ 
// { name: username , value: usernameValue }, 
// { name: password , value: passwordValue } 
// ] 
for (var i=0; i < formData.length; i++) { 
if (!formData[i].value) { 
alert('用户名,地址和自我介绍都不能为空!'); 
return false; 
} 
} 
var queryString = $.param(formData); //组装数据
//alert(queryString); //类似 : name=1&add=2 
return true; 
}
</script> 
</head>
<body>
<h3> Demo 5 :jQuery form插件的使用--用 formData 参数校验表单,验证后提交(简单验证). </h3>
<form id="myForm" action="ajax2.jsp" method="post"> 
名称: <input type="text" name="name" id="name" /> <br/>
地址: <input type="text" name="address" id="address"/><br/> 
自我介绍: <textarea name="comment" id="comment" ></textarea> <br/>
<input type="submit" id="test" value="提交" /> <br/>
<div id="output1" ></div>
</form>
</body>
</html>

如上所述是小编给大家享受的jQuery form插件之formDdata参数校验表单及注脚后提交的全体内容,希望对大家具有利于。

jQuery form插件之ajaxForm(State of Qatar和ajaxSubmit(卡塔尔的可选参数项对象,jqueryajaxform

Form Plugin API 里提供了过多平价的秘诀能够让您轻轻易松的管理表单里的数目和表单的交付进度。

测量检验境况:布置到汤姆cat中的web项目。

本文演示的是:jQuery form插件之ajaxForm(State of Qatar和ajaxSubmit(State of Qatar的可选参数项对象

ajaxForm(State of Qatar和ajaxSubmit(State of Qatar的可选参数项对象

ajaxForm 和 ajaxSubmit 都支持大气的可选参数,它们经过可选参数项对象传入。可选参数项对象只是叁个简短的 JavaScript对象,里边饱含了一部分质量和大器晚成部分值:

target

用server端重临的源委改动钦定的页面成分的从头到尾的经过。 这一个值能够用jQuery 选取器来代表, 可能是一个jQuery 对象, 多个 DOM 成分。
缺省值: null

url

表单提交的地址。
缺省值: 表单的action的值

type

表单提交的办法,'GET' 或 'POST'.
缺省值: 表单的 method 的值 (若无指明则感到是 'GET'卡塔尔

beforeSubmit

表单提交前进行的法子。那么些能够用在表单提交前的预管理,或表单校验。要是'beforeSubmit'钦点的函数重返false,则表单不会被提交。 'beforeSubmit'函数调用时供给3个参数:数组格局的表单数据,jQuery 对象方式的表单对象,可选的用来传递给ajaxForm/ajaxSubmit 的对象。

数组格局的表单数据是上边那样的格式:[ { name: 'username', value: 'jresig' }, { name: 'password', value: 'secret' } ]

缺省值: null

success

当表单提交后实施的函数。 如若'success' 回调函数被钦点,当server端重返对表单提交的响应后,那些主意就能被试行。 responseText 和 responseXML 的值会被传进那一个参数 (那个要依赖于dataType的连串State of Qatar.
缺省值: null

dataType

钦定服务器响应再次回到的数据类型。当中之意气风发: null, 'xml', 'script', 或者'json'. 这几个 dataType 选项用来提示你怎么去管理server端重临的数码。 那几个和 jQuery.httpData 方法直接相对应。

下边正是能够用的选项:

'xml': 假设 dataType == 'xml' 则 server 端重临的多少被视作是 XML 来拍卖, 这种意况下'success'钦命的回调函数会被传进去 responseXML 数据

'json': 如若 dataType == 'json' 则server端重临的数额将会被推行,并传进'success'回调函数

'script': 假使 dataType == 'script' 则server端再次回到的数量将会在上下文的景况中被试行

缺省值: null

semantic

叁个布尔值,用来提醒表单里提交的数量的依次是还是不是需求从严依照语义的次第。通常表单的数码都是按语义顺序种类化的,除非表单里有一个type="image"元素. 所以独有当表单里必需供给有严刻各样并且表单里有type="image"时才要求钦定这么些。
缺省值: false

resetForm

布尔值,提示表单提交成功后是还是不是供给重新初始化。
缺省值: null

clearForm

布尔值,提示表单提交成功后是或不是供给清空。
缺省值: null

iframe

布尔值,用来提示表单是不是需求交给到二个iframe里。 这几个用在表单里有file域要上传文件时。越来越多音讯请参考 代码示例 页面里的File Uploads 文书档案。
缺省值: false

黄金年代、引进信任的js

<script src="jquery-1.3.1.js" type="text/javascript"></script>
<script src="jquery.form.js" type="text/javascript"></script>

网盘下载: 访问密码 e3bc

二、编写页面

<!-- demo1 -->
<form id="myForm" action="ajax2.jsp" method="post"> 
名称: <input type="text" name="name" /> <br/>
地址: <input type="text" name="address" /><br/> 
自我介绍: <textarea name="comment"></textarea> <br/>
<input type="submit" id="test" value="提交" /> <br/>
<div id="output1" ></div>
</form>

三、调用方法

<script type="text/javascript"> 
$(document).ready(function() { 
var options = { 
target: '#output1', // 用服务器返回的数据 更新 id为output1的内容.
beforeSubmit: showRequest, // 提交前
success: showResponse, // 提交后 
//另外的一些属性: 
//url: url // 默认是form的action,如果写的话,会覆盖from的action. 
//type: type // 默认是form的method,如果写的话,会覆盖from的method.('get' or 'post').
//dataType: null // 'xml', 'script', or 'json' (接受服务端返回的类型.) 
//clearForm: true // 成功提交后,清除所有的表单元素的值.
resetForm: true // 成功提交后,重置所有的表单元素的值.
//由于某种原因,提交陷入无限等待之中,timeout参数就是用来限制请求的时间,
//当请求大于3秒后,跳出请求. 
//timeout: 3000 
}; 
//'ajaxForm' 方式的表单 .
$('#myForm').ajaxForm(options); 
//或者 'ajaxSubmit' 方式的提交.
//$('#myForm').submit(function() { 
// $(this).ajaxSubmit(options); 
// return false; //来阻止浏览器提交.
//}); 
}); 
// 提交前
function showRequest(formData, jqForm, options) { 
// formdata是数组对象,在这里,我们使用$.param()方法把他转化为字符串.
var queryString = $.param(formData); //组装数据,插件会自动提交数据
alert(queryString); //类似 : name=1&add=2 
return true; 
} 
// 提交后
function showResponse(responseText, statusText) { 
alert('状态: ' + statusText + 'n 返回的内容是: n' + responseText); 
} 
</script> 

四、详细代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jQuery form插件的使用--ajaxForm()和ajaxSubmit()的可选参数项对象. </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="jquery-1.3.1.js" type="text/javascript"></script>
<script src="jquery.form.js" type="text/javascript"></script>
<script type="text/javascript"> 
$(document).ready(function() { 
var options = { 
target: '#output1', // 用服务器返回的数据 更新 id为output1的内容.
beforeSubmit: showRequest, // 提交前
success: showResponse, // 提交后 
//另外的一些属性: 
//url: url // 默认是form的action,如果写的话,会覆盖from的action. 
//type: type // 默认是form的method,如果写的话,会覆盖from的method.('get' or 'post').
//dataType: null // 'xml', 'script', or 'json' (接受服务端返回的类型.) 
//clearForm: true // 成功提交后,清除所有的表单元素的值.
resetForm: true // 成功提交后,重置所有的表单元素的值.
//由于某种原因,提交陷入无限等待之中,timeout参数就是用来限制请求的时间,
//当请求大于3秒后,跳出请求. 
//timeout: 3000 
}; 
//'ajaxForm' 方式的表单 .
$('#myForm').ajaxForm(options); 
//或者 'ajaxSubmit' 方式的提交.
//$('#myForm').submit(function() { 
// $(this).ajaxSubmit(options); 
// return false; //来阻止浏览器提交.
//}); 
}); 
// 提交前
function showRequest(formData, jqForm, options) { 
// formdata是数组对象,在这里,我们使用$.param()方法把他转化为字符串.
var queryString = $.param(formData); //组装数据,插件会自动提交数据
alert(queryString); //类似 : name=1&add=2 
return true; 
} 
// 提交后
function showResponse(responseText, statusText) { 
alert('状态: ' + statusText + 'n 返回的内容是: n' + responseText); 
} 
</script> 
</head>
<body>
<h3> Demo 4 : jQuery form插件的使用--ajaxForm()和ajaxSubmit()的可选参数项对象. </h3>
<!-- demo1 -->
<form id="myForm" action="ajax2.jsp" method="post"> 
名称: <input type="text" name="name" /> <br/>
地址: <input type="text" name="address" /><br/> 
自我介绍: <textarea name="comment"></textarea> <br/>
<input type="submit" id="test" value="提交" /> <br/>
<div id="output1" ></div>
</form>
</body>
</html>

新建多少个ajax2.jsp文件:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
request.setCharacterEncoding("UTF-8");//防止乱码!
String name = request.getParameter("name");
String address = request.getParameter("address");
String comment = request.getParameter("comment");
System.out.println(name + " - " +address + " - " +comment);
out.println(name + " " +address + " " +comment);
%>

五、测验效果:

填写数据:

交给表单的内容:

图片 1

从服务器再次回到的数目:

图片 2

图片 3

上述内容是作者给大家狼吞虎咽的jQuery form插件之ajaxForm(卡塔尔国和ajaxSubmit(卡塔尔(قطر‎的可选参数项对象的整个叙述,希望本文分享对大家有着扶持。

jQuery表单插件jquery.form.js

概述

jQuery Form Plugin可以让您简洁的将以HTML格局提交的表单晋级成接纳AJAX本事提交的表单。

插件里面首要的办法, ajaxForm和ajaxSubmit,能够从form组件里采撷消息明确哪些管理表单的付出进程。

多少个方法都帮衬广大的可选参数,可以让你对表单里多少的付出成功一心的垄断。

 

入门教导

 

意气风发、在您的页面里写叁个表单。叁个味如鸡肋的表单,不必要其余分外的符号:

 

二、引进jQuery和jquery.form.js脚本文件同不经常候加多几句简单的代码让页面在DOM加载成功后初叶化表单:

 

 

<script type=text/javascript src=js/jquery-1.8.0.min.js></script>
<script type=text/javascript src=js/jquery.form.js></script>
$(function() {
 $('#myForm').ajaxForm(function() {
  alert(submit success!);
 });
})

如此那般就OK了,当表单提交后name和email的值就能够被交付给login.action. 借使服务器端再次回到成功的情况,

 

顾客将会见到一句提示新闻submit success! 。

 

Form Plugin API

Form Plugin API里提供了不菲管用的方法能够令你轻易的拍卖表单里的数目和表单的交由进度。

 

ajaxForm

预处理将在利用AJAX情势交给的表单,将持有必要选用的事件监听器增多到个中。它不是提交这些表单。

在页面包车型大巴ready函数里应用ajaxForm来给你页面上的表单做这么些AJAX提交的备选干活。

ajaxForm需求零个或叁个参数。这唯意气风发的四个参数能够是三个回调函数恐怕是三个可选参数对象。

 

$('#myFormId').ajaxForm();

ajaxSubmit

 

当即通过AJAX情势提交表单。最布满的用法是对客户提交表单的动作进行响适当时候调用它。

ajaxForm须要零个或二个参数。唯意气风发的多个参数能够是一个回调函数大概是贰个可选参数对象。

 

$('#myFormId').submit(function() {
 $(this).ajaxSubmit(function() {
  alert(success!);
 });
 return false; //阻止表单默认提交  
});

formSerialize

 

将表单系列化成查询串。这几个法子将赶回贰个形如: name1=value1&name2=value2的字符串。

 

var queryString = $('#myFormId').formSerialize();
$.post('login.action', queryString);

resetForm

 

经过调用表单成分的内在的DOM上的办法把表单重新设置成早期的景况。

 

$('#myFormId').resetForm();

clearForm

 

清空表单全数因素的值。这一个办法将会清空全体的文本框,密码框,文本域里的值,去掉下拉列表全体被入选的项,

让全部复选框和单选框里被选中的项不再选中。

 

$('#myFormId').clearForm();

 

可选参数项对象

ajaxForm 和 ajaxSubmit 都帮助大气的可选参数,它们经过可选参数项对象传入。

可选参数项对象只是二个简约的 JavaScript对象,里边蕴含了有个别属性和局地值:具体参数查看官方网址API

代码示例

下边实例演示基本的常用参数,以至怎么着行使表单提交在此之前和后来的回调函数。

 

 

概述 jQuery Form Plugin能够让你简洁的将以HTML方式提交的表单晋级成选拔AJAX技能提交的表单。 插件里面首要的方法...

你或然感兴趣的小说:

  • Jquery ajaxsubmit上传图片实今世码
  • IE中jquery.form中ajax提交没影响化解措施分享
  • 在jQuery ajax中按钮button和submit的区分解析
  • jquery formValidator插件ajax验证 内容不做其它矫正再离开提醒错误的bug消除办法
  • jquery的ajaxSubmit(卡塔尔(قطر‎异步上传图片并保存表单数据演示代码
  • jquery ajaxSubmit 异步提交的简便完成
  • jquery达成ajax提交form表单的办法计算
  • jquery种类化form表单使用ajax提交后甩卖回来的json数据
  • jQuery使用ajaxSubmit(卡塔尔国提交表单示例
  • Jquery基于Ajax方法自定义无刷新提交表单Form实例
  • jQuery form插件之ajaxForm(卡塔尔和ajaxSubmit(卡塔尔国的可选参数项对象

form插件之formDdata参数校验表单及表达后交付,jqueryformddata Form Plugin API 里提供了非常多一蹴而就的艺术能够令你轻巧的管理表单里的数额和表...

你或然感兴趣的稿子:

  • Jquery ajaxsubmit上传图片实现代码
  • IE中jquery.form中ajax提交没影响解决情势分享
  • 在jQuery ajax中按键button和submit的分别剖析
  • jquery formValidator插件ajax验证 内容不做此外改进再离开提醒错误的bug死灭措施
  • jquery的ajaxSubmit(卡塔尔国异步上传图片并保留表单数据演示代码
  • jquery ajaxSubmit 异步提交的简要完毕
  • jquery完成ajax提交form表单的方式总计
  • jquery连串化form表单使用ajax提交后管理回来的json数据
  • jQuery使用ajaxSubmit(卡塔尔提交表单示例
  • Jquery基于Ajax方法自定义无刷新提交表单Form实例
  • jQuery form插件之formDdata参数校验表单及注解后交给

form插件之ajaxForm(卡塔尔和ajaxSubmit(卡塔尔(قطر‎的可选参数项对象,jqueryajaxform Form Plugin API 里提供了无数有效的秘籍能够令你轻易的拍卖表单里的数码和...

本文由10bet手机官网发布于微服架构,转载请注明出处:jQuery表单插件jquery,form插件之formDdata参数校验表单及验证后提交

上一篇:python自动登录,python人人网登录应用实例 下一篇:没有了
猜你喜欢
热门排行
精彩图文