Page 61 - JavaScript修炼之道
P. 61
50 第四部分 表单技巧
任务 22 表单验证:进阶技巧
前一个任务检查了必填项是否确实填上或者选中。这很好。不过,我们时常还需要文本域的
输入符合某种特定格式,比如电话号码、email地址、整数或者更一般的数字。这些文本域可能
已填写,但不符合格式,所以我们要尽可能预先查出来。这通常是对服务器端检查的补充,而服
务器端必定会再次做检查。
这一般都用正则表达式 来做,它十分清晰有效。如果你做程序开发直到现在还没有习惯正
①
则表达式,最好抽几个小时潜心研究一下,这会对你有很大的帮助。虽然正则表达式在新手看来
②
高深莫测,但是它们只有很少的语法 规则(大约有一打,学会其中一半通常就够用了)。学会“正
则式”会节省你无数的编码时间。网上有很多不错的交互式教程。
右页代码中的思路是,检测表单项的CSS class属性,进行对应的正则式检查。这里我只列
了三个正则表达式,你可以在FIELD_PATTERNS表里添加更多的键-值对以扩展其功能。为了防止
③
和纯粹主义者 多费口舌,我需要先做些解释。是的,这里写的表达式没有覆盖非十进制的数字,
小数的科学计数法,以及现在大约百分之0.1的email地址。不过别忘了,这个任务是讲表单域验
证,而不是讲正则表达式技巧。随便改这些式子以满足你的需要!
代码很简短明确,我只想阐明两点。第一, $F(element)函数其实是element.getValue()
的缩写。
第二,如果你曾在JavaScript里用过正则表达式的话,你很有可能是一直在用通用的
myString.match(myPattern)。这是可以的,因为如果没有匹配,它会返回null,否则会返回
匹配项(或者匹配组)的数组。但当你只想知道是否有匹配,而不关心匹配的具体内容时,就应
该反过来问这个问题——让正则表达式来test()那个String,这只返回Boolean值。
实际上test()更耐用:即使传给它的不是String的值,它也不会出问题。而在不是String
的值上调用match()的话,程序就会崩溃。还有个附带好处就是test()运行速度稍微快一点,我
自然想利用上这点性能,尤其是在这不会损失代码可读性(或者增加代码量)的情况下。
——————————
① 一个用来描述或者匹配一系列符合某个语法规则的字符串的单个字符串。在很多文本编辑器或其他工具里,正则
表达式通常被用来检索及替换那些符合某个模式的文本内容。许多程序设计语言都支持利用正则表达式进行字符
串操作。正则表达式的基本构造元素是:或(|)、重复(*)和优先级(())。*
② 也有译文法、句法的,指语言的构造规范。*
③ 希望保持一个东西的真正本质,而不掺和杂质或受到稀释的人。*