Page 63 - JavaScript修炼之道

52 第四部分 表单技巧

任务 23 表单验证：高级技巧

前两个任务，即任务21和任务22，检查了必填输入域和输入文本的格式。我们现在要和服务
器端通信，做更提前的检查。

这是本书第一次使用Ajax。Ajax是在JavaScript调试中相当烦人的地方。要是你还没有阅读附
录B的话，请先读一遍。附录B的信息对你整改事件驱动或Ajax驱动的代码具有不可估量的价值。

Ajax表单验证的典型示例是全局唯一的输入域。通常来说，这处理的是登录名和email地址。
我们这里就实现登录名域的这种检查——假设应用场景要求用户之间的登录名不能重复。

Ajax验证的重要特点是即时动态（on-the-fly）UI反馈，比如提示正在检查和提示检查结果，
因此HTML标记得要预先留出这些元素的位置。你也需要设计用哪种触发方式，也许会对不同的
输入域进行不同的选择。是在输入同时 检查（用高频率的输入域轮询）还是在输入完成之后 检
①
②
③
查（用状态改变事件）？在这个例子中，我用前一种方法实现Prototype的Field.Observer机制 。
我设置了0.8″的时间间隔 ，这样不至于给打字慢的用户施加太大压力。
④
我们假定系统要求登录名至少要有两个字符，所以没必要对更短的输入做Ajax查询，这里的
检查就忽略掉空串或者单个字符的输入。当有了两个以上字符之后，它才向服务器端检查脚本发
送Ajax GET请求，然后根据HTTP响应代码（2xx = 成功；其他的都表示失败。特别要检查是否
有响应状态，因为Opera忽略了许多4xx的返回码）适当地更新反馈UI。

我在服务器端那边放了段短小的伪检查代码。这段代码模拟了网络连接的等待时间，使我
们偶尔能看到旋转的等待图标。另外，它根据你输入的登录名是否已知，返回适当的HTTP响应
代码。

——————————
① 在一个输入域输入按键的同时 。*
② 完成一个输入域的文本输入，跳到另一个输入域的时候。*
③ 用法是new Form.Element.Observer(element, frequency, callback)，Field是Form.Element的
缩写。*
④ 是的，geeky的朋友，我应该说“1.25 Hz频率”。