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

Question

我开始学习 javascript，我正在尝试制作一个小项目来玩。我想验证用户名的输入字段是否仅包含字母（大写或小写），并且当值正确时，用颜色勾勒该字段的轮廓。（我不关心设计，我关心功能，因为它的目的是为了学习）。

我有这个代码： 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);

我的问题是这样的：第一次运行时，如果我单击该元素并输入正确的文本，当我将焦点移出该元素时，它会按预期概述输入。问题是当我在元素中单击返回并只需单击元素外部的某个位置即可触发焦点事件，而不修改文本中的任何内容。不知何故，我的正则表达式条件（代码中的 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

删除正则表达式中的修饰符 g，如const regEx = /^[a-zA-Z]+$/