Page 59 - JavaScript修炼之道

48 第四部分 表单技巧

任务 21 表单验证：基本技巧

客户端验证是必需的。真的。用户的连接吞吐量就不用说了，把本可以直接在浏览器上做的
任何验证都传到服务器上绕一圈是非常可耻的。你肯定想让你的网页值得自豪吧，所以让我们开
始吧！

第一个任务关注最基本的验证：必填输入项。也就是检验特定输入区域是否不为空或者被选
中等。我们约定，用required这个CSS class属性标记这种输入区域，之后设置样式来给未填的
必填输入项提供视觉反馈。

首先，确保要截取到表单的submit事件，而不是submit按钮的click事件或者文本域的
按键。在提交到服务器端之前截获表单的唯一可靠方式就是截取它的submit事件。它甚
至还可以截获到代码引起的提交（form.submit()调用）。

一旦挂上submit事件，就只需要获取表单中所有标记为required的元素，然后检验它们是否
为非空值。用Prototype对String的blank()扩展能很方便地检验是否非空。只含空白符的字符串，
可以认为是空，因为语义上看它们比实际的空串好不到哪去。然而需要注意，如果输入区域可以
接受只含空白符的字符串，要改为用if(field.getValue())来判断——在JavaScript中，空串等
价于false。

右页的JavaScript代码维护一个firstOffender引用，这用来自动定位到第一个出问题的输
入项，有助于用户矫正输入。另外，做完检验后，如果发现至少有一个问题，就通过stop()来
终止这个事件，不提交当前表单。

最后，还有一个提示，这算是另一层面的问题：Internet Explorer中的submit事件不会冒泡。
因此，如果你的代码需要在IE中正常运行，你就得给页面里每个要检验的表单（包括初始DOM

载入之后动态插入的）绑定事件监听器。jQuery自1.4版之后在IE中对submit事件进行了模拟冒
泡，但这是以监视所有表单中的所有单击和按键为代价的，这个代价有点大。