JavaScript语言与Ajax应用第10章 JavaScript表单验证.ppt

1、JavaScript语言与Ajax应用（第二版）,主编 董宁 陈丹 中国水利水电出版社,第10章 JavaScript表单验证,10.1 服务器端表单验证 10.2 客户端表单验证 10.3 用Ajax实现表单验证,2020年8月5日星期三,JavaScript语言与Ajax应用（第二版）,2,10.1 服务器端表单验证,在Web应用开发中，我们经常要使用表单来收集用户提交的数据，比如用户注册和成绩单提交等场景。 在通过表单收集用户数据时往往必须验证用户提交的信息，以确保内容是合理的，例如我们会在字段旁加上“*”表示必填项目。 同时，为了保证用户提交数据的正确性，那么就应该通过程序迫使用户填写

2、有效的数据。表单验证的意义在于：让程序检查用户的输入，确保输入的数据是正确的。,2020年8月5日星期三,JavaScript语言与Ajax应用（第二版）,3,10.1 服务器端表单验证,服务器端数据验证是指数据从浏览器发送到服务器之后通过服务器程序进行验证。 服务器端验证是在数据提交到服务器后由服务器端代码执行的。,2020年8月5日星期三,JavaScript语言与Ajax应用（第二版）,4,10.2 客户端表单验证,客户端表单验证可以通过JavaScript来实现。 JavaScript原生的支持正则表达式，利用正则表达式可以高效准的对用户输入的数据进行验证。 一般来说客户端验证需要考虑

3、三个方面的问题，一是何时进行验证，其次是验证结果如何提示用户，最后页面需要根据不同的验证结果作出不同的反应。,2020年8月5日星期三,JavaScript语言与Ajax应用（第二版）,5,10.3 用Ajax实现表单验证,客户端利用JavaScript语言和正则表达式能够实现的验证功能非常强大，但还是有不足之处。 首先客户端无法利用服务器中的数据来完成验证，比如检测某个输入的身份证号是不是一个真实存在的。 其次，某些情况下正则表达式也无法准确的验证数据，比如在上一节的例子中，检查日期的正则表达式dddd/.-dd/.-dd$允许输入的是四位数字、一个分隔符、两位数字、一个分隔符和两位数字。这

4、条表达式可以有效地阻止一些明显错误输入，但对一些无效输入，比如“9999/99/99”、“2011/03/32”、“2007/02/29”就无能为力了。 正则表达式不可能完全捕捉各种畸形的状况。还有很多情况是正则表达式完全起不到作用的：比如没有规定格式的日期、数值范围和URL是否有效。要验证这些用户输入，需要服务器端验证才行。,2020年8月5日星期三,JavaScript语言与Ajax应用（第二版）,6,10.3 用Ajax实现表单验证,客户端验证用Ajax方式结合服务器端验证可以按照如下步骤实现： （1）页面加载的时候，给每个字段的onblur事件附加一个处理函数。 （2）当用户的输入焦点

5、离开某个字段时，onblur事件处理函数开始执行，从字段中取得当前值，并在客户端进行初步验证。 （3）如果初步验证结果是输入数据错误则显示错误消息，在输入的数据通过客户端验证之后，可以向服务器发出一个XMLHttpRequest调用，向服务器传递字段的名称和取值。 （4）服务期执行相关验证代码，然后返回验证结果。 （5）JavaScript接收到Ajax调用结果，如果是错误消息就页面上显示错误信息，如果没有错误页面可以提交表单或执行其他动作。,2020年8月5日星期三,JavaScript语言与Ajax应用（第二版）,7,本章小结,本章主要说明了如何利用JavaScript实现表单验证，并且介绍了表单验证的常用方式。 表单验证很重要。任何投入实用的表单页面都应该去尽力确保其收集到的数据的质量。客户端验证能应对大多数情况，但有些时候数据验证还是需要在服务器端进行。从