JS使用正则表达式实现常用的表单验证功能分析
本文实例讲述了JS使用正则表达式实现常用的表单验证功能。分享给大家供大家参考，具体如下：
表单验证是一个网站或应用的重点，一条合适的错误提示不仅可以减少无效信息录入，更会给用户留下良好的使用体验。但表单设计千差万别，用户输入更不可控。一方面，我们要减少出错提示（这会引起用户反感），而另一方面，我们则希望得到足够多的有效信息。鱼和熊掌如何兼得？
写一个简单的表单验证:https://www.jb51.net/article/185782.htm
从Google中，我们可以找到一些实用的方法：
- 设计合适的提示信息；
- 正则表达式筛选错误输入。
如何将错误信息合适的展示给用户，我想是见仁见智，需要根据具体项目具体分析（参考淘宝、京东等电商设计）。这里主要讨论第二种方案：通过正则表达式最大限度的过滤用户输入
这里先列出我自己常用的正则表达式，然后在深入全面的学习它！
常用正则表达式
文本输入（拒绝表情）：/^[\u4e00-\u9fa5\w]+.*$/gi
密码： 有两种方法实例化 字面量 构造函数 g：global全文搜索，不添加，搜索到第一个匹配停止 默认false，只读 i：ignore case 忽略大小写， 默认false，只读 m：multiple lines 多行搜索 默认false，只读 lastIndex： 是当前表达式匹配内容的最后一个字符的下一个位置 source：正则表达式的文本字符串/^("通用验证信息提示函数">通用验证信息提示函数
/**
* @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}$/, '*请输入正确的邮编！');
深入学习正则表达式
1. RegExp对象
RegExp对象
var reg = /\bis\b/g; // 全局匹配单词isvar reg = new RegEXP('\\bis\\b',g)2. 修饰符
> var reg1 = /\w/gim;
> reg1.source
< "\w"
3. 元字符
正则表达式由两种基本字符类型组成：
-
原义文本字符
a,b,c,d..
-
元字符
*+？$ ^ . | \ （ ）{ } [ ]
\t 水平制表符 \v 垂直制表符 \n 换行符 \r 回车符 \0 空字符 \f 换页符
4. 字符类
- 我们可以使用元字符 [] 来构建一个简单的类
所谓类是指符合某些特征的对象，一个泛指，不是特指某个字符
表达式
[abc]把字符a或b或c归为一类，表达式可以匹配这类字符
- 字符取反（^）
使用元字符 ^ 创建反向类
表达式
[^abc]表示 不是字符a或b或c的内容
5. 范围类
-
使用[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"