元素失去焦点后的输入验证问题

Question

我开始学习javascript，我正在尝试制作一个小项目。我想验证username的输入字段是否只包含字母(大写或小写(，并且当值正确时，用颜色勾勒出字段的轮廓。(我不在乎设计，我在乎功能，因为它的目的是为了学习(。

我有这个代码：https://jsfiddle.net/7zcv4g1m/1/

const userField = document.querySelector('#user .user');
const passwordField = document.querySelector('#password .password');
const regEx = /^[a-zA-Z]+$/g;
function checkUser() {
// userField.setAttribute('class', 'user');
let userText = userField.value.substring(0, userField.value.length);
let expr = regEx.test(userText);
if (expr == true && userText.length > 0) {
userField.setAttribute('class', 'user test');
} else {
userField.setAttribute('class', 'user');
}
}
userField.addEventListener("focusout", checkUser, false);

我的问题是：在第一次运行时，如果我点击元素并键入正确的文本，当我将焦点从元素中移开时，它会按预期勾勒出输入。问题是，当我在元素中单击返回，然后只单击元素外部的某个位置来触发focusout事件，而不修改文本中的任何内容。不知怎的，我的regex条件(代码中的expr变量(被认为是false，而不是true，它将元素的输出变回灰色而不是绿色。如果我单击返回和退出，它会将输入边框返回为绿色。

我不明白为什么会发生这种事，也不明白我在哪里犯了错误。或者我把代码写错了。如果有人能给我一个提示，我们将不胜感激。

Answer 1

由regEx.test(userText)引起。这应该有效：

function checkUser() {
// userField.setAttribute('class', 'user');
let userText = userField.value.substring(0, userField.value.length);
let expr = userText.match(regEx);
if (expr && userText.length > 0) {
userField.setAttribute('class', 'user test');
} else {
userField.setAttribute('class', 'user');
}
}

Answer 2

删除RegEx中的修饰符g，如

const regEx = /^[a-zA-Z]+$/