JavaScript总结（八）

表单验证

表单验证是JavaScript最常用、最有用的功能之一。在表单内容提交之前进行验证，可以降低服务器处理器的压力，缩短用户等待的时间。表单校验中第一个要考虑的问题是：什么时候捕获表单的录入错误？在错误发生之前、在错误发生时、在错误发生之后；

♞ 使用submit事件在错误发生之后捕获错误

表单数据输入完毕后，通过点击提交按钮和submit()方法把数据发送到由表单的action属性指定的表单处理程序进行处理。为了防止无效数据进入服务器端，我们有在submit事件发送之后，表单数据提交到表单处理程序之前，验证表单中输入的数据的有效性，即把校验代码写在submit()事件的事件处理程序中。如果一个控件包含了无效数据，就显示一条信息，并且通过处理程序返回false值来取消提交，如果数据有效，处理程序返回true值，正常提交表单数据。

♞ 使用change事件在错误发生时捕获错误

可以在用户输完每项数据后，马上进行校验；当修改一个控件，并失去焦点时，会触发change事件，我们就可以在change事件处理程序中，写入校验码，如果数据无效，显示一条信息提醒用户，并且通过处理程序返回false值来阻止表单的提交。

♞ 使用keypress事件在错误发生之前捕获错误

如何在开始就阻止错误的发生？可以通过在键入数据的时候，即keypress事件发生时，限制数据的类型来实现，这样就可以在错误发生时捕获并阻止。

✍ 表单校验最佳实践

➣ 必须对用户有帮助——客户端校验必须用于帮助用户正确输入数据，因此，它必须以有帮助的方式与用户交互。例如用户输入一个无效数据，可以在错误信息中包含正确的数据格式。同样可以使用脚本来纠正一般的错误，例如：使用JavaScript自动格式化；

➣ 不要让人讨厌——我们使用alert()来提示用户输入无效是为了演示，但是在用户可以校验数据之前，alert()窗口必须关闭，因为用户也许会忘记到底是哪个控件出错。所以最好考虑在页面本身的某个地方显示错误信息；

➣ 只要有可能，就用HTML功能代替JavaScript——比如说使用控件的maxlength属性校验控件长度，比使用JavaScript校验好；提供一个可能的日期的下拉列表以避免无效输入，来替代日期检查等等；

➣ 早点捕获错误——一直等到提交不是捕获错误的最佳事件，可以选择在错误发生时或者发生之前对错误进行捕获。如果要使用blur和focus触发器，必须管理事件，包括消除事件冒泡；

➣ 如果拿不准，就不要太严格——JavaScript表单校验是用于帮助用户发现错误的，而不是一种强制政策；