Form 表单最佳实践

前言

这份文档献给我身边某些可爱的 Java 工程师，感谢你们激怒了我 :)

“Form 表单”其实是一种错误的叫法，Form 本身就是表单，不过这样叫似乎比较顺口。

这里所谓的“最佳实践”只是标题党。

POST & GET

表单有一般使用 POST 或 GET 方式提交数据到服务器端，如果你理解这两个词，这里就 不再赘述了；如果不理解，那也没什么好讲的，就以下面通俗的“所见即所得”理解吧。

GET:

所谓 GET 方式，通俗的讲，就是地址栏可见所有提交的信息：

这个表单提交之后，地址栏就包含了所有的提交信息：

可以直接在地址栏修改： action: 即 部分。 data/param: 即 key=value&search=%CB%D1%CB%F7 这些参数部分。

广义上，通俗的讲，包括地址栏上手写并回车，点击链接，或者 method="get" 的表单， 以及通过 AJAX get 提交的都是 get 方式。get 请求，刷新时还是 get 请求。

POST:

通俗的讲，POST 就是地址栏看不到提交请求所带的数据（又称为“参数”）。

这个表单提交之后，地址栏除了 外不包含其他信息。

广义上，通俗的讲，method="post" 的表单，AJAX post 都是 post 方式。 post 提交后，刷新仍是 post 提交相同的数据。

编码(Encoding)

在客户端页面和服务器端程序编码不同时，提交数据非常容易出现编码问题，即所谓的 “乱码”。

解决这个问题，可以多种方式：

1. 最根本的，就是统一客户端和服务器端的编码。建议都使用 utf-8。
   目前服务器上均是使用 utf-8 接受数据，所以可以考虑统一使用 utf-8 编码， 要做的有一下几点：
• 修改页面的 charset 设置
• .vm 文件本身保存为 utf-8 编码。
• 修改编码设置： milan-web-base-2.0-SNAPSHOT.jar\META-INF\webx\pipeline.xml
  milan-web-base-2.0-SNAPSHOT.jar\META-INF\webx\webx-default.xml

2. 设置 form 元素的 accept-charset 属性为服务器接收数据使用的编码。
   Hack in IE: onsubmit="document.charset='utf-8';"
3. 通过 JavaScript 的 encodeURIComponent(key) 函数转码，一般用于 AJAX 提交。
   另有两个转码函数：escape(), encodeURI()
   解码函数分别是：unescape(), decodeURI(), decodeURIComponent()

onsubmit

Form 表单的 onsubmit 事件在表单真正向服务器发送请求之前执行，一般用于验证表单 的数据完整性和合法性。如果处理函数返回 false，则不向服务器发送请求。

绑定 onsubmit 事件处理函数的方法有 3 种：

• 一般简单的页面，直接在 form 标签中添加 onsubmit 属性:
  ...
• 按照“内容与行为分离”的思想，我们一般可以在 JavaScript 加载完成后对表单进行 事件绑定：

  //var form = document.getElementById("formId");
  form.onsubmit = function(){
      if(ie){document.charset="utf-8";}
      return !!this["k"].value;
  };
  

• 更专业的事件绑定方法（考虑到兼容性问题，这里使用 jQuery 代码）：

  $("#formId").submit(function(){
      return this.k.value;
  });
  

普通提交数据的表单

对于普通提交数据的表单，比如新增、修改数据，使用 POST 方式提交数据即可。 删除的方式一般有两种：

1. 删除链接的 href 指向执行删除操作的地址，链接元素绑定 onclick 事件：
   这是 GET 提交方式。绑定事件处理函数的技巧同上面的 onsubmit。
2. 绑定 onclick 事件，并执行 AJAX 提交， return false；回调函数中可以使用动态 更新 DOM 的方式或其他。

呃，其实最好体验也许是：删除操作时不要求确认（弹出确认对话框），但在事后可以 执行 撤销 删除操作。

多个提交按钮的表单

某些时候，单个表单中可能存在 2 个及其以上的提交按钮。

首先，考虑清楚这多个按钮是否真的都需要向服务器提交数据。像关闭，返回，后退， 或者失传已久的重置操作，就不要使用按钮了，至少不要使用绑定 onclick 并

form.action = "back.html";
form.submit()

或 location.href="back.html" 这样的按钮。

这些按钮在实践上使用链接来实现更好更简单：后退

对于确实需要多个提交操作的按钮，可以通过提交按钮的 name 来区分。

多个相同操作的表单

类似于搜索引擎结果页，页面上、下均有功能相同的搜索框（为方便用户使用，虽然 实际受惠的用户可能并不多），这两个搜索框分别由两个表单组成，但是可以统一使用 同一个 onsubmit 事件处理函数。

    
    


搜索结果列表...


    
    

function validater(form){
    return form["k"].value;
}

搜索

搜索建议使用 GET 方式提交，过滤参数和当前页码这些信息全部带在地址中。

翻页链接（上一页，下一页...）

翻页系统一般还允许用户手动输入页码并直接跳转到指定页，这个翻页表单建议和 搜索表单分离，分别是不同的 form 组成。

下面是搜索关键字 key 并翻页到第 2 页之后的状态：

    
    


搜索结果列表...

上一页
下一页

    
    
    

可爱的陋习

不要在表单中为 button 类型的按钮绑定 onclick 事件，并在事件处理函数中执行 form.submit(); ，然后费尽心思实现“在输入框中也可以回车提交”这种蠢事。

也不要为了解决避免编码问题而在 onsubmit 处理函数中做 input.value=encodeURIComponent(input.value);，然后为了避免这个带来的 “乱码(被编码的字符)瞬间出现在表单中”而把搜索框做成隐藏域，再附加一个傀儡 输入框用于输入。