JavaScript事件异常：邮箱校验首次正常第二次点击提示错误

该异常是正则表达式全局修饰符g的内置特性导致的：

• 当正则声明时携带g（全局匹配）修饰符，对应的RegExp实例会自动维护lastIndex属性，用于记录上一次匹配结束的下标位置。后续调用test()、exec()这类匹配方法时，会默认从lastIndex记录的位置开始向后匹配，而非从头匹配。
• 第一次输入合法邮箱点击校验时，匹配成功后lastIndex会被赋值为邮箱字符串的总长度；第二次点击调用test()时，从超出字符串长度的位置开始匹配，自然匹配失败，同时lastIndex会自动重置为0，就会出现两次点击结果交替正确/错误的现象。
• 此处正则的g修饰符属于冗余配置：你仅需要校验输入的整体是否匹配邮箱规则，不需要全局检索字符串内的所有匹配项。

提供两种可选修复方式，按需选择即可：

方案1（推荐）：移除冗余的g修饰符 #

直接修改正则声明，删除不需要的全局修饰符，i（忽略大小写）修饰符可以保留：

// 修改后的正则
var regex = /^\w+@[a-z]+\.[a-z]{2,4}$/i

方案2：手动重置匹配位置 #

如果业务中其他逻辑需要保留g修饰符，每次调用校验方法前手动将lastIndex重置为0即可：

btn.addEventListener("click",function(){
     regex.lastIndex = 0; // 每次校验前重置匹配起始位置
     if(regex.test(test.value)){
       result.innerHTML = "the value entered is correct ";
     }else{
       result.innerHTML = "the value entered is incorrect ";
     }
});

内容的提问来源于stack exchange，提问作者Rida Batool