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

1、JavaScript与网页特效制作与网页特效制作 第六章第六章JavaScriptJavaScript表单验证表单验证本章案例本章案例字符串验证字符串验证数字验证数字验证email验证验证 本章目标本章目标了解客户端验证的优点了解客户端验证的优点掌握基本的字符串验证掌握基本的字符串验证掌握基本的数字验证掌握基本的数字验证掌握常用的正则表达式验证掌握常用的正则表达式验证 预习检查预习检查 客户端验证的优点是什么？客户端验证的优点是什么？ 如何验证字符串是否为空？如何验证字符串是否为空？ 如何验证一个值是否为数字类型？如何验证一个值是否为数字类型？ Email正则表达式如何书写？正则表达式如何书写

2、？ 客户端验证客户端验证 优点优点:当用户输入错误数据时，页面不需要重新加载，可以保持用户输入的数当用户输入错误数据时，页面不需要重新加载，可以保持用户输入的数据状态，所以不要要再一次输入所有数据，只输入错误数据即可。据状态，所以不要要再一次输入所有数据，只输入错误数据即可。减轻了服务器端通信压力，因为发生错误的时候并没有数据往返到服务减轻了服务器端通信压力，因为发生错误的时候并没有数据往返到服务器端。器端。使得用户界面响应更加迅速，因为可以立刻为用户提供反馈信息。使得用户界面响应更加迅速，因为可以立刻为用户提供反馈信息。 缺点：缺点：JavaScript不能作为唯一的验证方法不能作为唯一的验

3、证方法(JavaScript可能不可用，甚至可可能不可用，甚至可能被故意关闭以阻止进行验证能被故意关闭以阻止进行验证)。这可能会产生这样一个错觉，验证输入数据是非常简单的过程。其实不这可能会产生这样一个错觉，验证输入数据是非常简单的过程。其实不是这样，而且它对产品的安全性和可用性都是非常关键的。是这样，而且它对产品的安全性和可用性都是非常关键的。除非在客户端和服务器端使用了相同的验证规则，否则就意味着当验证除非在客户端和服务器端使用了相同的验证规则，否则就意味着当验证规则发生一处变化的时候，需要进行两次维护。规则发生一处变化的时候，需要进行两次维护。 全能的验证神话全能的验证神话 每个开发框架

4、或集成开发工具都提供了承诺可以帮你解决每个开发框架或集成开发工具都提供了承诺可以帮你解决任何问题的通用表单验证方法。任何问题的通用表单验证方法。 但是大多数都是令人费解但是大多数都是令人费解或者没有实现所承诺的效果，许多客户端验证和已有的解或者没有实现所承诺的效果，许多客户端验证和已有的解决方案最大的错误就是没有考虑地域或行业的差异性。所决方案最大的错误就是没有考虑地域或行业的差异性。所以需要编写最适合自己的验证脚本。以需要编写最适合自己的验证脚本。 例如：英国的邮政编码类似于例如：英国的邮政编码类似于N165UN，而美国的，而美国的 则为则为12345或或-1234。 一般的客户端验证都有两

5、个最为主要的验证：字符串验证一般的客户端验证都有两个最为主要的验证：字符串验证和数字验证。和数字验证。字符串基本验证字符串基本验证 字符串常用方法字符串常用方法charAt(n) ：返回字符串中第：返回字符串中第n个位置的字符，从个位置的字符，从0开始。开始。charCodeAt(n) ：返回字符串中第：返回字符串中第n个位置字符的个位置字符的ASCII值，第一个位置为值，第一个位置为0。indexOf(search) ：返回：返回search在主字符串中的位置，如果没有则返回在主字符串中的位置，如果没有则返回-1。lastIndexOf(search) ：返回：返回search在主字符串中的

6、最后位置，没有则返在主字符串中的最后位置，没有则返回回-1。slice(start, end) ：返回：返回start和和end之间的字符串，如果没有提供之间的字符串，如果没有提供end则返则返回从回从start开始所有的字符串。开始所有的字符串。split(search) ：将字符串分割成数组，数组元素为：将字符串分割成数组，数组元素为search周围的字符串，周围的字符串，search本身不包含在数组中。本身不包含在数组中。substr(start, n) ：将从：将从start开始的开始的n个字符作为字符串返回。个字符作为字符串返回。substring(start, end) ：返回：返

7、回start和和end之间的字符串。之间的字符串。 字符串基本验证字符串基本验证 验证一个字符串是否为空。验证一个字符串是否为空。function validate() var text =document.getElementById(text).value;if (text = null | text = ) alert(请输入一个字符串！请输入一个字符串！); else alert(你输入的字符串是：你输入的字符串是： + text);判断字符串是否为空判断字符串是否为空演示程序示例演示程序示例1.html字符串基本验证字符串基本验证在表单提交时验证文本框中输入的值是否为数字。在表单提交

8、时验证文本框中输入的值是否为数字。 如果字符串中包含有负号，则必须在第一位。如果字符串中包含有负号，则必须在第一位。 如果字符串中包含有小数点，则只能有一个。如果字符串中包含有小数点，则只能有一个。 每一位字符的每一位字符的ASCII码所在范围均为码所在范围均为57并且不并且不等于等于45及及46。 字符串基本验证字符串基本验证if (num = null | num = ) alert(请输入一个字符串请输入一个字符串!); return false; /验证字符串中若包含负号，是否在首位验证字符串中若包含负号，是否在首位if (num.indexOf(-) != -1 & num.

9、substr(0, 1) | num.lastIndexOf(-) != num.indexOf(-) alert(负号只可以出现在数字的第一位！负号只可以出现在数字的第一位！);return false; /验证字符串中若包含小数点，是否仅有一个且不在首尾验证字符串中若包含小数点，是否仅有一个且不在首尾if (num.indexOf(.) != -1 & num.indexOf(.) != num.lastIndexOf(.) alert(数字中只能有一个小数点！数字中只能有一个小数点！);return false;验证负号验证负号验证小数点验证小数点字符串基本验证字符串基本验证fo

10、r (i = 0; i num.length; i+) currentCode = num.charCodeAt(i);/截取一个字符的截取一个字符的ASCII if (currentCode != 45 & currentCode != 46 & currentCode 57) alert(只允许输入数字！只允许输入数字！); return false;return true;/提交表单提交表单循环遍历每一个字符循环遍历每一个字符验证每一个字验证每一个字符是否为数字符是否为数字停止表单提交停止表单提交演示程序示例演示程序示例2.html数字验证数字验证 Number() ：将

11、括号内的值转换为数字。：将括号内的值转换为数字。 isNaN(n) ：检验：检验n是否为数字是否为数字(整数或者浮点型整数或者浮点型)。 parseInt() ：将字符串转换为整数：将字符串转换为整数(只转换从左侧第一位开只转换从左侧第一位开始的数字值，非数字值不做转换，若第一位既为非数字值，始的数字值，非数字值不做转换，若第一位既为非数字值，返回返回NaN)。 parsetFloat() ：将字符串转换为浮点数：将字符串转换为浮点数(转换方式与转换方式与parseInt类似类似)。 数字验证数字验证使用数字验证方法验证一个字符串是否为数字。使用数字验证方法验证一个字符串是否为数字。 使用使用

12、isNaN()方法进行验证。方法进行验证。 方法返回值为方法返回值为true则是数字。则是数字。 数字验证数字验证function validate() var num = document.getElementById(number);if (isNaN(num) alert(你输入的不是数字！你输入的不是数字！);return false;return true;判断是否为数字判断是否为数字演示程序示例演示程序示例3.html课堂练习课堂练习 使用字符串常用方法验证一个字符串是否为邮件格式。使用字符串常用方法验证一个字符串是否为邮件格式。正则表达式正则表达式 正则表达式是用于描述复杂规则的

13、工具。是记录文本规则正则表达式是用于描述复杂规则的工具。是记录文本规则的代码。的代码。 正则表达式类似于通配符正则表达式类似于通配符“*”和和“?”，都是用来进行文本，都是用来进行文本匹配，但是正则表达式可以匹配更为复杂的文本。匹配，但是正则表达式可以匹配更为复杂的文本。正则表达式入门正则表达式入门 正则表达式的定义方式：正则表达式的定义方式： 假设：想要从字符串中匹配假设：想要从字符串中匹配cat这个单词，正则表达式可以采用如这个单词，正则表达式可以采用如下两种方式：下两种方式： var searchTerm = /cat/; var searchTerm = new RegExp(cat)

14、; 第一种定义方式中第一种定义方式中“/”代表正则的开始和结束，中间的代表正则的开始和结束，中间的cat表示要匹表示要匹配的内容。配的内容。 第二种定义方式中第二种定义方式中RegExp为为JavaScript内置的正则对象，可以使内置的正则对象，可以使用用new的方式获取一个正则对象，与第一种写法效果相同。的方式获取一个正则对象，与第一种写法效果相同。 这两种正则能够匹配任意含有这两种正则能够匹配任意含有cat这个单词的所有字符串如：这个单词的所有字符串如： catalog、tomcat、scat等等正则表达式入门正则表达式入门 限定限定cat出现位置的正则表达式写法：出现位置的正则表达式写

15、法： var searchTerm = /cat$/; var searchTerm = new RegExp(cat$); 以上两种定义方式分别使用了以上两种定义方式分别使用了“”及及“$”对正则对象进行对正则对象进行限制，限制，“”表示从字符串的开始部分进行匹配，表示从字符串的开始部分进行匹配，“$”表示表示匹配至字符串的结束部分。两个符号同时使用如匹配至字符串的结束部分。两个符号同时使用如/cat$/则则表示完全匹配，即这个正则只能匹配表示完全匹配，即这个正则只能匹配“cat”这个字符串。这个字符串。 若只想匹配开始部分，则可以写为：若只想匹配开始部分，则可以写为： var search

16、Term = /cat/; var searchTerm = new RegExp(cat);正则表达式入门正则表达式入门 在验证英文字符串时，经常会不区分大小写进行匹配，此在验证英文字符串时，经常会不区分大小写进行匹配，此时正则表达式的定义如下：时正则表达式的定义如下： var searchTerm = /cat/i; var searchTerm = new RegExp(cat, i); 在正则表达式中，使用字母在正则表达式中，使用字母“i”表示不区分大小写进行匹配。表示不区分大小写进行匹配。如上定义后，以下单词均可匹配：如上定义后，以下单词均可匹配： TomCAT、CaTalog、SC

17、At正则表达式入门正则表达式入门 在一个字符串中搜索所有重复的匹配是比较常用的功能，在一个字符串中搜索所有重复的匹配是比较常用的功能，使用正则定义全局匹配如下：使用正则定义全局匹配如下： var searchTerm = /cat/g; var searchTerm = new RegExp(cat, g); 字符字符g表示使用该正则在字符串中进行全局匹配，返回表示使用该正则在字符串中进行全局匹配，返回字符串中所有符合正则的所有字符串数组。字符串中所有符合正则的所有字符串数组。正则表达式入门正则表达式入门 正则表达式的使用正则表达式的使用: 字符串对象提供了四种方法对正则表达式进行匹配，分别是

18、：字符串对象提供了四种方法对正则表达式进行匹配，分别是： search() ：该方法以正则表达式为参数，返回第一个与之匹配的子串：该方法以正则表达式为参数，返回第一个与之匹配的子串的位置，如果没有任何匹配，则返回的位置，如果没有任何匹配，则返回-1，例如，下面的调用返回值为，例如，下面的调用返回值为4。 JavaScript.search(/script/i); replace()方法方法 ：此方法执行检索与替换操作。它的第一个参数是一个：此方法执行检索与替换操作。它的第一个参数是一个正则表达式，第二个参数是要进行替换的字符串。正则表达式，第二个参数是要进行替换的字符串。 text.repla

19、ce(/javascript/gi, JavaScript); match()方法方法 ：是常用的：是常用的String方法，它唯一的参数就是一个正则表达方法，它唯一的参数就是一个正则表达式，返回的是包含了匹配结果的数组，如果正则表达式中含有式，返回的是包含了匹配结果的数组，如果正则表达式中含有g，返回，返回的数组包含的就是字符串中所有的匹配。的数组包含的就是字符串中所有的匹配。 1 plus 2 equals 3.match(/d+/g) /返回返回1, 2, 3 split() 方法：这个方法可以把调用它的字符串分解为一个子串数组，方法：这个方法可以把调用它的字符串分解为一个子串数组，使用

20、的分隔符是它的参数使用的分隔符是它的参数 。 123,456,789.split(, ) /返回返回123, 456, 789search()方法不支持全方法不支持全局匹配局匹配“g”课堂练习课堂练习 从字符串从字符串“遥远的东方有一群人，他们都是龙的传人！遥远的东方有一群人，他们都是龙的传人！”中找出中找出“龙的传人所在的位置龙的传人所在的位置”。直接字面量直接字面量 在正则表达式中所有的字母字符和数字都是按照直接量与自在正则表达式中所有的字母字符和数字都是按照直接量与自身匹配的。身匹配的。JavaScript的正则表达式语法还通过以反斜杠的正则表达式语法还通过以反斜杠“”开头的转义序列支持

21、某些非字母的字符，如换行符开头的转义序列支持某些非字母的字符，如换行符n。字符字符描述描述oNUL字符字符u000t制表符制表符u009n换行符换行符u000Av垂直制表符垂直制表符u000Bf换页符换页符u000Cr回车回车u000D字符类字符类 将单独的直接量字符放进方括号内就可以组成字符类，一个字符类和它将单独的直接量字符放进方括号内就可以组成字符类，一个字符类和它所包含的任何字符都匹配。所包含的任何字符都匹配。 如：如：/abc/：此正则与：此正则与“a”、“b”、“c”均匹配均匹配 。/a-zA-Z0-9/ ：匹配所有的字母和数字。：匹配所有的字母和数字。 正则表达式中的常用字符：正

22、则表达式中的常用字符：字符字符描述描述位于括号内的任何字符位于括号内的任何字符不位于括号内的任何字符不位于括号内的任何字符.除换行符和其他除换行符和其他Unicode行终止符外的任意字符行终止符外的任意字符w任何任何ASCII单字字符，等价单字字符，等价a-zA-Z0-9_W任何任何ASCII非单字字符，等价非单字字符，等价a-zA-Z0-9_s空白符空白符S非空白符非空白符d所有数字所有数字0-9D所有非数字所有非数字0-9匹配数字可写为：匹配数字可写为：/d/重复重复 使用正则表达式语法可以表示一个匹配重复出现的次数。如：使用正则表达式语法可以表示一个匹配重复出现的次数。如：/d2,4/ /与与2和和4之间的数字匹配之间的数字匹配/w3d?/ /与三个字符和一个数字匹配与三个字符和一个数字匹配/s+javas+/ /与字符串与字符串java匹配，并且该穿前后可以有一个或多个空格匹配，并且该穿前后可以有一个或多个空格/*/ /与零个或多个非引号字符匹配与零个或多个非引号字符匹配字符字符含义含义n, m匹配前一项至少匹配前一项至少n次，但是不能超过次，但是不能超过m次次n,匹配前一项至少匹配前一项至少n次，或更多次