日期: 2020-06-22 17:49:16
本文实例讲述了JS使用正则表达式实现常用的表单验证功能。分享给大家供大家参考，具体如下：
表单验证是一个网站或应用的重点，一条合适的错误提示不仅可以减少无效信息录入，更会给用户留下良好的使用体验。但表单设计千差万别，用户输入更不可控。一方面，我们要减少出错提示（这会引起用户反感），而另一方面，我们则希望得到足够多的有效信息。鱼和熊掌如何兼得？
写一个简单的表单验证:https://www.jb51.net/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 提示信息
*/
function isInfoValid($input, reg, tips) {
var val = $input.val().trim();
if(val == '') {
$input.next().remove();
$input.after('<span class="valid-error">*'+$input.siblings("label").text().trim()+'不能为空！<span>')
}
else if(reg && tips && !reg.test(val)) {
$input.next().remove();
$input.after('<span class="valid-error">'+ tips +'</span>')
}else {
$input.next().remove();
}
}
// 可以这样使用
isInfoValid($zipCode, /^[1-9][0-9]{5}$/, '*请输入正确的邮编！');
有两种方法实例化RegExp对象
字面量
var reg = /\bis\b/g; // 全局匹配单词is
构造函数
var reg = new RegEXP('\\bis\\b',g)
g：global全文搜索，不添加，搜索到第一个匹配停止 默认false，只读
i：ignore case 忽略大小写， 默认false，只读
m：multiple lines 多行搜索 默认false，只读
lastIndex： 是当前表达式匹配内容的最后一个字符的下一个位置
source：正则表达式的文本字符串
> var reg1 = /\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_] | 非单词字符 |
| 字符 | 含义 |
|---|---|
| ^ | 以XXXXX开始 |
| $ | 以xxxx结束 |
| \b | 单词边界 |
| \B | 非单词边界 |
| 字符 | 含义 |
|---|---|
| ？ | 出现零次或一次（最多出现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程序设计有所帮助。
