JQuery提交表单 Form.js官方插件介绍

合集下载

jquery

jquery

构造jQuery对象:jQuery(html),jQuery(elements) ,
$("<div><p>Hello</p></div>").appendTo("body") $(document.body).css( "background", "black" );
$(html),$(elements)
show() show(speed,[callback])
淡入淡出
通过不透明度的变化来实现所有匹配元素的淡入效果
fadeIn(speed, [callback])
淡出效果
fadeOut(speed,[callback])
调整为指定的不透明度
fadeTo(speed,opacity,[callback])
3
一些简单的代码简化
实现为页面的某一区域中的每个链接附加一个单击事件
没有使用 jQuery 的 DOM 脚本
使用了 jQuery 的 DOM 脚本
4
jQuery能做什么?
获取页面的部分内容 修改页面的外观 修改页面的内容 在页面中响应用户的交互 给页面加上动画 无刷新返回服务器端的信息 还提供了改进基本的 JavaScript 结构,如迭代和数组操作 以插件的形式持续地通过开发加入新的功能
$(".myClass").css("border","3px solid red");
根据给定的元素名匹配所有元素
$("div").css("border","3px solid red");

JSform表单提交的方法

JSform表单提交的方法

JSform表单提交的⽅法1.当输⼊⽤户名和密码为空的时候,需要判断。

这时候就⽤到了校验⽤户名和密码,这个需要在jsp的前端页⾯写;有两种⽅法,⼀种是⽤submit提交。

⼀种是⽤button提交。

⽅法⼀:在jsp的前端页⾯的头部插⼊⼀个js⽅法:function checkUser(){var result = document.getElementById("userid").value;var password = document.getElementById("userpassid").value;if(result == "" ){alert("⽤户名不能为空");return false;}if(password == "" ){alert("密码不能为空");return false;}else{return true;}}在form表单⾥写成这样:<form id="formid" name= "myform" method = 'post' action = 'user_login_submit.action' onsubmit = "return checkUser();" ><table width="100%" border="0"><tr><td width="60" height="40" align="right">⽤户名&nbsp;</td><td><input type="text" value="" class="text2" name = "username" id = "userid"/></td></tr><tr><td width="60" height="40" align="right">密&nbsp;&nbsp;码&nbsp;</td><td><input type="password" value="" class="text2" name = "userpass" id = "userpassid"/></td></tr><tr><td width="60" height="40" align="right">&nbsp;</td><td><div class="c4"><input type="submit" value="" class="btn2" />⽅法⼆:function checkUser(){var result = document.getElementById("userid").value;var password = document.getElementById("passid").value;if(result == "" ){alert("⽤户名不能为空");return false;}if(password == "" ){alert("密码不能为空");return false;}document.getElementById("formid").submit();}form表格的写法,需要写id<form id="formid" method = 'post' action = 'user_login_submit.action' >button按钮的写法如下:<input type="button" value="" class="btn2" onclick = "checkUser();" />。

jQueryajaxForm()的应用

jQueryajaxForm()的应用

jQueryajaxForm()的应⽤jQuery Form插件是⼀个优秀的Ajax表单插件,可以⾮常容易地、⽆侵⼊地升级HTML表单以⽀持Ajax。

提供了很多有⽤的⽅法可以让你轻松的处理表单⾥的数据和表单的提交过程。

本⽂就是介绍了ajaxForm()的应⽤.⼀、ajaxForm() 介绍ajaxForm预处理将要使⽤ AJAX ⽅式提交的表单,将所有需要⽤到的事件监听器添加到其中。

它不是提交这个表单。

在页⾯的ready函数⾥使⽤ajaxForm来给你页⾯上的表单做这些AJAX提交的准备⼯作。

ajaxForm 需要零个或⼀个参数。

这唯⼀的⼀个参数可以是⼀个回调函数或者是⼀个可选参数对象。

是否可以连环调⽤: 是。

⼆、引⼊依赖的js<script src="jquery-1.3.1.js" type="text/javascript"></script><script src="jquery.form.js" type="text/javascript"></script>三、编写页⾯<form id="myForm" action="demo.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" style="display:none;"></div></form>四、调⽤ajaxForm() ⽅法<script type="text/javascript">$(document).ready(function() {$('#myForm').ajaxForm(function() {$('#output1').html("提交成功!欢迎下次再来!").show();});});</script>五、详细代码如下:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>jQuery Form插件例⼦-ajaxForm()</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(function() {$('#output1').html("提交成功!欢迎下次再来!").show();});});</script></head><body><h3> Demo 1 : form插件的使⽤--ajaxForm(). </h3><form id="myForm" action="demo.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" style="display:none;"></div></form></body></html>六、编写接收表单的测试代码。

jquery实现ajax提交form表单的方法总结(转)

jquery实现ajax提交form表单的方法总结(转)

jquery实现ajax提交form表单的⽅法总结(转)⽅法⼀:代码如下:function AddHandlingFeeToRefund(){var AjaxURL= "../OrderManagement/AjaxModifyOrderService.aspx";alert($('#formAddHandlingFee').serialize());$.ajax({type: "POST",dataType: "html",url: AjaxURL + '?Action=' + 'SubmitHandlingFee' + '&OrderNumber=' + $.trim($("#<%=this.txtOrderNumber.ClientID %>").val()), data: $('#formAddHandlingFee').serialize(),success: function (result) {var strresult=result;alert(strresult);//加载最⼤可退⾦额$("#spanMaxAmount").html(strresult);},error: function(data) {alert("error:"+data.responseText);}});}⽅法⼆:代码如下://ajax提交form表单的⽅式$('#formAddHandlingFee').submit(function() {var AjaxURL= "../OrderManagement/AjaxModifyOrderService.aspx";alert($('#formAddHandlingFee').serialize());$.ajax({type: "POST",dataType: "html",url: AjaxURL + '?Action=' + 'SubmitHandlingFee' + '&OrderNumber=' + $.trim($("#<%=this.txtOrderNumber.ClientID %>").val()), data: $('#formAddHandlingFee').serialize(),success: function (data) {var strresult=data;alert(strresult);//加载最⼤可退⾦额$("#spanMaxAmount").html(strresult);},error: function(data) {alert("error:"+data.responseText);}});});页⾯html代码:代码如下:<form id="formAddHandlingFee" name="formAddHandlingFee" enctype="multipart/form-data"onsubmit="AddHandlingFeeToRefund()"><table id="AddHandlingFee" class="Wfill"><tr><td><asp:Literal ID="UI_Amount" runat="server" Text="处理费⽤" meta:resourcekey="HandlingFeeAmount" /></td><td><input type="text" id="txtHandlingFeeAmount" name="txtHandlingFeeAmount" class="{required:true,number:true}" maxlength="12" /></td></tr><tr><td><asp:Literal ID="UI_HandlingFeeType" runat="server" Text="费⽤类型"meta:resourcekey="HandlingFeeHandlingFeeType" /></td><td><crmweb:HtmlSelectControl ID="HandlingFeeType"EnumTypeName="mon.HandlingFeeType,mon" EmptyValue="" EmptyText="Select"runat="server" class="text {required:true}"/></td></tr><tr><td><asp:Literal ID="UI_Notes" runat="server" Text="备注" meta:resourcekey="HandlingFeeNotes" /></td><td><textarea id="txtNotes" name="txtNotes" class="text {required:true}" cols="22" rows="2" maxlength="100"></textarea> </td></tr><tr><td></td><td><input id="Submit1" type="submit" value="添加处理费" /><asp:Button ID="Button1" runat="server" Text="添加处理费" OnClientClick="javascript:AddHandlingFeeToRefund()" /> </td></tr></table></form></div>。

JS组件系列——Form表单验证神器:BootstrapValidator

JS组件系列——Form表单验证神器:BootstrapValidator

JS组件系列——Form表单验证神器:BootstrapValidator前⾔:做Web开发的我们,表单验证是再常见不过的需求了。

友好的错误提⽰能增加⽤户体验。

博主搜索bootstrap表单验证,搜到的结果⼤部分都是⽂中的主题:bootstrapvalidator。

今天就来看看它如何使⽤吧。

⼀、源码及API地址介绍它之前,还是给出它的源码以及API的地址吧。

bootstrapvalidator源码:boostrapvalidator api:⼆、代码以及效果展⽰1、初级⽤法来看bootstrapvalidator的描述:A jQuery form validator for Bootstrap 3。

从描述中我们就可以知道它⾄少需要jQuery、bootstrap的⽀持。

我们⾸先引⼊需要的js组件 <script src="~/Scripts/jquery-1.10.2.js"></script><script src="~/Content/bootstrap/js/bootstrap.min.js"></script><link href="~/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet"/><script src="~/Content/bootstrapValidator/js/bootstrapValidator.min.js"></script><link href="~/Content/bootstrapValidator/css/bootstrapValidator.min.css" rel="stylesheet"/>我们知道,既然是表单验证,那么我们在cshtml页⾯就必须要有⼀个Form,并且我们知道Form⾥⾯取元素都是通过name属性去取值的,所以,表单⾥⾯的元素都要有⼀个name的属性值。

jquery的ajax提交form表单的两种方法小结(推荐)

jquery的ajax提交form表单的两种方法小结(推荐)

jquery的ajax提交form表单的两种⽅法⼩结(推荐)jquery的ajax提交form表单的两种⽅法⼩结(推荐)⽅法⼀:function AddHandlingFeeToRefund(){var AjaxURL= "../OrderManagement/AjaxModifyOrderService.aspx";alert($('#formAddHandlingFee').serialize());$.ajax({type: "POST",dataType: "html",url: AjaxURL + '?Action=' + 'SubmitHandlingFee' + '&OrderNumber=' + $.trim($("#<%=this.txtOrderNumber.ClientID %>").val()),data: $('#formAddHandlingFee').serialize(),success: function (result) {var strresult=result;alert(strresult);//加载最⼤可退⾦额$("#spanMaxAmount").html(strresult);},error: function(data) {alert("error:"+data.responseText);}});}⽅法⼆://ajax提交form表单的⽅式$('#formAddHandlingFee').submit(function() {var AjaxURL= "../OrderManagement/AjaxModifyOrderService.aspx";alert($('#formAddHandlingFee').serialize());$.ajax({type: "POST",dataType: "html",url: AjaxURL + '?Action=' + 'SubmitHandlingFee' + '&OrderNumber=' + $.trim($("#<%=this.txtOrderNumber.ClientID %>").val()),data: $('#formAddHandlingFee').serialize(),success: function (data) {var strresult=data;alert(strresult);//加载最⼤可退⾦额$("#spanMaxAmount").html(strresult);},error: function(data) {alert("error:"+data.responseText);}});});页⾯html代码:<form id="formAddHandlingFee" name="formAddHandlingFee" enctype="multipart/form-data" onsubmit="AddHandlingFeeToRefund()"><table id="AddHandlingFee" class="Wfill"><tr><td><asp:Literal ID="UI_Amount" runat="server" Text="处理费⽤" meta:resourcekey="HandlingFeeAmount" /></td><td><input type="text" id="txtHandlingFeeAmount" name="txtHandlingFeeAmount" class="{required:true,number:true}" maxlength="12" /></td></tr><tr><td><asp:Literal ID="UI_HandlingFeeType" runat="server" Text="费⽤类型" meta:resourcekey="HandlingFeeHandlingFeeType" /></td><td><crmweb:HtmlSelectControl ID="HandlingFeeType" EnumTypeName="mon.HandlingFeeType,mon" EmptyValue="" EmptyText="Select" runat="server" class="text {required:true}"/> </td></tr><tr><td><asp:Literal ID="UI_Notes" runat="server" Text="备注" meta:resourcekey="HandlingFeeNotes" /></td><td><textarea id="txtNotes" name="txtNotes" class="text {required:true}" cols="22" rows="2" maxlength="100"></textarea></td></tr><tr><td></td><td><input id="Submit1" type="submit" value="添加处理费" /><asp:Button ID="Button1" runat="server" Text="添加处理费" OnClientClick="javascript:AddHandlingFeeToRefund()" /></td></tr></table></form>以上这篇jquery的ajax提交form表单的两种⽅法⼩结(推荐)就是⼩编分享给⼤家的全部内容了,希望能给⼤家⼀个参考,也希望⼤家多多⽀持。

form表单提交的几种方法

form表单提交的几种方法

form 表单提交的⼏种⽅法form表单提交的⼏种⽅法在form标签中添加Action(提交的地址)和method(post),且有⼀个submit按钮(<input type='submit'>)就可以进⾏数据的提交,每⼀个input标签都需要有⼀个name属性,才能进⾏提交当点击登陆时,向发⽣的数据是:username=username&password=password.这种默认的提交⽅式,⼀般会进⾏页⾯的跳转(不成功时跳转到当前页⾯)。

⽽有时候我们是对弹出框进⾏数据提交的,希望提交成功则关闭弹出框并刷选⽗页⾯,失败则提⽰失败原因,且弹出框不关闭。

此时可以采⽤Ajax进⾏数据提交.具体参考第四种⽅案⽆刷新页⾯提交表单表单可实现⽆刷新页⾯提交,⽆需页⾯跳转,如下,通过⼀个隐藏的iframe实现,form表单的target设置为iframe的name名称,form提交⽬标位当前页⾯iframe则不会刷新页⾯1 2 3 4<form action="/url.do"method="post"target="targetIfr"><input type="text"name="name"/></form><iframe name="targetIfr" style="display:none"></iframe>通过type=submit提交⼀般表单提交通过type=submit实现,input type=”submit”,显⽰为button按钮,通过点击这个按钮提交表单数据跳转到/url.do1 2 3 4<form action="/url.do"method="post"><input type="text"name="name"/><input type="submit"value="提交"></form>js提交form表单js事件触发表单提交,通过button、链接等触发事件,js调⽤submit()⽅法提交表单数据,jquery通过submit()⽅法1 2 3 4 5 6 7 8 9 10<form id="form"action="/url.do"method="post"><input type="text"name="name"/></form><script>document.getElementById("form").submit();jquery: $("#form").submit();</script>ajax异步提交表单数据采⽤ajax异步⽅式,通过js获取form中所有input、select等的值,将这些值组成Json格式,通过异步的⽅式与服务器端进⾏交互,⼀般将表单数据传送给服务器端,服务器端处理数据并返回结果信息等12 3 4 5 6 7 8 9 10 11<form id="form"method="post"><input type="text"name="name"id="name"/> </form>var params = {"name", $("#name").val()}$.ajax({type: "POST",url: "/url.do",data: params,dataType : "json",success: function(respMsg){}});1112 });此时可以在callback函数中对请求结果进⾏判断,然后执⾏不同的动作(页⾯跳转或刷选数据、提醒错误都可以)页⾯⽆跳转如果通过form表单提交请求服务端去下载⽂件,这时当前页⾯不会发⽣跳转,服务端返回void,通过response 去写⽂件数据,页⾯会显⽰下载⽂件。

jQuery formValidator表单验证插件

jQuery formValidator表单验证插件

jQuery formValidator表单验证插件是什么? jQuery formValidator表单验证插件,它是基于jQuery类库,实现了js脚本于页面html代码的分离。你可以划分多个校验组,每个组的校验都是互不影响。对一个表单对象,你只需要写一行代码就可以轻松实现无数种(理论上)脚本控制。目前支持5种大的校验方式,分别是:inputValidator(针对input、textarea、select控件的字符长度、值范围、选择个数的控制)、compareValidator(提供2个对象的比较,目前可以比较字符串和数值型)、ajaxValidator(通过ajax到服务器上做数据校验)、regexValidator(提供可扩展的正则表达式库) 、functionValidator (可使用外部函数来做校验)

本插件于其他校验控件最大的区别有3点: 1、校验功能可以扩展。 对中文、英文、数字、整数、实数、Email地址格式、基于HTTP协议的网址格式、电话号码格式、手机号码格式、货币格式、邮政编码、身份证号码、QQ号码、日期等等这些控制,别的表单校验控件是代码里写死的,而formValidator是通过外部js文件来扩展的,你可以通过写正则表达式和函数来无限的扩展这些功能。

2、实现了校验代码于html代码的完全分离。 你的所有信息都无需配置在校验表单元素上,你只要在js上配置你的信息。使美工(界面)和javascript工程师的工作不交织在一起

3、你只需写一行代码就能完成一个表单元素的所有校验。你只需要写一行代码就能完成一下所有的控制

 支持所有类型客户端控件的校验  支持jQuery所有的选择器语法,只要控件有唯一ID和type属性  支持函数和正则表达式的扩展。提供扩展库formValidatorReg.js,你可以自由的添加、修改里面的内容。  支持2种校验模式。第一种:文字提示(showword模式);第二种:弹出窗口提示(showalert模式)  支持多个校验组。如果一个页面有多个提交按钮,分别做不同得提交,提交前要做不同的校验,所以你得用到校验组的功能。  支持4种状态的信息提示功能,可以灵活的控制4种状态是否显示。第一种:刚打开网页的时候进行提示;第二种:获得焦点的时候进行提示;第三种:失去焦点时,校验成功时候的提示;第四种:失去焦点时,校验失败的错误提示。  支持自动构建提示层。可以进行精确的定位。  支持自定义错误提示信息。  支持控件的字符长度、值范围、选择个数的控制。值范围支持数值型和字符型;选择的个数支持radio/checkbox/select三种控件  支持2个控件值的比较。目前可以比较字符串和数值型。  支持服务器端校验。  支持输入格式的校验。

  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。

JQuery提交表单Form.js官方插件介绍Form插件,支持Ajax,支持Ajax文件上传,功能强大,基本满足日常应用。

1、JQuery框架下载/2、Form插件下载/jquery/form/#download3、Form插件的简单入门第二步:jquery.js和form.js文件的包含表单插件API提供了几个方法,让你轻松管理表单数据和进行表单提交。

ajaxForm增加所有需要的事件监听器,为AJAX提交表单做好准备。

ajaxForm不能提交表单。

在document的ready函数中,使用ajaxForm来为AJAX提交表单进行准备。

ajaxForm接受0个或1个参数。

这个单个的参数既可以是一个回调函数,也可以是一个Options对象。

可链接(Chainable):可以。

实例:$('#myFormId').ajaxForm();ajaxSubmit马上由AJAX来提交表单。

大多数情况下,都是调用ajaxSubmit来对用户提交表单进行响应。

ajaxSubmit接受0个或1个参数。

这个单个的参数既可以是一个回调函数,也可以是一个Options对象。

可链接(Chainable):可以。

实例:// 绑定表单提交事件处理器$('#myFormId').submit(function() {// 提交表单$(this).ajaxSubmit();// 为了防止普通浏览器进行表单提交和产生页面导航(防止页面刷新?)返回falsereturn false;});formSerialize将表单串行化(或序列化)成一个查询字符串。

这个方法将返回以下格式的字符串:name1=value1&name2=value2。

可链接(Chainable):不能,这个方法返回一个字符串。

实例:var queryString = $('#myFormId').formSerialize();// 现在可以使用$.get、$.post、$.ajax等来提交数据$.post('myscript.php', queryString);fieldSerialize将表单的字段元素串行化(或序列化)成一个查询字符串。

当只有部分表单字段需要进行串行化(或序列化)时,这个就方便了。

这个方法将返回以下格式的字符串:name1=value1&name2=value2。

可链接(Chainable):不能,这个方法返回一个字符串。

实例:var queryString = $('#myFormId .specialFields').fieldSerialize();fieldValue返回匹配插入数组中的表单元素值。

从0.91版起,该方法将总是以数组的形式返回数据。

如果元素值被判定可能无效,则数组为空,否则它将包含一个或多于一个的元素值。

可链接(Chainable):不能,该方法返回数组。

实例:// 取得密码输入值var value = $('#myFormId :password').fieldValue();alert('The password is: ' + value[0]);resetForm通过调用表单元素原有的DOM方法,将表单恢复到初始状态。

可链接(Chainable):可以。

实例:$('#myFormId').resetForm();clearForm清除表单元素。

该方法将所有的文本(text)输入字段、密码(password)输入字段和文本区域(textarea)字段置空,清除任何select元素中的选定,以及将所有的单选(radio)按钮和多选(checkbox)按钮重置为非选定状态。

可链接(Chainable):可以。

$('#myFormId').clearForm();clearFields清除字段元素。

只有部分表单元素需要清除时才方便使用。

可链接(Chainable):可以。

$('#myFormId .specialFields').clearFields();Options对象ajaxForm和ajaxSubmit都支持众多的选项参数,这些选项参数可以使用一个Options对象来提供。

Options只是一个JavaScript对象,它包含了如下一些属性与值的集合:target指明页面中由服务器响应进行更新的元素。

元素的值可能被指定为一个jQuery选择器字符串,一个jQuery对象,或者一个DOM元素。

默认值:null。

url指定提交表单数据的URL。

默认值:表单的action属性值type指定提交表单数据的方法(method):“GET”或“POST”。

默认值:表单的method属性值(如果没有找到默认为“GET”)。

beforeSubmit表单提交前被调用的回调函数。

“beforeSubmit”回调函数作为一个钩子(hook),被提供来运行预提交逻辑或者校验表单数据。

如果“beforeSubmit”回调函数返回false,那么表单将不被提交。

“beforeSubmit”回调函数带三个调用参数:数组形式的表单数据,jQuery表单对象,以及传入ajaxForm/ajaxSubmit中的Options对象。

表单数组接受以下方式的数据:[ { name: 'username', value: 'jresig' }, { name: 'password', value: 'secret' } ]默认值:nullsuccess表单成功提交后调用的回调函数。

如果提供“success”回调函数,当从服务器返回响应后它被调用。

然后由dataType选项值决定传回responseText还是responseXML的值。

默认值:nulldataType期望返回的数据类型。

null、“xml”、“script”或者“json”其中之一。

dataType提供一种方法,它规定了怎样处理服务器的响应。

这个被直接地反映到jQuery.httpData方法中去。

下面的值被支持:'xml':如果dataType == 'xml',将把服务器响应作为XML来对待。

同时,如果“success”回调方法被指定,将传回responseXML值。

'json':如果dataType == 'json',服务器响应将被求值,并传递到“success”回调方法,如果它被指定的话。

'script':如果dataType == 'script',服务器响应将求值成纯文本。

默认值:null(服务器返回responseText值)semanticBoolean flag indicating whether data must be submitted in strictsemantic order (slower). Note that the normal form serialization isdone in semantic order with the exception of input elements oftype="image". You should only set the semantic option to true if yourserver has strict semantic requirements and your form contains an inputelement of type="image".布尔标志,表示数据是否必须严格按照语义顺序(slower?)来进行提交。

注意:一般来说,表单已经按照语义顺序来进行了串行化(或序列化),除了type="image"的input元素。

如果你的服务器有严格的语义要求,以及表单中包含有一个type="image"的input元素,就应该将semantic设置为true。

(译注:这一段由于无法理解,翻译出来可能语不达意,但请达人指正。

)默认值:falseresetForm布尔标志,表示如果表单提交成功是否进行重置。

Default value: nullclearForm布尔标志,表示如果表单提交成功是否清除表单数据。

默认值:null实例:// 准备好Options对象var options = {target: '#divToUpdate',url: 'comment.php',success: function() {alert('Thanks for your comment!');} };// 将options传给ajaxForm$('#myForm').ajaxForm(options);注意:Options对象还可以用来将值传递给jQuery的$.ajax方法。

如果你熟悉$.ajax所支持的options,你可以利用它们来将Options对象传递给ajaxForm和ajaxSubmit。

相关文档
最新文档