JavaScript语言和Ajax应用第10章 JavaScript表单验证

2020年4月18日星期 六
JavaScript语言与Ajax应用（第二版）
8
• （1）页面加载的时候，给每个字段的onblur事件附加一个处理函数。 • （2）当用户的输入焦点离开某个字段时，onblur事件处理函数开始
执行，从字段中取得当前值，并在客户端进行初步验证。 • （3）如果初步验证结果是输入数据错误则显示错误消息，在输入的
数据通过客户端验证之后，可以向服务器发出一个XMLHttpRequest 调用，向服务器传递字段的名称和取值。 • （4）服务期执行相关验证代码，然后返回验证结果。 • （5）JavaScript接收到Ajax调用结果，如果是错误消息就页面上显示 错误信息，如果没有错误页面可以提交表单或执行其他动作。
何时进行验证，其次是验证结果如何提示用户，最后 页面需要根据不同的验证结果作出不同的反应。
2020年4月18日星期 六
JavaScript语言与Ajax应用（第二版）
5
10.3 用Ajax实现表单验证
• 客户端利用JavaScript语言和正则表达式能够实现的验证功能非常 强大，但还是有不足之处。
2020年4月18日星期 六
JavaScript语言与Ajax应用（第二版）
7
本章小结
• 本章主要说明了如何利用JavaScript实现表单 验证，并且介绍了表单验证的常用方式。
• 表单验证很重要。任何投入实用的表单页面都 应该去尽力确保其收集到的数据的质量。客户 端验证能应对大多数情况，但有些时候数据验 证还是需要在服务器端进行。从用户体验和程 序的运行效率考虑，利用Ajax技术结合客户端 与服务器端验证是很有必要的。
2020年4月18日星期 六
JavaScript语言与Ajax应用（第二版）
4
10.2 客户端表单验证
• 客户端表单验证可以通过JavaScript来实现。 • JavaScript原生的支持正则表达式，利用正则表达式可
以高效准的对用户输入的数据进行验证。 • 一般来说客户端验证需要考虑三个方面的问题，一是
JavaScript语言与Ajax应用（第二版）
主编 董宁 陈丹 中国水利水电出版社
第10章 JavaScript表单验证
• 10.1 服务器端表单验证 • 10.2 客户端表单验证 • 10.3 用Ajax实现表单验证
2020年4月18日星期 六
JavaScript语言与Ajax应用（第二版）
2
• 首先客户端无法利用服务器中的数据来完成验证，比如检测某个 输入的身份证号是不是一个真实存在的。
• 其次，某些情况下正则表达式也无法准确的验证数据，比如在上 一节的例子中，检查日期的正则表达式^\d\d\d\d[\/.-]\d\d[\/.-]\d\d$ 允许输入的是四位数字、一个分隔符、两位数字、一个分隔符和 两位数字。这条表达式可以有效地阻止一些明显错误输入，但对 一些无效输入，比如“9999/99/99”、“2019/03/32”、“2019/02/29” 就无能为力了。
在于：让程序检查用户的输入，确保输入的数据是正 确的。
2020年4月18日星期 六
JavaScript语言与Ajax应用（第二版）
3

10.1 服务器端表单验证
• 服务器端数据验证是指数据从浏览器发送到服 务器之后通过服务器程序进行验证。 • 服务器端验证是在数据提交到服务器后由服务 器端代码执行的。
• 正则表达式不可能完全捕捉各种畸形的状况。还有很多情况是正 则表达式完全起不到作用的：比如没有规定格式的日期、数值范 围和URL是否有效。要验证这些用户输入，需要服务器端验证才行。
2020年4月18日星期 六
JavaScript语言与Ajax应用（第二版）
6
10.3 用Ajax实现表单验证
• 客户端验证用Ajax方式结合服务器端验证可以按照如下步骤实现：
10.1 服务器端表单验证
• 在Web应用开发中，我们经常要使用表单来收集用户 提交的数据，比如用户注册和成绩单提交等场景。
• 在通过表单收集用户数据时往往必须验证用户提交的 信息，以确保内容是合理的，例如我们会在字段旁加 上“*”表示必填项目。
• 同时，为了保证用户提交数据的正确性，那么就应该 通过程序迫使用户填写有效的数据。表单验证的意义