这里为了方便学习呢,首先我们先来认识一下正则。
了解正则
正则表达式是对字符串操作的一种逻辑公式,就是用事先定义好的一些特定字符、及这些特定字符的组合,组成一个“规则字符串”,这个“规则字符串”用来表达对字符串的一种过滤逻辑。
正则表达式在代码中常被简写为regex,regexp或者RE。
我们可以自己定制自己需要的一些正则表达式,从了解正则创建开始。
1.给定的字符串是否符合正则表达式的过滤逻辑(称作“匹配”)。
2.可以通过正则表达式,从字符串中获取我们想要的特定部分。
- 通过new关键字创建正则
var box = new RegExp("hello", "ig");
- 省略new关键字创建正则
var box = RegExp("hello", "ig");
- 省略new关键字创建正则
var box = /hello/ig; alert(box); // /hello/gi;
此处是不是对ig、gi产生了疑问?
没关系,我们马上来进行介绍。
正则表达式常用的修饰符
i 忽略大小写 // g 全局匹配 // m 换行匹配(遇到换行字符,自动重新计算行首)
我们需要知道必会的正则元字符(如下图)
接下来需要了解正则的一些基本方法
- test方法;
格式:正则.test(字符串);
功能:在字符串中匹配正则是否存在;
返回值:如果存在返回true
如果不存在就返回false
var str = "how aRe you";
var box = /are/i;
alert(box.test(str));
// 该输出结果为true 说明存在。
- exec方法;
格式:正则.exec(字符串)
功能:在字符串中匹配正则是否存在;
返回值:如果存在返回一个数组,数组里面存放着匹配的内容;
如果不存在,返回null;
var str = "how aRe you";
var box = /are/i;
alert(box.exec(str).length);
// 该输出结果为1 说明存在。
好,接下来步入正题。
正则判断的案例
【注】可以参照上图进行比对理解
1.验证邮政编码
var box = /^[1-9]\d{5}$/;
alert(box.test("100000")); // true
alert(box.test("018000")); // false
2.判断文件类型是否为压缩包(zip|rar|rg)
var box = /^\w+\.(zip|rar|rg)$/i;
alert(box.test("1.zip"));
alert(box.test("333.rar"));
3.匹配一个字符串是纯中文组成的字符串
var box = /^[\u4e00-\u9fa5]+$/;
alert(box.test("我是中国人为武汉加油"));
看了上述案例你是否对正则判断有了些许了解呢?
废话不多说,接下来我们看一个稍微复杂的案例,并且进行实际的应用吧~!
邮箱验证&密码强度验证
开始之前,我们需要先了解一下邮箱验证的步骤以及密码强度验证的步骤
邮箱验证
1.我们需要用到的事件
失去焦点事件 onblur
,当输入框失去焦点的时候开始进行判断
2.一般邮箱的判断条件(我们这里参照163邮箱)
长度范围:6~18个字符;
邮箱地址:必须已英文字母开头;
邮箱规范:必须由字符、数字和下划线组成;
当我们所有条件都满足的时候,需要将提示信息修改为该邮件地址可注册,使得用户知道邮箱验证通过。
接下来我们开始编写代码
body部分,一个简单的页面结构
<div id='div1'>
<input id='username' type="text" placeholder="用户名" />
<!-- span 用于提示信息 -->
<span id='username_span'>6~18个字符,可使用字母、数字、下划线,需以字母开头</span>
<input id='password' type="password" placeholder="密码" />
<div id='test'>
<span>弱</span>
<span>中</span>
<span>强</span>
</div>
</div>
我们从邮箱验证开始,首先获取到邮箱输入框以及提示信息span标签
window.onload = function () {
var oUsername = document.getElementById("username");
var oUsernameSpan = document.getElementById("username_span");
}
给输入框添加失去焦点事件
oUsername.onblur = function () {}
添加正则判断(依据上述步骤开始进行编写正则判断)
oUsername.onblur = function () {
//获取输入框的内容
var oValue = oUsername.value;
//1、判断用户名的长度6~18长度
if (oValue.length < 6 || oValue.length > 18) {
oUsernameSpan.style.color = 'red';
oUsernameSpan.innerHTML = "!长度应为6~18个字符";
//2、判断首字符是否是字母
} else if (/[^a-zA-Z]/.test(oValue[0])) {
oUsernameSpan.style.color = 'red';
oUsernameSpan.innerHTML = "!邮件地址必需以英文字母开头";
//3、判断所有的字符都是数字、字母和下划线组成
} else if (/\W/.test(oValue)) {
oUsernameSpan.style.color = 'red';
oUsernameSpan.innerHTML = "!邮件地址需由字母、数字或下划线组成";
} else {
oUsernameSpan.style.color = 'green';
oUsernameSpan.innerHTML = '✅恭喜,该邮件地址可注册';
}
}
看到这里呢,恭喜你第一个操作邮箱验证已经完全了解了,那么我们开始下一个操作
密码&密码强度验证
1.我们需要用到的事件
按键抬起事件 onkeyup
,当按键抬起的时候进行判断。
2.密码以及密码强度的判断条件
长度范围:6~18个字符;
强度设定:
强:纯大写字母 + 纯小写字母 + 纯数字;
中:两两进行组合;
弱:任意满足一种条件即可;
当我们所有条件都满足的时候,需要将提示信息修改为该密码可以使用,使得用户知道密码验证通过。
那么同上,我们首先第一步需要获取到密码输入框、提示信息div标签以及显示密码强度的span标签
var oPassword = document.getElementById("password");
var oTest = document.getElementById("test");
var aSpans = oTest.getElementsByTagName("span");
与邮箱验证不同的是我们需要添加的事件为onkeyup
,当我们输入密码结束的时候(按键抬起)进行判断
oPassword.onkeyup = function () {}
接下来去添加判断条件(依据上述步骤开始进行编写正则判断)
var oValue = oPassword.value; // 获取到输入框的值
//1、判断密码输入长度是否满足>=6
if (oValue.length < 6 || oValue.length > 18) {
oTest.style.display = 'none';
} else {
oTest.style.display = 'block';
//取消上一次选中的节点的样式
for (var i = 0; i < aSpans.length; i++) {
aSpans[i].className = "";
}
//2、判断密码强度
if (/^\d+$/.test(oValue) || /^[a-z]+$/.test(oValue) || /^[A-Z]+$/.test(oValue)) {
aSpans[0].className = 'active';
} else if (/\d/.test(oValue) && /[a-z]/.test(oValue) && /[A-Z]/.test(oValue)) {
aSpans[2].className = 'active';
} else {
aSpans[1].className = 'active';
}
}
看到这里,我们一个简单的正则判断操作就完成啦~!
以上就是对正则判断的一个简单介绍,先写这么多,以后还会陆续更新一些H5的知识。
如果看完之后对你有些许帮助的话,不妨点个关注~!