第六章JavaScript表单验证 JavaScript及网页特效制作课件.pptVIP

第六章 JavaScript表单验证 本章案例 本章目标 预习检查 客户端验证 优点: 当用户输入错误数据时，页面不需要重新加载，可以保持用户输入的数据状态，所以不要要再一次输入所有数据，只输入错误数据即可。 减轻了服务器端通信压力，因为发生错误的时候并没有数据往返到服务器端。 使得用户界面响应更加迅速，因为可以立刻为用户提供反馈信息。 缺点： JavaScript不能作为唯一的验证方法(JavaScript可能不可用，甚至可能被故意关闭以阻止进行验证)。 这可能会产生这样一个错觉，验证输入数据是非常简单的过程。其实不是这样，而且它对产品的安全性和可用性都是非常关键的。 除非在客户端和服务器端使用了相同的验证规则，否则就意味着当验证规则发生一处变化的时候，需要进行两次维护。 全能的验证神话 每个开发框架或集成开发工具都提供了承诺可以帮你解决任何问题的通用表单验证方法。 但是大多数都是令人费解或者没有实现所承诺的效果，许多客户端验证和已有的解决方案最大的错误就是没有考虑地域或行业的差异性。所以需要编写最适合自己的验证脚本。 例如：英国的邮政编码类似于N165UN，而美国的邮编则为12345或-1234。 字符串基本验证 字符串常用方法 charAt(n) ：返回字符串中第n个位置的字符，从0开始。 charCodeAt(n) ：返回字符串中第n个位置字符的ASCII值，第一个位置为0。 indexOf(search) ：返回search在主字符串中的位置，如果没有则返回-1。 lastIndexOf(search) ?：返回search在主字符串中的最后位置，没有则返回-1。 slice(start, end) ：返回start和end之间的字符串，如果没有提供end则返回从start开始所有的字符串。 split(search) ：将字符串分割成数组，数组元素为search周围的字符串，search本身不包含在数组中。 substr(start, n) ：将从start开始的n个字符作为字符串返回。 substring(start, end) ：返回start和end之间的字符串。 字符串基本验证 验证一个字符串是否为空。 字符串基本验证 字符串基本验证 字符串基本验证 数字验证 Number() ：将括号内的值转换为数字。 isNaN(n) ：检验n是否为数字(整数或者浮点型)。 parseInt() ：将字符串转换为整数(只转换从左侧第一位开始的数字值，非数字值不做转换，若第一位既为非数字值，返回NaN)。 parsetFloat() ：将字符串转换为浮点数(转换方式与parseInt类似)。 数字验证 数字验证 课堂练习 使用字符串常用方法验证一个字符串是否为邮件格式。 正则表达式 正则表达式是用于描述复杂规则的工具。是记录文本规则的代码。 正则表达式类似于通配符“*”和“?”，都是用来进行文本匹配，但是正则表达式可以匹配更为复杂的文本。 正则表达式入门 正则表达式的定义方式： 假设：想要从字符串中匹配cat这个单词，正则表达式可以采用如下两种方式： var searchTerm = /cat/; var searchTerm = new RegExp(‘cat’); 第一种定义方式中“/”代表正则的开始和结束，中间的cat表示要匹配的内容。 第二种定义方式中RegExp为JavaScript内置的正则对象，可以使用new的方式获取一个正则对象，与第一种写法效果相同。 这两种正则能够匹配任意含有cat这个单词的所有字符串如： catalog、tomcat、scat等 正则表达式入门 限定cat出现位置的正则表达式写法： var searchTerm = /^cat$/; var searchTerm = new RegExp(‘^cat$’); 以上两种定义方式分别使用了“^”及“$”对正则对象进行限制，“^”表示从字符串的开始部分进行匹配，“$”表示匹配至字符串的结束部分。两个符号同时使用如/^cat$/则表示完全匹配，即这个正则只能匹配“cat”这个字符串。 若只想匹配开始部分，则可以写为： var searchTerm = /^cat/; var searchTerm = new RegExp(‘^cat’); 正则表达式入门 在验证英文字符串时，经常会不区分大小写进行匹配，此时正则表达式的定义如下： var searchTerm = /cat/i; var searchTerm = new RegExp(‘cat’, ‘i’); 在正则表达式中，使用字母“i”表示不区分大小写进行匹配。如上定义后，以下单词均可匹配： TomCAT、CaTalog、SCAt 正则表达式入门 在一个字符串中搜索所有重复