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

第六章JavaScript表单验证第六章JavaScript表单验证1本章案例字符串验证数字验证email验证本章案例字符串验证2本章目标了解客户端验证的优点掌握基本的字符串验证掌握基本的数字验证掌握常用的正则表达式验证本章目标了解客户端验证的优点3预习检查提问客户端验证的优点是什么？如何验证字符串是否为空？如何验证一个值是否为数字类型？Email正则表达式如何书写？预习检查提问客户端验证的优点是什么？4客户端验证优点:当用户输入错误数据时，页面不需要重新加载，可以保持用户输入的数据状态，所以不要要再一次输入所有数据，只输入错误数据即可。减轻了服务器端通信压力，因为发生错误的时候并没有数据往返到服务器端。使得用户界面响应更加迅速，因为可以立刻为用户提供反馈信息。缺点：JavaScript不能作为唯一的验证方法(JavaScript可能不可用，甚至可能被故意关闭以阻止进行验证)。这可能会产生这样一个错觉，验证输入数据是非常简单的过程。其实不是这样，而且它对产品的安全性和可用性都是非常关键的。除非在客户端和服务器端使用了相同的验证规则，否则就意味着当验证规则发生一处变化的时候，需要进行两次维护。

客户端验证优点:5全能的验证神话每个开发框架或集成开发工具都提供了承诺可以帮你解决任何问题的通用表单验证方法。但是大多数都是令人费解或者没有实现所承诺的效果，许多客户端验证和已有的解决方案最大的错误就是没有考虑地域或行业的差异性。所以需要编写最适合自己的验证脚本。例如：英国的邮政编码类似于N165UN，而美国的邮编则为12345或-1234。一般的客户端验证都有两个最为主要的验证：字符串验证和数字验证。全能的验证神话每个开发框架或集成开发工具都提供了承诺可以帮你6字符串基本验证字符串常用方法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之间的字符串。字符串基本验证字符串常用方法7字符串基本验证验证一个字符串是否为空。functionvalidate(){

vartext=document.getElementById('text').value;

if(text==null||text==''){

alert('请输入一个字符串！'); }else{

alert('你输入的字符串是：'+text); }}判断字符串是否为空演示程序示例1.html字符串基本验证验证一个字符串是否为空。functionva8字符串基本验证在表单提交时验证文本框中输入的值是否为数字。分析如果字符串中包含有负号，则必须在第一位。如果字符串中包含有小数点，则只能有一个。每一位字符的ASCII码所在范围均为<48并且>57并且不等于45及46。字符串基本验证在表单提交时验证文本框中输入的值是否为数字。分9字符串基本验证if(num==null||num==''){ alert('请输入一个字符串!');returnfalse; }//验证字符串中若包含负号，是否在首位if(num.indexOf('-')!=-1&&num.substr(0,1)||

num.lastIndexOf('-')!=num.indexOf('-')){ alert('负号只可以出现在数字的第一位！');returnfalse;}//验证字符串中若包含小数点，是否仅有一个且不在首尾if(num.indexOf('.')!=-1&&num.indexOf('.')!=

num.lastIndexOf('.')){ alert('数字中只能有一个小数点！');returnfalse;}验证负号验证小数点字符串基本验证if(num==null||num10字符串基本验证for(i=0;i<num.length;i++){

currentCode=num.charCodeAt(i);//截取一个字符的ASCII

if(currentCode!=45&¤tCode!=46&&

currentCode<48||currentCode>57){ alert("只允许输入数字！");returnfalse; }}returntrue;//提交表单循环遍历每一个字符验证每一个字符是否为数字停止表单提交演示程序示例2.html字符串基本验证for(i=0;i<num.len11数字验证Number()：将括号内的值转换为数字。isNaN(n)：检验n是否为数字(整数或者浮点型)。parseInt()：将字符串转换为整数(只转换从左侧第一位开始的数字值，非数字值不做转换，若第一位既为非数字值，返回NaN)。parsetFloat()：将字符串转换为浮点数(转换方式与parseInt类似)。数字验证Number()：将括号内的值转换为数字。12数字验证使用数字验证方法验证一个字符串是否为数字。分析使用isNaN()方法进行验证。方法返回值为true则是数字。数字验证使用数字验证方法验证一个字符串是否为数字。分析使用i13数字验证functionvalidate(){ varnum=document.getElementById('number'); if(isNaN(num)){ alert('你输入的不是数字！');

returnfalse; } returntrue;}判断是否为数字演示程序示例3.html数字验证functionvalidate(){判断是否为14课堂练习使用字符串常用方法验证一个字符串是否为邮件格式。课堂练习使用字符串常用方法验证一个字符串是否为邮件格式。15正则表达式正则表达式是用于描述复杂规则的工具。是记录文本规则的代码。正则表达式类似于通配符“*”和“?”，都是用来进行文本匹配，但是正则表达式可以匹配更为复杂的文本。正则表达式正则表达式是用于描述复杂规则的工具。是记录文本规则16正则表达式入门正则表达式的定义方式：假设：想要从字符串中匹配cat这个单词，正则表达式可以采用如下两种方式：varsearchTerm=/cat/;varsearchTerm=newRegExp(‘cat’);第一种定义方式中“/”代表正则的开始和结束，中间的cat表示要匹配的内容。第二种定义方式中RegExp为JavaScript内置的正则对象，可以使用new的方式获取一个正则对象，与第一种写法效果相同。这两种正则能够匹配任意含有cat这个单词的所有字符串如：catalog、tomcat、scat等正则表达式入门正则表达式的定义方式：17正则表达式入门限定cat出现位置的正则表达式写法：varsearchTerm=/^cat$/;varsearchTerm=newRegExp(‘^cat$’);以上两种定义方式分别使用了“^”及“$”对正则对象进行限制，“^”表示从字符串的开始部分进行匹配，“$”表示匹配至字符串的结束部分。两个符号同时使用如/^cat$/则表示完全匹配，即这个正则只能匹配“cat”这个字符串。若只想匹配开始部分，则可以写为：varsearchTerm=/^cat/;varsearchTerm=newRegExp(‘^cat’);正则表达式入门限定cat出现位置的正则表达式写法：18正则表达式入门在验证英文字符串时，经常会不区分大小写进行匹配，此时正则表达式的定义如下：varsearchTerm=/cat/i;varsearchTerm=newRegExp(‘cat’,‘i’);在正则表达式中，使用字母“i”表示不区分大小写进行匹配。如上定义后，以下单词均可匹配：TomCAT、CaTalog、SCAt正则表达式入门在验证英文字符串时，经常会不区分大小写进行匹配19正则表达式入门在一个字符串中搜索所有重复的匹配是比较常用的功能，使用正则定义全局匹配如下：varsearchTerm=/cat/g;varsearchTerm=newRegExp(‘cat’,‘g’);字符‘g’表示使用该正则在字符串中进行全局匹配，返回字符串中所有符合正则的所有字符串数组。正则表达式入门在一个字符串中搜索所有重复的匹配是比较常用的功20正则表达式入门正则表达式的使用:字符串对象提供了四种方法对正则表达式进行匹配，分别是：search()：该方法以正则表达式为参数，返回第一个与之匹配的子串的位置，如果没有任何匹配，则返回-1，例如，下面的调用返回值为4。"JavaScript".search(/script/i);replace()方法：此方法执行检索与替换操作。它的第一个参数是一个正则表达式，第二个参数是要进行替换的字符串。text.replace(/javascript/gi,'JavaScript');

match()方法：是常用的String方法，它唯一的参数就是一个正则表达式，返回的是包含了匹配结果的数组，如果正则表达式中含有g，返回的数组包含的就是字符串中所有的匹配。"1plus2equals3".match(/\d+/g)//返回{'1','2','3'}split()方法：这个方法可以把调用它的字符串分解为一个子串数组，使用的分隔符是它的参数。'123,456,789'.split(',')//返回['123','456','789']search()方法不支持全局匹配“g”正则表达式入门正则表达式的使用:search()方法不支持全21课堂练习从字符串“遥远的东方有一群人，他们都是龙的传人！”中找出“龙的传人所在的位置”。课堂练习从字符串“遥远的东方有一群人，他们都是龙的传人！”中22直接字面量在正则表达式中所有的字母字符和数字都是按照直接量与自身匹配的。JavaScript的正则表达式语法还通过以反斜杠“\”开头的转义序列支持某些非字母的字符，如换行符\n。字符描述\oNUL字符\u000\t制表符\u009\n换行符\u000A\v垂直制表符\u000B\f换页符\u000C\r回车\u000D直接字面量在正则表达式中所有的字母字符和数字都是按照直接量与23字符类将单独的直接量字符放进方括号内就可以组成字符类，一个字符类和它所包含的任何字符都匹配。如：/[abc]/：此正则与“a”、“b”、“c”均匹配。/[a-zA-Z0-9]/：匹配所有的字母和数字。正则表达式中的常用字符：字符描述[…]位于括号内的任何字符[^…]不位于括号内的任何字符.除换行符和其他Unicode行终止符外的任意字符\w任何ASCII单字字符，等价[a-zA-Z0-9_]\W任何ASCII非单字字符，等价[^a-zA-Z0-9_]\s空白符\S非空白符\d所有数字[0-9]\D所有非数字[^0-9]匹配数字可写为：/\d/字符类将单独的直接量字符放进方括号内就可以组成字符类，一个字24重复使用正则表达式语法可以表示一个匹配重复出现的次数。如：/\d{2,4}///与2和4之间的数字匹配/\w{3}\d?///与三个字符和一个数字匹配/\s+java\s+///与字符串java匹配，并且该穿前后可以有一个或多个空格/[^’’]*///与零个或多个非引号字符匹配字符含义{n,m}匹配前一项至少n次，但是不能超过m次{n,}匹配前一项至少n次，或更多次{n}匹配前一项正好n次?匹配前一项0次或1次，等价于{0,1}*匹配前一项0次或多次，等价于{0,}+匹配前一项1次或多次，等价于{1,}重复使用正则表达式语法可以表示一个匹配重复出现的次数。如：字25课堂练习编写一个正则表达式，可以用来验证目标字符串中至少重复出现1次以上“override”。课堂练习编写一个正则表达式，可以用来验证目标字符串中至少重复26电子邮件正则电子邮件验证是一个比较常用而且写法多样的正则。没有统一的书写标准。functionisValidMail(sText){ //邮箱正则

varreMail=/^(?:\w+\.?)*\w+@(?:\w+\.)+\w+$/; //这里使用正则对象的test方法进行匹配

alert(reMail.test(sText)); }以字母、数字、下划线开头，中间可以包含“.”符号。必须包含1个@符号且前面至少有一个字符以母数字或下划线结尾这里的email正则表达式是作为学习使用的，真实应用中需要书写更为详细复杂的验证。演示程序示例4.html电子邮件正则电子邮件验证是一个比较常用而且写法多样的正则。没27总结如何验证字符串为空？验证字符串为数字类型的关键是什么？什么是正则表达式？忽略大小写的正则表达式要用到哪个字符？总结如何验证字符串为空？28作业作业29ThankYou!ThankYou!30第六章JavaScript表单验证第六章JavaScript表单验证31本章案例字符串验证数字验证email验证本章案例字符串验证32本章目标了解客户端验证的优点掌握基本的字符串验证掌握基本的数字验证掌握常用的正则表达式验证本章目标了解客户端验证的优点33预习检查提问客户端验证的优点是什么？如何验证字符串是否为空？如何验证一个值是否为数字类型？Email正则表达式如何书写？预习检查提问客户端验证的优点是什么？34客户端验证优点:当用户输入错误数据时，页面不需要重新加载，可以保持用户输入的数据状态，所以不要要再一次输入所有数据，只输入错误数据即可。减轻了服务器端通信压力，因为发生错误的时候并没有数据往返到服务器端。使得用户界面响应更加迅速，因为可以立刻为用户提供反馈信息。缺点：JavaScript不能作为唯一的验证方法(JavaScript可能不可用，甚至可能被故意关闭以阻止进行验证)。这可能会产生这样一个错觉，验证输入数据是非常简单的过程。其实不是这样，而且它对产品的安全性和可用性都是非常关键的。除非在客户端和服务器端使用了相同的验证规则，否则就意味着当验证规则发生一处变化的时候，需要进行两次维护。

客户端验证优点:35全能的验证神话每个开发框架或集成开发工具都提供了承诺可以帮你解决任何问题的通用表单验证方法。但是大多数都是令人费解或者没有实现所承诺的效果，许多客户端验证和已有的解决方案最大的错误就是没有考虑地域或行业的差异性。所以需要编写最适合自己的验证脚本。例如：英国的邮政编码类似于N165UN，而美国的邮编则为12345或-1234。一般的客户端验证都有两个最为主要的验证：字符串验证和数字验证。全能的验证神话每个开发框架或集成开发工具都提供了承诺可以帮你36字符串基本验证字符串常用方法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之间的字符串。字符串基本验证字符串常用方法37字符串基本验证验证一个字符串是否为空。functionvalidate(){

vartext=document.getElementById('text').value;

if(text==null||text==''){

alert('请输入一个字符串！'); }else{

alert('你输入的字符串是：'+text); }}判断字符串是否为空演示程序示例1.html字符串基本验证验证一个字符串是否为空。functionva38字符串基本验证在表单提交时验证文本框中输入的值是否为数字。分析如果字符串中包含有负号，则必须在第一位。如果字符串中包含有小数点，则只能有一个。每一位字符的ASCII码所在范围均为<48并且>57并且不等于45及46。字符串基本验证在表单提交时验证文本框中输入的值是否为数字。分39字符串基本验证if(num==null||num==''){ alert('请输入一个字符串!');returnfalse; }//验证字符串中若包含负号，是否在首位if(num.indexOf('-')!=-1&&num.substr(0,1)||

num.lastIndexOf('-')!=num.indexOf('-')){ alert('负号只可以出现在数字的第一位！');returnfalse;}//验证字符串中若包含小数点，是否仅有一个且不在首尾if(num.indexOf('.')!=-1&&num.indexOf('.')!=

num.lastIndexOf('.')){ alert('数字中只能有一个小数点！');returnfalse;}验证负号验证小数点字符串基本验证if(num==null||num40字符串基本验证for(i=0;i<num.length;i++){

currentCode=num.charCodeAt(i);//截取一个字符的ASCII

if(currentCode!=45&¤tCode!=46&&

currentCode<48||currentCode>57){ alert("只允许输入数字！");returnfalse; }}returntrue;//提交表单循环遍历每一个字符验证每一个字符是否为数字停止表单提交演示程序示例2.html字符串基本验证for(i=0;i<num.len41数字验证Number()：将括号内的值转换为数字。isNaN(n)：检验n是否为数字(整数或者浮点型)。parseInt()：将字符串转换为整数(只转换从左侧第一位开始的数字值，非数字值不做转换，若第一位既为非数字值，返回NaN)。parsetFloat()：将字符串转换为浮点数(转换方式与parseInt类似)。数字验证Number()：将括号内的值转换为数字。42数字验证使用数字验证方法验证一个字符串是否为数字。分析使用isNaN()方法进行验证。方法返回值为true则是数字。数字验证使用数字验证方法验证一个字符串是否为数字。分析使用i43数字验证functionvalidate(){ varnum=document.getElementById('number'); if(isNaN(num)){ alert('你输入的不是数字！');

returnfalse; } returntrue;}判断是否为数字演示程序示例3.html数字验证functionvalidate(){判断是否为44课堂练习使用字符串常用方法验证一个字符串是否为邮件格式。课堂练习使用字符串常用方法验证一个字符串是否为邮件格式。45正则表达式正则表达式是用于描述复杂规则的工具。是记录文本规则的代码。正则表达式类似于通配符“*”和“?”，都是用来进行文本匹配，但是正则表达式可以匹配更为复杂的文本。正则表达式正则表达式是用于描述复杂规则的工具。是记录文本规则46正则表达式入门正则表达式的定义方式：假设：想要从字符串中匹配cat这个单词，正则表达式可以采用如下两种方式：varsearchTerm=/cat/;varsearchTerm=newRegExp(‘cat’);第一种定义方式中“/”代表正则的开始和结束，中间的cat表示要匹配的内容。第二种定义方式中RegExp为JavaScript内置的正则对象，可以使用new的方式获取一个正则对象，与第一种写法效果相同。这两种正则能够匹配任意含有cat这个单词的所有字符串如：catalog、tomcat、scat等正则表达式入门正则表达式的定义方式：47正则表达式入门限定cat出现位置的正则表达式写法：varsearchTerm=/^cat$/;varsearchTerm=newRegExp(‘^cat$’);以上两种定义方式分别使用了“^”及“$”对正则对象进行限制，“^”表示从字符串的开始部分进行匹配，“$”表示匹配至字符串的结束部分。两个符号同时使用如/^cat$/则表示完全匹配，即这个正则只能匹配“cat”这个字符串。若只想匹配开始部分，则可以写为：varsearchTerm=/^cat/;varsearchTerm=newRegExp(‘^cat’);正则表达式入门限定cat出现位置的正则表达式写法：48正则表达式入门在验证英文字符串时，经常会不区分大小写进行匹配，此时正则表达式的定义如下：varsearchTerm=/cat/i;varsearchTerm=newRegExp(‘cat’,‘i’);在正则表达式中，使用字母“i”表示不区分大小写进行匹配。如上定义后，以下单词均可匹配：TomCAT、CaTalog、SCAt正则表达式入门在验证英文字符串时，经常会不区分大小写进行匹配49正则表达式入门在一个字符串中搜索所有重复的匹配是比较常用的功能，使用正则定义全局匹配如下：varsearchTerm=/cat/g;varsearchTerm=newRegExp(‘cat’,‘g’);字符‘g’表示使用该正则在字符串中进行全局匹配，返回字符串中所有符合正则的所有字符串数组。正则表达式入门在一个字符串中搜索所有重复的匹配是比较常用的功50正则表达式入门正则表达式的使用:字符串对象提供了四种方法对正则表达式进行匹配，分别是：search()：该方法以正则表达式为参数，返回第一个与之匹配的子串的位置，如果没有任何匹配，则返回-1，例如，下面的调用返回值为4。"JavaScript".search(/script/i);replace()方法：此方法执行检索与替换操作。它的第一个参数是一个正则表达式，第二个参数是要进行替换的字符串。text.replace(/javascript/gi,'JavaScript');

match()方法：是常用的String方法，它唯一的参数就是一个正则表达式，返回的是包含了匹配结果的数组，如果正则表达式中含有g，返回的数组包含的就是字符串中所有的匹配。"1plus2equals3".match(/\d+/g)//返回{'1','2','3'}split()方法：这个方法可以把调用它的字符串分解为一个子串数组，使用的分隔符是它的参数。'123,456,789'.split(',')//返回['123','456','789']search()方法不支持全局匹配“g”正则表达式入门正则表达式的使用:search()方法不支持全51课堂练习从字符串“遥远的东方有一群人，他们都是龙的传人！”中找出“龙的传人所在的位置”。课堂练习从字符串“遥远的东方有一群人，他们都是龙的传人！”中52直接字面量在正则表达式中所有的字母字符和数字都是按照直接量与自身匹配的。JavaScript的正则表达式语法还通过以反斜杠“\”开头的转义序列支持某些非字母的字符，如换行符\n。字符描述\oNUL字符\u000\t制表符\u009\n换行符\u000A\v垂直制表符\u000B\f换页符\u000C\r回车\u000D直接字面量在正则表达式中所有的字母字符和数字都是按照直接量与53