JS使用正则表达式实现常用的表单验证功能分析
本文实例讲述了JS使用正则表达式实现常用的表单验证功能。分享给大家供大家参考,具体如下:
表单验证是一个网站或应用的重点,一条合适的错误提示不仅可以减少无效信息录入,更会给用户留下良好的使用体验。但表单设计千差万别,用户输入更不可控。一方面,我们要减少出错提示(这会引起用户反感),而另一方面,我们则希望得到足够多的有效信息。鱼和熊掌如何兼得?
写一个简单的表单验证:https://www.nhooo.com/article/185782.htm
从Google中,我们可以找到一些实用的方法:
- 设计合适的提示信息;
- 正则表达式筛选错误输入。
如何将错误信息合适的展示给用户,我想是见仁见智,需要根据具体项目具体分析(参考淘宝、京东等电商设计)。这里主要讨论第二种方案:通过正则表达式最大限度的过滤用户输入
这里先列出我自己常用的正则表达式,然后在深入全面的学习它!
文本输入(拒绝表情):/^[\u4e00-\u9fa5\w]+.*$/gi
密码:/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/
中文地址(以中文开始,包含英文字符、数字、括号):/^([\u4e00-\u9fa5])+[\u4e00-\u9fa5a-zA-Z0-9()()]*$/
身份证:/^\d{6}(18|19|20)?\d{2}(0[1-9]|1[12])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/i
电子邮箱:/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
传真:/^(\d{3,4}-)?\d{7,8}$/
网址:/^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)*(([A-Za-z0-9-~]+)\.)+([A-Za-z0-9-~\/])+$/
座机:/^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}$/
手机:/^1[34578]\d{9}$/
邮编:/^[1-9][0-9]{5}$/
/** *@param{Object}$input需要验证的输入项 *@param{String}reg正则表达式 *@param{String}tips提示信息 */ functionisInfoValid($input,reg,tips){ varval=$input.val().trim(); if(val==''){ $input.next().remove(); $input.after('*'+$input.siblings("label").text().trim()+'不能为空!') } elseif(reg&&tips&&!reg.test(val)){ $input.next().remove(); $input.after(' '+tips+' ') }else{ $input.next().remove(); } } //可以这样使用 isInfoValid($zipCode,/^[1-9][0-9]{5}$/,'*请输入正确的邮编!');
有两种方法实例化RegExp对象
-
字面量
varreg=/\bis\b/g;//全局匹配单词is
-
构造函数
varreg=newRegEXP('\\bis\\b',g)
-
g:global全文搜索,不添加,搜索到第一个匹配停止默认false,只读
-
i:ignorecase忽略大小写,默认false,只读
-
m:multiplelines多行搜索默认false,只读
-
lastIndex:是当前表达式匹配内容的最后一个字符的下一个位置
-
source:正则表达式的文本字符串
>varreg1=/\w/gim; >reg1.source <"\w"
正则表达式由两种基本字符类型组成:
-
原义文本字符
a,b,c,d..
-
元字符
*+?$^.|\(){}[]
\t 水平制表符 \v 垂直制表符 \n 换行符 \r 回车符 \0 空字符 \f 换页符
- 我们可以使用元字符[]来构建一个简单的类
所谓类是指符合某些特征的对象,一个泛指,不是特指某个字符
表达式[abc]把字符a或b或c归为一类,表达式可以匹配这类字符
- 字符取反(^)
使用元字符^创建反向类
表达式[^abc]表示不是字符a或b或c的内容
-
使用[a-z]来连接两个字符表示从a到z的任意字符,闭区间,包含a和z本身
>'a1b2c3b4'.replace(/[a-z]/g,'Q'); <"Q1Q2Q3Q4"
-
范围类可以连写[a-zA-Z]
>'2015-11-5'.replace(/[0-9-]/g,'A') <"AAAAAAAAA"
字符 | 等价类 | 含义 |
---|---|---|
. | [^\r\n] | 除了回车符和换行符以外的所有字符 |
\d | [0-9] | 数字字符 |
\D | [^0-9] | 非数字字符 |
\s | [\t\n\x0B\f\r] | 空白字符 |
\w | [a-zA-Z_0-9] | 单词字符(字母数字下划线) |
\W | [^a-zA-Z0-9_] | 非单词字符 |
字符 | 含义 |
---|---|
? | 出现零次或一次(最多出现1次) |
+ | 出现一次或多次 |
* | 出现零次或多次(任意 |
{n} | 出现n次 |
{n,m} | 出现n到m次 |
{n,} | 至少出现n次 |
在正则表达式中,默认尽可能多的匹配
>'1234678'.replace(/\d{3,6}/g,'X') <"X78"
让正则表达谁尽可能少的匹配,也就是说一旦成功匹配就不再继续尝试
做法很简单,在量词后面加一个?即可
>'123456789'.match(/\d{3,5}?/g) <["123","456","789"]
使用()可以达到分组的功能,使量词作用于分组
>'fayfayfayfsd'.replace(/(fay){3}/g,'X') <"Xfsd"
使用|表示或
>'ByronCasper'.replace(/Byron|Casper/g,'X') <"XX"
- 注意:一定要加(),用$捕获分组
>'2016-11-05'.replace(/(\d{4})-(\d{2})-(\d{2})/g,'$2-$3-$1') <"05-11-2016"
-
忽略分组
不希望捕获某些分组,只需要在分组内加上?:
(?:Byron).(ok)
PS:这里再为大家提供2款非常方便的正则表达式工具供大家参考使用:
JavaScript正则表达式在线测试工具:
http://tools.jb51.net/regex/javascript
正则表达式在线生成工具:
http://tools.jb51.net/regex/create_reg
更多关于jQuery相关内容可查看本站专题:《jQuery正则表达式用法总结》、《jQuery字符串操作技巧总结》、《jQuery操作xml技巧总结》、《jQuery扩展技巧总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》
希望本文所述对大家jQuery程序设计有所帮助。