《《控制你的表单》ppt课件》由会员分享，可在线阅读，更多相关《《控制你的表单》ppt课件（16页珍藏版）》请在金锄头文库上搜索。
1、第9章 控制你的表单内容验证,上一章讲述了如何使用JavaScript操作窗口对象，讲解了窗口对象的各种事件、属性和方法。在网页和用户的交互过程中，表单是不可或缺的重要元素之一。用户通过表单提交信息给服务器，服务器处理这些信息并给出反馈。但是由于网络的延时，这个反馈会需要一个比较长的等待时间。如果用户的输入不符合要求，需要再次输入，那么就会使得这个过程非常冗长，造成很不好的用户体验。另一方面来说，反复的提交也会消耗服务器的资源。为了保证用户输入的信息的正确，可以使用JavaScript在表单提交前进行客户端的检验。,9.1 示例：表单数据的有效性验证,代码.htm是一个常见的注册页面，在提交前
2、，页面中的每个文本框或密码框内容都会被检验一遍，确保其符合要求。,9.2 用正则来判断复杂的文本规则,在处理字符串的时候，常常需要就其模式做一个判断。例如，一个可能的Email的字符串应该是以若干英文的数字或字母开始，连接上一个“”符号和一个域名的形式。如果按照一般的判断逻辑，识别一个字符串是否符合Email的格式将是一个非常复杂的工作，幸好JavaScript提供了正则表达式这么一个强有力的工具。,9.2.1 什么是正则,在平时的计算机操作中，读者可能已经遇到过一些字符串模式匹配的例子。比如当搜索某一个文件时，希望找到所有的Word文档时，可以在搜索栏的文件名中输入“*.doc”来匹配所有以
3、“.doc”结尾的文件名，“*”被称作通配符，用来匹配任意的字符串。正则表达式的作用类似于这种应用，但是功能上要强大得多，相应的语法也要比这种复杂。 正则表达式，Regular Expression（也称为“regex”或“regexp”），是一种用来描述文本模式的特殊语法。一个正则表达式由普通字符（例如字符“a”到“z”）以及特殊字符（称为元字符，如“”、“*”、“?”等）组成。简单地说，一个正则表达式就是你需要匹配的字符串。例如，正则表达式“A*B”匹配字符串“ACCCB”但是不匹配“ACCCC”。,9.2.2 正则的优势,为了便于读者感性的了解正则的强大，这里举一个例子。代码.htm是一
4、个判断用户输入是否符合“Email”地址格式的演示。,9.2.3 正则的格式和含义,JavaScript中，正则表达式是由两个斜杠“/”所包围的，由英文字母、数字和一些符号组成的，描述文本模式的表达式对象。例如： var reg01 = /abc/; var reg02 = /a1,2b/g; var reg03 = /a1,2b/ig; var reg04 = /u0391-uFFE5+$/i; 上面示例，第二个斜杠后的“ig”等是匹配模式，可选。可以取的值有三个：“i”、“g”和“m”，或者为这三者的组合。其含义为： （1）“i”为“ignore case”，即忽略大小写 （2）“g”为“
5、global search”，即全局搜索 （3）“m”为“multiline search”，即多行搜索,9.2.4 用RegExp函数创建正则对象,除了使用斜线“/”表示正则表达式外，还可以使用JavaScript内置的函数“RegExp”来生成正则表达式，其语法为： regObj = new RegExp(stringPattern, strFlags); “stringPattern”为必需的字符串型参数，描述需要匹配的模式。“strFlags”为可选参数，字符串类型变量，表示需要生成的正则对象的匹配模式，可以取的值有三个：“i”、“g”和“m”，或者为这三者的组合。 需要注意的是，由于
6、“RegExp”函数接受的模式描述为字符串的格式，因此同样的正则表达式在用斜线“/”生成和用“RegExp”生成的时候有时会有所区别。例如： reg1 = /w+/; reg2 = new RegExp(“w+”);,9.2.5 示例代码中正则的详细解释,根据上表9-1的内容，读者可以试着理解示例代码9-1.htm中所涉及的正则表达式的含义。 REG_VALIDATE“chn“ = /u0391-uFFE5+$/; REG_VALIDATE“age“ = /d1,3$/; REG_VALIDATE“tel“ = /(0?d2,3)|(0?d2,3-)?(0d2,3)|0d2,3-)?1-9d6
7、,7$/; REG_VALIDATE“email“ = /w+(-+.w+)*w+(-.w+)*.w+(-.w+)*$/; REG_VALIDATE“required“ = /.+/; （1）中文的正则表达式“u0391-uFFE5+$”。从左至右依次阅读该正则进行分析。“”表示从字符串开头处开始匹配，后面的方括号“”表示字符串中的文字必须属于该方括号中的一部分。方括号中的内容“u0391-uFFE5”是用unicode表示的字符（该范围中的字符是中文）。+”表示可以有1个或若干个中文字符，但不可以是空字符串。“$”表示字符串结尾。综上，此正则表达式的含义其实就是字符串从开始至结束必须全部为中
8、文，且字符串长度必须大于或等于1。 （2）年龄的正则表达式“d1,3$”中，“”和“$”含义如前所述。“d”表示数字“0”到“9”，“1,3”表示数字至少为一位，最多为三位。需要注意的是，逗号（“,”）左右两侧不可以有空格。读者可能发现，这个正则并不是很严格，比如“0”或者“999”这种不可能是年龄的数字也可以通过检验。请思考如果要限制输入的内容是“1”到“199”之间，此正则表达式应当如何书写？一个可能的写法是：/1d2|1-9d?/ （3）电话号码的正则表达式“(0?d2,3)|(0?d2,3-)?(0d2,3)|0d2,3-)?1-9d6,7$”的解读和前两者类似，比较易于理解。需要注意
9、的是，由于括号“()”在正则表达式中有着特殊的含义，在需要匹配括号本身时，需要使用反斜线将括号转义。也就是说，“(”代表的就是括号“(”这个字符本身。 （4）电子邮件的正则表达式“w+(-+.w+)*w+(-.w+)*.w+(-.w+)*$”中，“w”代表的是一个可打印的非标点符号的英文字符，即“a”到“z”、“A”到“Z”、“0”到“9”以及“_”，等同于“a-zA-Z0-9_”。,9.3 文本的编码和加密正则和字符串操作,仅仅通过上面的介绍，读者很难理解究竟应该如何使用正则表达式。下面将通过几个字符串的方法来演示如何操作正则表达式。正则最常见的应用有匹配和替换。,9.3.1 字符串的搜索、
10、匹配,字符串对象的方法中，“search”和“match”方法用来搜索字符串中对应的内容。 “search”方法的语法是： intIndex = stringObject.search(rgExp); 该方法接受的参数“rgExp”是一个需要搜索的正则表达式。该方法返回值是该匹配在此字符串对象中的索引位置，如果没有匹配的结果则返回“-1”。此方法类似于字符串对象的“indexOf”方法，区别在于，此方法接受正则表达式而不是字符串作为参数，此外“search”方法不像“indexOf”一样可以指定搜索的起始位置。 下面是一个简单的“search”方法使用示例： function SearchTe
11、st() var r, re; var s = “The quick brown FireFox jumps over a lazy dog.“; re = /firefox/i; r = s.search(re); return(r); ,9.3.2 字符串的替换,字符串对象有着“replace”方法，用来替换字符串中某些部分。“replace”方法的语法为： strValue = stringObject.replace(rgExp, replaceText); 参数“rgExp”是正则表达式，匹配需要替换的字符串。“replaceText”可以是字符串型变量，为替换的字符串。自Jscri
12、pt5.5以后的版本，“replaceText”参数也可以为一个函数对象，该函数应返回一个字符串。,9.4 正则对象的属性和方法,解决很多问题时，正则表达式的内容并不是固定的，不同的代码常常具有相同的效果。然而其效率并不一定相同，这恰是最考验程序员的地方。正则表达式对象作为JavaScript的对象，有着自己的属性和方法。善于合理利用这些属性和方法可以提高代码的效率。,9.4.1 正则对象的属性,正则表达式对象的属性有4个：“global”，“ignoreCase”，“multiline”和“source”。其引用的语法为： booleanValue = regObject.global; b
13、ooleanValue = regObject.ignoreCase; booleanValue = regObject.multiline; booleanValue = regObject.source; “global”属性返回一个布尔型变量，表示该正则表达式的所设置的“全局”属性，默认为假（“false”）。“ignoreCase”属性返回一个布尔型变量，表示该正则表达式的所设置的“忽略大小写”属性，默认为假（“false”）。“multiline”属性返回一个布尔型变量，表示该正则表达式的所设置的“多行模式”属性，默认为假（“false”）。“source”属性返回一个字符串型变量，
14、表示该正则表达式的模式所代表的字符。,9.4.2 正则对象的方法,正则表达式对象的方法有3个：“compile”、“exec”和“test”。 “compile”方法的语法为： regOpile(stringPattern, strFlags); 该方法接受的字符型参数“stringPattern”必需提供，为需要编译的正则表达式的字符形式。字符型参数“strFlags”可选，为该正则的匹配模式。可以取的值有三个：“i”、“g”和“m”，或者为这三者的组合。 “compile”方法用于将正则表达式编译为内置的格式，可以提高执行的速度，在循环体中使用的时候有更好的表现。例如在重用一个已编译的正则
15、对象的时候，需要的时间会大大减少，但如果正则表达式被改变则不会获得性能上的提高。,9.5 正则应用UBB代码转换,UBB代码是HTML的一个变种，是“Ultimate Bulletin Board”(国外一个BBS程序)采用的一种特殊的标记语言。相比于HTML代码，具有语法简单，安全可靠的特点，在很多论坛中被应用。代码9-8.htm是一个将UBB代码转换为HTML代码的例子。 代码说明： （1）出于安全性的考虑，在进行UBB到HTML的转换前，应当先将其中的大于号“”、小于号“$1“)”的结果是“黑体普通文本黑体”，而执行语句“replace(/b(.+)/b/ig,“$1“)”的结果是“黑体/b普通文本b黑体”。,9.6 小结,在处理表单等应用是，常需要对文本内容进行检验。正则表达式是JavaScript提供的一种非常有力的字符串处理工具，其可以以一种很简洁的方式完成对字符串模式的识别，执行判断、查找和替换等操作。本章介绍的知识点有： （1）正则表达式的意义 （2）正则表达式的书写规范 （3）正则表达式中特殊字符的含义 （4）字符串对象的“search”、“match”和“replace”方法 （5）正则对象的属性和方法,
