JavaScript网页编程：即时显示验证错误的消息

很多时候，在提交时对整个表单的所有数据进行集中验证并不是最好的方式。更合适的做法是在用户填写完某一项数据时立即对这一项数据进行验证。

如图7.17所示的注册界面展示了这一场景。

图7.17　注册验证

将焦点放置到某个表单元素中时，此元素的右侧显示有关此元素的数据有效性的提示信息；当焦点从某个表单元素离开时，立即对此元素的数据进行验证，如果不符合有效性要求，则在它的右侧即时显示错误提示。

例7.10：

运行页面，单击“登录用户名”文本框。此时，文本框右侧显示了提示信息。如图7.18所示。(www.xing528.com)

图7.18　显示提示信息

在“登录用户名”文本框中输入“oeac”，再单击“密码”密码框。此时，“登录用户名”文本框右侧显示了错误提示信息。如图7.19所示。

图7.19　错误提示信息

鼠标单击“登录用户名”文本框导致文本框获得焦点，此时在文本框对象上引发onfocus事件，关联的事件处理程序是调用displayFocusMsg函数，并向它传递了两个参数：第一个参数是作为显示提示消息的容器的<span></span>标签的id值；第二个参数是要显示的提示消息文字。

焦点从文本框转移到密码框导致文本框失去焦点，此时在文本框对象上引发onblur事件，关联的事件处理程序是调用validateUserName函数，并向它传递了一个参数：此参数是作为显示验证消息的容器的<span></span>标签的id值。