标签：form

今天在RPC里面，阿刁提出个问题，FORM表单中，submit提交的时候，有时候有值，有时候无值 ，想问清楚是什么原因

状态描述：

1、FORM表单中，submit的name是Submit。即 <input type="submit" name="Submit" value="提交表单" />

2、当点击submit按钮时，FORM被提交，提交后获取的数组中有Submit下标的值

3、回到FORM表单，直接敲回车提交，这时候发现获取的数组中没有Submit下标。

纠结的是：为什么会有两种情况的不同

查找原因，最后基本确认，这是由于form在不同情况下，可以直接使用回车进行提交表单而导致的问题。这里有几篇参考文章：不同浏览器对回车提交表单的处理办法和表单提交按钮input和button的取舍。那么，为什么敲回车和点击submit不一样呢？怎么样才能让他们一样？

尝试将focus移到submit按钮上。敲回车提交。这时候，是带有Submit值的。如果focus不在submit按钮上，则无效。知道了问题的原因，那就有解决方法了。对于submit，不要设name值 。如果确实需要传递值 ，请使用hidden域进行值的提交。以防止数据产生偏差。

这篇文章我一直在纠结，是否要摘录过来，但我还是最终决定放上来了。
其实大家都知道，在网页中，可见的按钮有三种，一种是input，一种是button，最后一种，其实也不能管是按钮，它是由img转化而来的。最最常用的还是input和button，在以前的日子里，大家都习惯于用input，因为他直接拥有type=submit，而button没有，它更适合于表达button。
然而。。。

首先，在IE6里，如果一个表单里有多个button形式的提交按钮，那么不管你点击其中哪个按钮，所有的button按钮都会被提交，而在IE7，8里则点击哪个按钮，才提交哪个button按钮。此时，如果想在服务端判断用户点击了哪个按钮，只能使用Javascript来处理。

这点，在不同浏览器对回车提交表单的处理办法已经提过，但老王说的这个是变量的传递，以及在指定name的时候，POST变量的值的变化。不废话看原文：
最近写代码，处理很多表单，里面的Submit按钮有两种形式，分别是input和button，有点区别，做个试验：

先创建一个php文件demo.php， 用来接收表单数据：

<?php
var_dump($_POST);
?>

再创建一个html文件demo.html， 用来显示表单：

<form method="post" action="demo.php">
<input type="submit" name="foo" value="提交">
<input type="submit" name="bar" value="保存">
</form>

<form method="post" action="demo.php">
<button type="submit" name="foo" value="foo_value">提交</button>
<button type="submit" name="bar" value="bar_value">保存</button>
</form>

使用Firefox依次浏览，就能看到input和button的区别：input提交按钮显示的文字就是value，而button提交按钮显示的文字 和value是独立的，从这个意义上来看，button更有表现力，是更值得推荐的提交按钮实现方式。

可惜IE总是拖后腿，使用IETester里的 IE6，7，8分别浏览，就会发现button提交按钮在IE下有Bug：

首先，在IE6里，如果一个表单里有多个button形式的提交按钮，那么不管你点击其中哪个按钮，所有的button按钮都会被提交，而在IE7，8里 则点击哪个按钮，才提交哪个button按钮。此时，如果想在服务端判断用户点击了哪个按钮，只能使用Javascript来 处理。

另外，在IE6，7，8里，button形式的按钮在提交后，value属性都失效了，显示文字取代了value。

总结：从理论上来看，button形式的提交按钮优于input形式的提交按钮。但如果考虑浏览器通用性，很多时候还是只能使用input形式的提交按 钮。

参考：http://www.w3.org/TR/html401/interact/forms.html
老王的文章在：表 单提交按钮input和button的取舍

不知道你是否注意过，在firefox或者Chrome下面，即使没有定义input type=submit，只要点击任何一个button，都能触发form 的submit事件，这是为什么呢？
看看这篇文章吧，介绍的有点详细，把它留下来是因为我一向属于知其然不知其所以然，只知道问题所在，和如何解决，从来不深究它的内涵，这也是我为什么水平上不去的原因。。。所以，不要学我，还是看完这篇文章吧。。。虽然不一定详细，但毕竟知其一部分所以然了。

原文来自：不同浏 览器对回车提交表单的处理办法
内容如下：

　　在浏览器中填写表单的时，可以直接在“文本框”中敲击“Enter”来提交表单，很是方便。条件是：

• 在IE和Firefox下

1、<form>属性的“action”字段必填；

2、有一个type="submit"的“input”。

• 在Chrome和Safari下 满足第一条即可。（注释1）

　　所以，如果要控制提交行为的话（比如，提交前检查必填项是否已填），可以在type="submit"的“input”后添加 Javascript“onXXX（比如onClick）”事件。而如果需要用异步交互来检测相关字段，则无效了。因为return false是作为onreadystate=的子函数，并不能控制全局。这时就需要用到<form>的 “onsubmit”属性(注释2）。比如：

HTML

<form name="form1" id="form1" action="act.php" method="post" onsubmit="myfn();return false;">

• myfn()是自己定义的函数：无论通过什么办法 （比如敲击“enter”或点击type="submit"（而不是type="button"）的“input”按钮）提交，都会触发这个这个函数。于 是，大可不必再在type="submit"的“input”后添加Javascript事件“onXXX”了。直接在“onsubmit”中控制，更直 观与统一，除非有意控制提交方式（是onClick还是什么）。
• return false位于末尾，表示不提交本表单。提交表单的字句document.form1.submit()可以作为myfn()的一个选择条件的分支。

总结：

　　这样，<form>有“action”和“onsubmit”属性，有type="submit"的“input”的提交按钮后， 就可以在任何浏览器下（不行吗？请给我反馈）实现使用“Enter”键和鼠标都可以对表单的相关字段进行异步（Ajax）和同步（单纯的 Javascript）检查并予以提交。

其他：

1、如果使用type="button"来异步检测相关字段呢？

　　这样，这个“input”必须得有一个事件触发器。在IE和FF下，无法直接在文本框中按下“Enter”来提交表单。如果要的话，需要使用额 外的函数来监听用户按下了什么，给出一个怎样的反映（注释3）。更糟糕的是，在Ch和Sa下，会忽略是否有type="submit"按钮，而直接根据 “action”属性来提交表单，如此以来，便无法实现预期的检测，可能还有更麻烦的后果。

2、如果不写“action”属性，直接异步提交表单呢？

　　这样，通过异步的方式提交表单，而不仅仅是检测，这个属性则没有必要。而且还是多余。假如这样能提供更好的用户体验，何乐而不为呢？呵呵。

【参考】

1 在IE8，FF，Ch中测试有效。Opera和Sa没有测试。参考了这篇文章（http://tieba.baidu.com/f?kz=669494938）

2 这篇文章（http://blog.csdn.net/xiewhenwe/archive/2009/11/08/4785469.aspx） 给了我借鉴

3 参考我以前的文章（http://www.cnblogs.com/lamper/archive/2010/02/06/1665117.html）

有时候我们不得不通过更改form的action来进行提交数据。当然大多数情况下，我们都是通过隐藏的字段来使action得到不同的数据。比如我们form的action是search.php，那么我们都是通过隐藏字段来使我们通过search.php搜索不同值，比如<input type="hidden" name="action" value="article">然后在search.php里面通过$_POST['action']=='article'来知道我们搜索的内容是文章而不是其他。

但如果我们搜索页面并非只有一个入口search.php怎么办？比如我们的全文搜索是search.php，搜索文章是search_article.php，搜索新闻是search_news.php。怎么办？当然我们可以通过下拉框的值来更改FORM的action，就可以了。

简单代码如下，

<script type="text/javascript">
<!--
function redirectForm( which ){
var searchModeList = document.getElementById('searchMode');
var actionFile = '';
for (var i=0,sml=searchModeList.length; i<sml ; i++ ){
if( i == searchModeList.selectedIndex ){
actionFile = searchModeList[i].value;
}
}
if( actionFile == ''){
return false;
}else{
actionFileactionFile = actionFile + '.php';
}
which.action = actionFile;
which.submit();
}
//-->
</script>
<form method="post" action="" onsubmit="return redirectForm(this);" id='searchForm'>
<select id="searchMode">
<option value="search" selected="selected">Default</option>
<option value="search_article" >Article</option>
<option value="search_news">News</option>
</select>
<input type="submit" />
</form>

jQuery formValidator表单验证插件开源了!!含API帮助、源码、示例

升级记录


2.0
这次又做了一次比较大的调整：增加了FunctionValidator这种校验方式，现在你可以调用外部函数了；调整了内部部分算法；
你打开下载压缩包里的index.html，将会看到全新的演示。
1、增加FunctionValidator校验方式。作用：你可以用外部函数对表单元素进行校验和处理，返回true/false表示校验是否成功;返回字符串表示自定义错误信息，校验失败;如果没有返回值表示处理过程，校验成功。范例代码如下：
$("#sfzh").formValidator({onshow:"请输入15或18位的身份证",onfocus:"输入15或18位的身份证",oncorrect:"输入正确"}).FunctionValidator({fun:isCardID});
fun这个参数给你的函数传递了2个参数(该表单元素的值,表单元素element) 。具体情况，请看API帮助文档
2、当你调用PageIsValid的时候，如果未校验通过，则给onError传递2个参数(第一个校验没通过元素的错误信息,第一个校验没通过元素element)。范例代码如下：
$.formValidator.initConfig({onError:function(msg){alert(msg)}});
3、AjaxValidator校验方式增加一个配置参数buttons（你点提交的按钮(组)jQuery对象）。作用：当你触发了ajax校验，buttons里对应的按钮（组）就会灰掉，一直等待服务器返回数据为止。范例代码如下：
$("#test1").formValidator({...}).InputValidator({...}).AjaxValidator({
url : "Default.aspx",
datatype : "json",
success : function(data){...},
buttons: $("#button_id"),
error: function(){alert("服务器没有返回数据，可能服务器忙，请重试");},
onerror : "该用户名不可用，请更换用户名重新",
onwait : "正在对用户名进行合法性校验，请稍候..."
});
4、由于增加了自定义错误信息的功能，为了跟FunctionValidator校验方式里"fun"函数返回意义统一，更改了formValidator里的onvalid参数返回的意义，给大家带来不便请谅解。返回true/false表示校验是否成功；返回字符串表示自定义错误信息，校验失败；如果没有返回值表示处理过程，校验成功。


1.3
由于工作忙，网友提了很多珍贵的意见，到现在才更新插件，真的对不住！这次修改了几处不合理的地方。
特别增加了DefaultPassed函数，并且调整了表单元素校验的顺序。
1、增加DefaultPassed函数，作用：如果你的表单元素有默认值，而且是合法的，你可以通过这个，设置默认校验通过，示例代码如下：
$("#sex").formValidator({onshow:"请选择你的性别",onfocus:"没有第三种性别了，你选一个吧",oncorrect:"输入正确",defaultvalue:"1"}).InputValidator({min:1,max:1,onerror:"性别忘记选了,请确认"}).DefaultPassed();
2、修正了showalert模式下，只有值发生改变的时候才触发校验
3、修改了表单提交的时候，表单元素校验的顺序，现在按照表单元素的流顺序进行校验
4、demo1里集成了datatimemask插件，具体应用，请见“出生日期”的代码
5、避免了插件与别的javascript类库的$符号的冲突
6、修改了api帮助文档


1.2.1
修复表单元素额外校验失败还会提交得bug,即formValidator里的onvalid属性

1.2.0
这个版本，内部函数做了比较大的调整，开放了更多的函数提供给大家使用，使插件灵活性更大
特别申明：请保留插件的版权申明，谢谢
1、修改插件文件名为:formValidator.js ； 对应的正则表达式的库也被命名为formValidatorRegex.js。
2、SelectValidator被合并到InputValidtor中去，请大家赶紧修改，语法兼容，只要替换名称即可。
3、因为InputValidtor合并了SelectValidator，所以API帮助里列举了InputValidtor各属性能起作用的各种表单类型
4、开放3个公共函数，这些函数跟你的配置相关：
SetFailState function("tipid","显示的信息")，在showword模式下，如果你的额外校验没有通过，你可以通过它来设置成失败信息和状态。
IsOneValid function("表单元素id")，主要来判断单个表单元素是否验证通过。
GetLength function("表单元素id")，判断表单元素的选择长度（个数）。
checkbox或radiobutton表示(同组)选择的个数。
select表示选择的selectedIndex值。
其它的表示字符长度。
5、formValidator里的onvalid属性，增加了返回值，即插件校验成功后，你还可以额外校验。例子请参见demo1里的【额外校验】
return true表示这个表单元素校验成功
return false表示这个表单元素校验失败
错误信息，你可以通过SetFailState函数要写
6、修复在firefox下，长度验证出错的bug。发现jQuery1.2不支持这么写：$("#textarea").attr("type")


1.1.2
1、为AjaxValidator添加一个addidvalue属性(是否自动添加id和值到url参数后面)
为了修复AjaxValidator在配置信息的时候,取不到运行时候值的bug
插件将自动在url后面自动添加,形式为"id=value"的网页参数
在服务器端,你可以通过Request.querystring["id"]来取值
具体演示请看demo1里的用户名输入和Default.aspx


1.1.1版本
1、紧急修复AjaxValidator校验状态出错,以及显示状态的bug
2、调整了内部OneIsValid和formValidator函数的算法,使判断更加合理、有效

1.1 功能比较全的一个版本.
1、开放AjaxValidator表单验证,主要对$.ajax()的调用,具体演示请看demo1里的用户名输入和Default.aspx
用户名在服务器端的校验，我是用了随机数取模，但是每次运行返回要么都是偶数要么都是奇数（不知道什么问题）。
先是长度校验，再是格式校验，最后才是服务器端校验
2、修正AjaxValidator校验状态出错,以及显示状态的问题bug。
3、修正对AjaxValidator的api帮助。
4、修正内部几个函数的一些bug。
5、未了适应AjaxValidator，调整formValidator初始化的一部分功能。

1.0.3
1、把InputValidator的属性defaultvalue移到formValidator下。
目前defaultvalue属性只支持input和select两种tag
2、增加demo1里的范例内容，增加了性别的选择和默认值的设置（性别、学历、爱国、国家区号、你的描述）。
3、增加RegexValidator的一个属性：datatype，支持外置正则表达式的枚举类型，具体请见demo3.html
你可以额外包含这个js文件，定义一个数据类型,你可以自由的修改里面的名称和对应的值
var regexEnum =
{
intege:"^([+-]?)\\d+$" //整数
}
如何调用范例：$("#zs").formValidator({onshow:"请输入整数",oncorrect:"谢谢你的合作，你的整数正确"}).RegexValidator({regexp:"intege",datatype:"enum",onerror:"整数格式不正确"});
4、修正自动纠错的一个bug
5、修正了api帮助文档


1.0.2版本
1、为formValidator增加tipid属性。
主要为了解决多个表单元素共用一个TIP的问题，提示错误的原则:后面的成功或失败信息都不覆盖前面的失败信息
针对这个属性，已经更新了demo1和源码，具体请看范例
2、修正了部分bug和api说明文档疏漏的地方


1.0.1版本
1、修改formValidator下的属性onvalid
增加2个参数，参数1：对象本身 参数2：值。主要是校验通过后，你还希望执行一些操作，你可以方便的取到对象和值
2、去掉InputValidator、SelectValidator、CompareValidator、RegexValidator、AjaxValidator下的onvalid属性
写文档的时候太过匆忙，所以属性加多了，帮助文档和源码都已经修正
3、为formValidator增加属性:automodify,默认值：false。
这个属性只要针对，如果你输入的是非法的，离开焦点的时候将自动恢复上次的值,并且先都有提示,showword模式的提示变成onshow状态
4、为formValidator增加onfocusevent和onblurevent
因为jQuery的事件注册是覆盖的，不是attachEvent追加的，所以再托管出这两个被插件霸占住的事件onfocus和onblur
onfocusevent:获得焦点的时候，处理系统自动处理的代码后，继续你希望再执行的代码
onblurevent:失去焦点的时候，处理系统自动处理的代码后，继续你希望再执行的代码
5、提交验证过程中，如果没有验证通过，则第一个出错的获得焦点
6、申明一点：RegexValidator采用的是显式构造函数new RegExp("pattern"[,"flags"]); 由于Javascript 中'\' 被用作转义字符，所以在使用显示构造函数构造实例对象的时候，需要使用'\\' 代替'\'

1、插件应用效果图浏览

效果图1：


效果2：



2、jQuery pageValidator插件主要功能

1、2种错误提示模式：文字提示、窗口提示
2、呈现时的提示
3、可以为空，空时的提示
4、获得焦点提示
5、发生不同种错误，给出不同的提示
6、可以为空，不为空时要检验控制
7、长度控制、值比较
8、范围控制
9、2个对象比较控制
10、选择个数控制
11、Ajax读取数据
12、正则表达式控制
13、同个页面，你可以划分多个校验组，每个组的校验都是互不影响的
14、单个对象或者整个校验组验证完成、或者出错，有额外的回调函数提供

下载 http://www.cnblogs.com/Files/wzmaodong/formValidator2.0.rar



5、示例代码

<script type="text/javascript">
$(document).ready(function(){
$.formValidator.initConfig({onError:function(){alert("校验没有通过，具体错误请看错误提示")}});
$("#test1").formValidator({onshow:"请输入用户名",onfocus:"用户名至少6个字符,最多10个字符",oncorrect:"恭喜你,你输对了"}).InputValidator({min:6,max:10,onerror:"你输入的用户名非法,请确认"});
$("#test2").formValidator({onshow:"请选择你的兴趣爱好(至少选择3个,最多选择5个)",onfocus:"你至少选择3个,最多选择5个",oncorrect:"恭喜你,你选对了"}).InputValidator({min:3,max:5,onerror:"你选的个数不对(至少选择3个,最多选择5个)"});
$("#test3").formValidator({onshow:"请选择你的兴趣爱好（至少选一个）",onfocus:"你至少选择1个",oncorrect:"恭喜你,你选对了"}).InputValidator({min:1,onerror:"你选的个数不对"});
$("#xueli").formValidator({onshow:"请选择你的学历",onfocus:"学历必须选择",oncorrect:"谢谢你的配合"}).SelectValidator({onerror: "你是不是忘记选择学历了!"});
$("#password1").formValidator({onshow:"请输入密码",onfocus:"两次密码必须一致哦",oncorrect:"密码一致"}).InputValidator({min:1,onerror:"密码不能为空,请确认"}).CompareValidator({desID:"password2",operateor:"=",onerror:"2次密码不一致,请确认"});
$("#nl").formValidator({onshow:"请输入的年龄（1-99岁之间）",onfocus:"只能输入1-99之间的数字哦",oncorrect:"恭喜你,你输对了"}).InputValidator({min:1,max:99,type:"value",onerror:"年龄必须在1-99之间，请确认"});
$("#aiguo").formValidator({onshow:"爱国的人一定要选哦",onfocus:"你得认真思考哦",oncorrect:"不知道你爱不爱，反正你是选了"}).InputValidator({min:1,max:1,onerror:"难道你不爱国？你给我选！！！！"});
$("#shouji").formValidator({empty:true,onshow:"请输入你的手机号码，可以为空哦",onfocus:"你要是输入了，必须输入正确",oncorrect:"谢谢你的合作",onempty:"你真的不想留手机号码啊？"}).InputValidator({min:11,max:11,onerror:"手机号码必须是11位的,请确认"}).RegexValidator({regexp:"^[1][0-9]{10}$",onerror:"你输入的手机格式不正确"});
$("#lxdh").formValidator({empty:true,onshow:"请输入你的联系电话，可以为空哦",onfocus:"你要是输入了，必须输入正确，格式例如：0577-88069620",oncorrect:"谢谢你的合作",onempty:"你真的不想留联系电话了吗？"}).RegexValidator({regexp:"^[[0-9]{3}-|\[0-9]{4}-]?(\[0-9]{8}|[0-9]{7})?$",onerror:"你输入的联系电话格式不正确"});
$("#ms").formValidator({onshow:"请输入你的描述",onfocus:"描述至少要输入10个汉字或20个字符",oncorrect:"恭喜你,你输对了"}).InputValidator({min:20,onerror:"你输入的描述长度不正确,请确认"});
});
</script>


6、特别说明

如果你在使用过程中碰到什么问题请给我留言，发现bug请不要自行修改，也请留言，达到完善插件的目的，真正服务每个程序开发人员 .
请保留插件的版权申明，谢谢
引用地址：http://www.cnblogs.com/wzmaodong/archive/2008/02/04/1034901.html

3、jQuery pageValidator插件 API帮助文档

4、下载API帮助、源码、示例

下载
2.9版本发现一个逻辑bug,正在修复当中,现停止下载

http://www.cnblogs.com/Files/wzmaodong/formValidator2.9.rarhttp://www.cnblogs.com/Files/wzmaodong/formValidator2.4.rar



5、示例代码

<script type="text/javascript">
$(document).ready(function(){
$.formValidator.initConfig({onError:function(){alert("校验没有通过，具体错误请看错误提示")}});
$("#test1").formValidator({onshow:"请输入用户名",onfocus:"用户名至少6个字符,最多10个字符",oncorrect:"恭喜你,你输对了"}).InputValidator({min:6,max:10,onerror:"你输入的用户名非法,请确认"});

$("#test2").formValidator({onshow:"请选择你的兴趣爱好(至少选择3个,最多选择5个)",onfocus:"你至少选择3个,最多选择5个",oncorrect:"恭喜你,你选对了"}).InputValidator({min:3,max:5,onerror:"你选的个数不对(至少选择3个,最多选择5个)"});

$("#test3").formValidator({onshow:"请选择你的兴趣爱好（至少选一个）",onfocus:"你至少选择1个",oncorrect:"恭喜你,你选对了"}).InputValidator({min:1,onerror:"你选的个数不对"});

$("#xueli").formValidator({onshow:"请选择你的学历",onfocus:"学历必须选择",oncorrect:"谢谢你的配合"}).SelectValidator({onerror: "你是不是忘记选择学历了!"});

$("#password1").formValidator({onshow:"请输入密码",onfocus:"两次密码必须一致哦",oncorrect:"密码一致"}).InputValidator({min:1,onerror:"密码不能为空,请确认"}).CompareValidator({desID:"password2",operateor:"=",onerror:"2次密码不一致,请确认"});

$("#nl").formValidator({onshow:"请输入的年龄（1-99岁之间）",onfocus:"只能输入1-99之间的数字哦",oncorrect:"恭喜你,你输对了"}).InputValidator({min:1,max:99,type:"value",onerror:"年龄必须在1-99之间，请确认"});

$("#aiguo").formValidator({onshow:"爱国的人一定要选哦",onfocus:"你得认真思考哦",oncorrect:"不知道你爱不爱，反正你是选了"}).InputValidator({min:1,max:1,onerror:"难道你不爱国？你给我选！！！！"});

$("#shouji").formValidator({empty:true,onshow:"请输入你的手机号码，可以为空哦",onfocus:"你要是输入了，必须输入正确",oncorrect:"谢谢你的合作",onempty:"你真的不想留手机号码啊？"}).InputValidator({min:11,max:11,onerror:"手机号码必须是11位的,请确认"}).RegexValidator({regexp:"^[1][0-9]{10}$",onerror:"你输入的手机格式不正确"});

$("#lxdh").formValidator({empty:true,onshow:"请输入你的联系电话，可以为空哦",onfocus:"你要是输入了，必须输入正确，格式例如：0577-88069620",oncorrect:"谢谢你的合作",onempty:"你真的不想留联系电话了吗？"}).RegexValidator({regexp:"^[[0-9]{3}-|\[0-9]{4}-]?(\[0-9]{8}|[0-9]{7})?$",onerror:"你输入的联系电话格式不正确"});

$("#ms").formValidator({onshow:"请输入你的描述",onfocus:"描述至少要输入10个汉字或20个字符",oncorrect:"恭喜你,你输对了"}).InputValidator({min:20,onerror:"你输入的描述长度不正确,请确认"});
});
</script>


6、特别说明

如果你在使用过程中碰到什么问题请给我留言，发现bug请不要自行修改，也请留言，达到完善插件的目的，真正服务每个程序开发人员 .
请保留插件的版权申明，谢谢