首页 > 代码库 > JavaScript总结(八)

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表单校验是用于帮助用户发现错误的,而不是一种强制政策;

JavaScript总结(八)