第9节 控制你的表单.ppt

第9章 控制你的表单－内容验证 上一章讲述了如何使用JavaScript操作窗口对象，讲解了窗口对象的各种事件、属性和方法。在网页和用户的交互过程中，表单是不可或缺的重要元素之一。用户通过表单提交信息给服务器，服务器处理这些信息并给出反馈。但是由于网络的延时，这个反馈会需要一个比较长的等待时间。如果用户的输入不符合要求，需要再次输入，那么就会使得这个过程非常冗长，造成很不好的用户体验。另一方面来说，反复的提交也会消耗服务器的资源。为了保证用户输入的信息的正确，可以使用JavaScript在表单提交前进行客户端的检验。 9.1 示例：表单数据的有效性验证 代码.htm是一个常见的注册页面，在提交前，页面中的每个文本框或密码框内容都会被检验一遍，确保其符合要求。 9.2 用正则来判断复杂的文本规则 在处理字符串的时候，常常需要就其模式做一个判断。例如，一个可能的Email的字符串应该是以若干英文的数字或字母开始，连接上一个“@”符号和一个域名的形式。如果按照一般的判断逻辑，识别一个字符串是否符合Email的格式将是一个非常复杂的工作，幸好JavaScript提供了正则表达式这么一个强有力的工具。 9.2.1 什么是正则 在平时的计算机操作中，读者可能已经遇到过一些字符串模式匹配的例子。比如当搜索某一个文件时，希望找到所有的Word文档时，可以在搜索栏的文件名中输入“*.doc”来匹配所有以“.doc”结尾的文件名，“*”被称作通配符，用来匹配任意的字符串。正则表达式的作用类似于这种应用，但是功能上要强大得多，相应的语法也要比这种复杂。 正则表达式，Regular Expression（也称为“regex”或“regexp”），是一种用来描述文本模式的特殊语法。一个正则表达式由普通字符（例如字符“a”到“z”）以及特殊字符（称为元字符，如“\”、“*”、“?”等）组成。简单地说，一个正则表达式就是你需要匹配的字符串。例如，正则表达式“A*B”匹配字符串“ACCCB”但是不匹配“ACCCC”。 9.2.2 正则的优势 为了便于读者感性的了解正则的强大，这里举一个例子。代码.htm是一个判断用户输入是否符合“Email”地址格式的演示。 9.2.3 正则的格式和含义 JavaScript中，正则表达式是由两个斜杠“/”所包围的，由英文字母、数字和一些符号组成的，描述文本模式的表达式对象。例如： var reg01 = /abc/; var reg02 = /a{1,2}b/g; var reg03 = /a{1,2}b/ig; var reg04 = /^[\u0391-\uFFE5]+$/i; 上面示例，第二个斜杠后的“ig”等是匹配模式，可选。可以取的值有三个：“i”、“g”和“m”，或者为这三者的组合。其含义为： （1）“i”为“ignore case”，即忽略大小写 （2）“g”为“global search”，即全局搜索 （3）“m”为“multiline search”，即多行搜索 9.2.4 用RegExp函数创建正则对象 除了使用斜线“/”表示正则表达式外，还可以使用JavaScript内置的函数“RegExp”来生成正则表达式，其语法为： regObj = new RegExp(stringPattern, [strFlags]); “stringPattern”为必需的字符串型参数，描述需要匹配的模式。“strFlags”为可选参数，字符串类型变量，表示需要生成的正则对象的匹配模式，可以取的值有三个：“i”、“g”和“m”，或者为这三者的组合。 需要注意的是，由于“RegExp”函数接受的模式描述为字符串的格式，因此同样的正则表达式在用斜线“/”生成和用“RegExp”生成的时候有时会有所区别。例如： reg1 = /\w+/; reg2 = new RegExp(“\\w+”); 9.2.5 示例代码中正则的详细解释 根据上表9-1的内容，读者可以试着理解示例代码9-1.htm中所涉及的正则表达式的含义。 REG_VALIDATE[chn] = /^[\u0391-\uFFE5]+$/; REG_VALIDATE[age] = /^\d{1,3}$/; REG_VALIDATE[tel] = /^((\(0?\d{2,3}\))|(0?\d{2,3}\-))?(\(0\d{2,3}\)|0\d{2,3}-)?[1-9]\d{6,7}$/; REG_VALIDATE[email] = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/; REG_VALIDATE[required] = /.+/; （1）中文的正则表达式“^[\u0391-\uFFE5]+$