JavaScript 邮箱验证 - 正则验证

Posted 2021-09-29 Mazey

一、RegExp

1.1 创建 RegExp 对象

new RegExp("必选,正则表达式","可选,匹配模式g,i,m")

1.2 RegExp 对象的方法

• test：检索字符串中的指定值，返回 True 或 False。
• exec：检索字符串中的指定值，返回找到的值，没有则 null。
• complie：用于改变正则表达式，或增删匹配模式。

1.2.1 test()

var r1 = new RegExp(\'world\');
console.log(r1.test(\'Hello, world!\')); //true
console.log(r1.test(\'Hello, World!\')); //false
var r2 = new RegExp(\'world\', \'i\'); //大小写不敏感
console.log(r2.test(\'Hello, World!\')); //true
var r3 = new RegExp(/world/i); //简写
console.log(r3.test(\'Hello, World!\')); //true

1.2.2 exec()

var r1 = new RegExp(\'world\');
console.log(r1.exec(\'Hello, world!\')); //[\'world\']
console.log(r1.exec(\'Hello, World!\')); //null
var r2 = new RegExp(\'world\', \'i\'); //大小写不敏感
console.log(r2.exec(\'Hello, World!\')); //[\'world\']
var r3 = new RegExp(/world/i); //简写
console.log(r3.exec(\'Hello, World!\')); //[\'world\']
var r4 = new RegExp(\'o\');
console.log(r4.exec(\'Hello, World!\')); //[\'o\']
var r5 = new RegExp(\'o\', \'gi\');
console.log(r5.exec(\'Hello, WOrld!\')); //[\'o\']
console.log(r5.lastIndex); //5 匹配文本的第一个字符的位置，o为4，下一个位置为5
console.log(r5.exec(\'Hello, WOrld!\')); //[\'O\'] 匹配完第一个o后调用继续匹配
console.log(r5.lastIndex); //9
console.log(r5.exec(\'Hello, WOrld!\')); //null 匹配不到返回null
console.log(r5.lastIndex); //0 lastIndex重置为0

1.2.3 complie()

var r1 = new RegExp(\'world\');
console.log(r1.exec(\'Hello, world!\')); //[\'world\']
r1.compile(\'o\');
console.log(r1.exec(\'Hello, World!\')); //[\'o\']
r1.compile(\'m\');
console.log(r1.exec(\'Hello, World!\')); //null
var r2 = new RegExp(\'world\');
console.log(r2.test(\'Hello, world!\')); //true
r2.compile(\'mazey\');
console.log(r2.test(\'Hello, world!\')); //false

二、正则表达式

• ^$：表示匹配值的开始和结尾。
• +：1+，一个或更多。
• *：0 / +，零个或更多。
• ?：0 / 1，零个或一个。
• {1,2}：1 <= length <= 2，长度。
• ()：表示一个表达式的组。
• []：匹配的字符范围，我理解为一个块，很多块放在一个组 () 里面。

三、示例

<form action="">
    输入：
    <input type="text" name="mazey" id="mazey" placeholder="请输入邮箱">
    <input type="button" value="验证" onclick="check();">
</form>

<script>
function check(){
    var reg = new RegExp("^[a-z0-9]+([._\\\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$"); //正则表达式
    var obj = document.getElementById("mazey"); //要验证的对象
    if(obj.value === ""){ //输入不能为空
        alert("输入不能为空!");
        return false;
    }else if(!reg.test(obj.value)){ //正则验证不通过，格式不对
        alert("验证不通过!");
        return false;
    }else{
        alert("通过！");
        return true;
    }
}
</script>

附录

阅读原文：https://blog.mazey.net/589.html