JavaScript中使用Regex做表单验证时出现结果交替问题求助

开发者阿泽

2026-8-5

问题原因及解决方法

你的问题出在正则表达式的**全局修饰符g**上。带g的正则会维护一个lastIndex属性，记录上一次匹配结束的位置：

第一次调用test时，从字符串开头匹配，成功后lastIndex被设为字符串末尾
第二次调用test时，会从lastIndex的位置（也就是字符串末尾）开始匹配，自然找不到符合规则的内容，返回false，同时把lastIndex重置为0
第三次调用又从0开始，匹配成功返回true，如此循环，就出现了你看到的交替输出true/false的情况

解决步骤

方案1：移除全局修饰符`g`（推荐）

表单验证只需要判断整个输入是否符合规则，不需要全局匹配多次，直接去掉g即可：

const form = document.querySelector('form')
// 去掉正则的g修饰符
const emailRegexp = /^[\w.+\-]+@gmail\.com$/;
const usernameRegexp = /^\w+(?![\b])\w+$/;
const fail = document.querySelectorAll('div.input_failed');
console.log(emailRegexp.test('fdjfvnjdknv@gmail.com'));

styleButton.addEventListener('click', function(event) {
    const testEmail = emailRegexp.test(input[0].value);
    if(testEmail) {
        fail[0].style.display = 'none';
        console.log(true);
    }
    else {
        fail[0].style.display = 'block';
        console.log(false);
    }
});

方案2：手动重置`lastIndex`（仅特殊场景使用）

如果一定要保留g修饰符，每次调用test前重置lastIndex为0：

styleButton.addEventListener('click', function(event) {
    // 重置lastIndex到字符串开头
    emailRegexp.lastIndex = 0;
    const testEmail = emailRegexp.test(input[0].value);
    if(testEmail) {
        fail[0].style.display = 'none';
        console.log(true);
    }
    else {
        fail[0].style.display = 'block';
        console.log(false);
    }
});