下载文档原格式
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">⽤户名 </td><td><input type="text" value="" class="text2" name = "username" id = "userid"/></td></tr><tr><td width="60" height="40" align="right">密 码 </td><td><input type="password" value="" class="text2" name = "userpass" id = "userpassid"/></td></tr><tr><td width="60" height="40" align="right"> </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（）的应⽤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表单的⽅法总结（转）⽅法⼀：代码如下: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前⾔：做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表单的两种⽅法⼩结(推荐)⽅法⼀：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标签中添加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类库，实现了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个控件值的比较。目前可以比较字符串和数值型。 支持服务器端校验。 支持输入格式的校验。
第三方手册——jQuery formValidator手册PHPCMS V9中使用的表单验证框架为jQuery formValidator什么是jQuery formValidator？jQuery formValidator表单验证插件是客户端表单验证插件。
在做B/S开发的时候，我们经常涉及到很多表单验证，例如新用户注册，填写个人资料，录入一些常规数据等等。
在这之前，页面开发者（JavaScript开发者）需要编写大量的JavaScript来进行表单元素的校验，而这些校验在平时开发中不停的重复书写。
常见的校验如不能为空，必须满足长度要求，必须为数字，必须为Email等等。
一般要判断的表单元素比较多，开发过程就显得枯燥无味——重复的代码不断重复，而且可能还要兼容多种浏览器，更多的考虑因素使人头疼不已。
由于每个要校验的页面虽然逻辑基本相同，但是在大多数情况下，出于种种原因，开发者宁愿再编写一套JS文件，为了便于管理。
jQuery formValidator表单插件致力于改善这一过程。
你只关心业务逻辑，而无需关系实现过程,只需简单的配置，无需写代码就能实现表单的检验。
它包括常规检验功能和可扩展校验功能。
针对每个表单元素你只需要写一行配置信息就能完成校验。
而这些配置信息无需写入表单元素，实现了js代码和html代码的分离。
这样做的好处，使B/S开发过程中，分工更加明确，页面设计着只需关心他的页面（设计的时候不必担心把脚本弄坏了），javascript开发者只需关心脚本的开发。
而插件本身包含的校验方式可以有无数种，只要你扩展正则表达式和函数。
本插件于同类校验插件最大的区别：校验功能可以扩展；实现了校验代码于html代码的完全分离；你只需写一行配置信息就能完成一个表单元素的所有校验。
插件本身提供了很多回调函数，使调用者能最大限度的发挥自己的想象能力来完成自己的业务需求。
在同一个页面你可以拥有很多个校验组，你只需在提交的按钮那里调用 return jQuery.formValidator.pageIsValid('校验组号') 来完成多个组的校验，互不干扰。
jQueryformValidator3.3表单验证文档说明jQuery formValidator3.3表单验证文档说明一、前言jQuery formValidator表单验证插件，它是基于jQuery类库，实现了js脚本于页面html代码的分离。
你可以划分多个校验组，每个组的校验都是互不影响。
对一个表单对象，你只需要写一行代码就可以轻松实现无数种（理论上）脚本控制。
二、验证方式1、inputValidator（针对input、textarea、select控件的字符长度、值范围、选择个数的控制）；2、compareValidator（提供2个对象的比较，目前可以比较字符串和数值型;3、ajaxValidator（通过ajax到服务器上做数据校验）；4、regexValidator（提供可扩展的正则表达式库）;5、functionValidator（可使用外部函数来做校验）；三、如何引用到页面1、加载jQuery类库；2、加载插件的样式库//前面两步不分先后，如果你是自动构建提示层，请加载validatorAuto.css；3、加载验证插件//这步引用必须在jQuery-1.4.2.js之后；4、加载扩展库//建议将所有有关正则验证方面的格式，其它扩展的验证函数统一写到该文件中；四、具体实战界面效果：五、属性参照initConfig:参数详解主要是设置全局参数和判断是否通过校验函数名函数说明$.formValid ator.initCon fig 参数：配置类型属性默认值说明validatorgroup"1" 你要针对哪个组进行配置formid "" 要自动注册pageIsValid函数的表单ID号alertmessagefalse 是否弹出窗口autotip false 是否自动构建提示层errorfocustrue发生错误的时候，第一个出错控件是否获得焦点forcevalid true 是否一直输入正确为止才允许离开焦点wideword true 是否把一个全角字符当做2个长度onsuccess null 该组校验通过后的回调函数,返回false，阻止表单的提交submitoncefalse 校验通过后，是否灰掉所有的提交按钮onerror null该组校验失败后的回调函数，有两个参数参数1一个校验没有通过的错误信息参数2 一个校验没有通过的元素对象debug false 是否处于调试模式。
易操作的jQuery表单提⽰插件本⽂实例讲述了⼀款轻量级的表单提⽰插件---jQuery Form Toolltip。
分享给⼤家供⼤家参考。
具体如下：jQuery Form Toolltip 特点：你可以单独⾃定义提⽰信息的CSS样式。
你可以指定淡⼊淡出的⽅向，当前⽀持Top, Bottom, Right 和 Left运⾏效果截图如下：具体代码如下：jquery实例：jQuery Form Toolltip使⽤⽅法引⼊核⼼⽂件<script src="js/jquery/2.1.1/jquery.min.js"></script><script src="src/jquery.formtooltip.js"></script>构建html<form id="formname"><table><tr><td> Title </td><td><input type="text" value="blank" name="title"/></td></tr><tr><td> Name </td><td><input type="name" value="Blank Name" name="name"/></td></tr><tr><td> Color </td><td><input type="color" value="#000FFF" name="color"/></td></tr><tr><td> TextArea </td><td><textarea type="month" value="" name="text"></textarea></td></tr></table></form>写⼊JS初始化$(document).ready(function(){var fields = {title: {tooltip : "This field is actually for bla bla bla...</br>and bla bla bla",position: 'bottom'},name : {tooltip: "This is for fun", //提⽰的信息position: 'right', //动画的⽅向backgroundColor: "#FF0000", //背景颜⾊color: '#FFFF00' //字体颜⾊},color : {tooltip: "This is for your cover color~~~<a href='#'>here</a>"},text : {tooltip: "Please provide your comment here."}};//Include Global Color$("#formname").formtoolip(fields, { backgroundColor: "#000000" , color : "#FFFFFF", fontSize : 15, padding : 10, borderRadius : 5}); });定义fields数组，把需要提⽰的表单字段依次写⼊，然后调⽤formatoolip函数初始化。
jquery表单验证插件（jquery.validate.js）的3种使⽤⽅式jquery 验证⾮常简单，下⾯总结常⽤的三种⽅式：第⼀种⽅式：也是⽐较标准的⽅式：⾸先引⼊jquery 插件和 jquery 验证插件：第⼀步：引⼊插件复制代码代码如下:<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script><script type="text/javascript" src="js/jquery.validate.js"></script><script type="text/javascript" src="js/jquery.metadata.js"></script><script type="text/javascript" src="js/messages_zh.js"></script>第⼆步：定义表单的错误输出：复制代码代码如下:<style type="text/css">#frm label.error {color: Red;}</style>第三步：添加错误处理⽅法；jquery验证，需要有：1：定义验证⽅法2：添加验证规则下⾯贴出常⽤的验证⼩例⼦，⼀看就明⽩了。
先看效果图：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><script type="text/javascript" src="js/jquery-1.6.1.min.js"></script><script type="text/javascript" src="js/jquery.validate.js"></script><script type="text/javascript" src="js/jquery.metadata.js"></script><script type="text/javascript" src="js/messages_zh.js"></script><style type="text/css">#frm label.error {color: Red;}</style></head><script type="text/javascript">$(document).ready(function(){$("#clickme").click(function(){alert("Hello World");});$( "#frm" ).validate({rules: {username: {required: true,minlength: 4,maxlength: 20,byteMaxLength:20,valiEnglish:true},postcode: {postcodeVal:true},number: {byteMaxLength:5,numFormat:5},identifier: {sfzhValidate:true}},messages: {username: {required: "请输⼊⽤户名4--20个英⽂字符",minlength: $.format("Keep typing, at least {0} characters required!"), maxlength: $.format("Whoa! Maximum {0} characters allowed!")},number: {numFormat: $.format("请输⼊{0}数字")}}});jQuery.validator.addMethod("byteMaxLength", function(value,element, param) {var length = value.length;for ( var i = 0; i < value.length; i++) {if (value.charCodeAt(i) > 127) {length++;}}return this.optional(element) || (length <= param);}, $.validator.format("不能超过{0}个字节(⼀个中⽂字算2个字节)"));jQuery.validator.addMethod("numFormat",function(value,element,param){return this.optional(element) || /^\d*$/.test(value);}//,$.validator.format("请输⼊数字{0}位以内"));//number(9,3)jQuery.validator.addMethod("numFormat63",function(value,element){return this.optional(element) || /^[0-9]{1,6}(\.\d{1,3})$/.test(value);},$.validator.format("请输⼊合法数字,精度格式123456.0"));jQuery.validator.addMethod("postcodeVal",function(value,element){return this.optional(element) || /^[0-9]\d{5}(?!\d)$/.test(value);},$.validator.format("请输⼊合法的邮编"));jQuery.validator.addMethod("numberAndLettersVal",function(value,element){ return this.optional(element) || /^[a-zA-Z0-9]+$/.test(value);},$.validator.format("请输⼊字母或数字"));jQuery.validator.addMethod("sfzhValidate",function(value,element){return this.optional(element) || /^(\d{14}|\d{17})(\d|[xX])$/.test(value);},$.validator.format("请输⼊合法⾝份证号"));jQuery.validator.addMethod("valiEnglish",function(value,element){return this.optional(element) || /^[a-zA-Z ]*$/.test(value);},$.validator.format("请输⼊字母或者空格"));});</script><body><form id="frm" name="frm" method="post" action=""><label>⽤户名:<input type="text" name="username" id="username" /></label><p><label>邮编 :<label></label></label><label><input type="text" name="postcode" id="postcode" /><br /></label></p><p><label>数字 :<input type="text" name="number" id="number" /></label><br /><label>⾝份证号：<input type="text" name="identifier" id="identifier" /></label> <label><input type="button" name="clickme" id="clickme" value="click me" /></label></p></form></body></html>这是⼀个完整的验证⽰例，关于引⼊的代码已经上传，可以下⾯讲解其中的重点⽅法：jQuery.validator.addMethod("byteMaxLength", function(value,element, param) {var length = value.length;for ( var i = 0; i < value.length; i++) {if (value.charCodeAt(i) > 127) {length++;}}return this.optional(element) || (length <= param);}, $.validator.format("不能超过{0}个字节(⼀个中⽂字算2个字节)"));jQuery.validator.addMethod() ⽅法，有三个参数,第⼀个参数： “byteMaxLength” 是定义⽅法名，必须保证⽅法名唯⼀，是⼀个identifier标志。
Jquery.form插件实现跨域异步上传功能Jquery.form插件实现跨域异步上传功能导语：下面我们借助了Jquery.form插件实现跨域异步上传功能，但是对于IE10以下的浏览器来说，我们就不能用这种方式了，如果我们换个思路让服务端去重写向我们的客户端，由客户端（与文件上传页面在同域下）来返回相关数据即可，下面是店铺给大家提供的Jquery.form插件实现跨域异步上传功能代码实现，大家可以参考阅读，更多详情请关注店铺。
1、Jquery.form的使用<form method="post" action="http://127.0.0.1:801/Home/UploadResult"enctype="multipart/form-data" id="form1"><input name="qdctvfile" id="qdctvfile11" type="file" onchange="eventStart()"></form><script type="text/javascript">$("#form1").ajaxForm({beforeSerialize: function () {var filepath = $("#qdctvfile11").val()var extStart = stIndexOf(".");var ext = filepath.substring(extStart, filepath.length).toUpperCase();if (ext != ".PNG" && ext != ".JPG") {alert("图片仅支持png,jpg格式");$("#qdctvfile11").val("");return false;}},success: function (data) {alert(data);}});function eventStart(obj) {$("#form1").submit();}注意，代码中的eventStart方法是指在选择文件后，自动提交表单，而ajaxForm表示提交表单为异常方式，success回调方法是指异步返回表单地址的返回值。
jquery实现动态创建form并提交的⽅法⽰例本⽂实例讲述了jquery实现动态创建form并提交的⽅法。
分享给⼤家供⼤家参考，具体如下：有时候在写web 应⽤的时候，需要临时动态构造⼀个form 并提交，form ⾥⾯的参数以及action,以及是post请求还是get请求，甚⾄form 的样式都是可以指定的，⽤原⽣的javascript 肯定可以做到，我⽤jquery做了⼀个测试。
我⾃⼰测试的是构造⼀个分页的post请求, 为了防⽌csrf 攻击，加⼊了csrf 验证，不需要的可以去掉.function genSearchObj(url,page,pageSize,keyword){var params = {};params.url = url;params.page = page;params.pageSize = pageSize;params.cond = keyword;return params;}function mockFormSubmit(params){var form = $('<form />', {action : params.url, method:"post", style:"display:none;"}).appendTo('body');$.each(params, function(k, v) {if ( k != "url" ){form.append('<input type="hidden" name="' + k +'" value="' + v +'" />');}});form.append('<input type="hidden" name="csrfToken" value="' + $("#csrf_token").val() + '" />' );form.submit();}这样就动态构造了⼀个form ,并提交。
PHP jQuery Ajax Form 表单提交实例解析，包括创建一个表单 html 页面、添加 JQuery 代码、 jquery ajax 表单提交、 jquery ajax 表单验证、 反馈信息给用户， php ajax 表单验证，php ajax 提交表单，php ajax form 验证，php ajax 提交 form 。
本实例用到 JQuery 类库本身的函数和功能， 所有表单信息利用 PHPMailer 类库邮 件的形式发送。
1、创建一个表单 html 页面 表单部分 html 代码以下为引用内容： <div id="contact_form"> <form name="contact" method="post" action=""> <fieldset> <label for="name" id="name_label">姓名</label> <input type="text" name="name" id="name" size="30" value="" class="text-input" /> <label class="error" for="name" id="name_error">此项必填</label> <label for="email" id="email_label">您的 Email</label> <input type="text" name="email" id="email" size="30" value="" class="text-input" /> <label class="error" for="email" id="email_error">此项必填</label> <label for="phone" id="phone_label">您的联系电话</label> <input type="text" name="phone" id="phone" size="30" value="" class="text-input" /> <label class="error" for="phone" id="phone_error">此项必填</label> <br /> <input type="submit" name="submit" class="button" id="submit_btn" value=" 我要发送" /> </fieldset> </form> </div>这里用一个 id 为 contact_form 来包含整个包含信息；这是有意义的，稍后在 JavaScript 与用户交互信息的时候会用到，这里 form 标签的属性里面既包含了 method 和 action ；这个意义其实不大，因为 Javascript 直接操作 DOM ，所以没有 这两个属性也是可以的；务必要给用户输入的 input 标签加独立的 id ，这和第二点原理 类似。
使⽤form表单提交请求如何获取后台返回的数据？问题描述⼀般的form表单提交是单向的：只能给服务器发送数据，但是⽆法获取服务器返回的数据，也就是⽆法读取HTTP应答包。
想要真正的半双⼯通讯⼀般需要使⽤Ajax, 但是Ajax对⽂件传输也很⿇烦。
解决⽅法⽅法⼀：jQuery封装了⼀个form表单提交有回调功能的⽅法导⼊jqueryjquery-form.js如下: ⼀个上传⽂件的form<form id="form1" action="/shop/updateUserinfo" enctype="multipart/form-data" method="post"><table><tr><td>请选择头像:</td><td><input type="file" name="image"/></td></tr><tr><td><input type="submit" name="submit" value="提交"/></td><td><input type="reset" name="reset" value="重置"/></td></tr></table></form>js实现// $(function ())是⽂档document加载完⾃动调⽤的函数$(function () {/*获取form元素，调⽤其ajaxForm(...)⽅法内部的function(data)的data就是后台返回的数据*/$("#form1").ajaxForm(function (data) {console.log(data);console.log("str:" + JSON.stringify(data));});});请求的url在form的action中定义，获取到的后台数据是JSON格式$(function ())不套在外⾯，⾥⾯的这个请求函数没法⾃启动后台代码⽆差异⽅法⼆：使⽤ajax来发送请求提交表单前端页⾯：<form id="userInfo" ><div class="weui-cell"><div class="weui-cell__hd"><label class="weui-label">姓名</label></div><div class="weui-cell__bd"><input class="weui-input" id="username" name="username" type="text" pattern="[0-9]*" placeholder="请输⼊姓名"></div></div><div class="weui-cell "><div class="weui-cell__hd"><label class="weui-label">年龄</label></div><div class="weui-cell__bd"><input class="weui-input" id="age" name="age" type="number" placeholder="请输⼊年龄"></div></div><div class="weui-cell "><div class="weui-cell__hd"><label class="weui-label">地址</label></div><div class="weui-cell__bd"><input class="weui-input" id="address" name="address" type="text" placeholder="请输⼊地址"></div></div><div class="weui-btn-area"><a class="weui-btn weui-btn_primary" href="javascript:" id="saveUserInfo">确定</a></div></form>ajax请求发送数据$("#saveUserInfo").click(function() {var formObject = {};var formArray =$("#userInfo").serializeArray();$.each(formArray,function(i,item){formObject[] = item.value;});$.ajax({url:"user/addUser",type:"post",contentType: "application/json; charset=utf-8",data: JSON.stringify(formObject),dataType: "json",success:function(data){alert(data.msg);},error:function(e){alert("错误！！");}});});注意如果仅仅粗糙的使⽤ajax的话，那就是 $("#submit").ajax(…), 很显然⾥⾯的发给后台的数据data很难传输⽂件。
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。
