javascript - 验证十六进制文本字段不起作用

Question

我正在尝试仅使用正则表达式验证文本字段的十六进制颜色。我偶然发现this answer ，并为我的文本字段尝试了它，但它没有按我的预期工作。代码如下:

/^[0-9A-F]{6}$/i.test(e.target.value)

它应该检查文本字段是否为 0 - 9 || A - F(大写或小写)，但是当我记录它时，它总是显示 false。

如何验证十六进制文本字段？

完整代码:

JSFiddle

document.getElementById('hexTextField').addEventListener('keyup', function(e) {
  // Allow: tab, home, end, left, up, right, down
  if ([9, 36, 35, 37, 38, 39, 40].indexOf(e.keyCode) !== -1 ||
    // Allow: Ctrl || Command && a, c, x and v
    (!0 === e.ctrlKey || !0 === e.metaKey) && /65|67|88|86/.test(e.keyCode)) {
    if (e.keyCode === 86 && /(^[0-9A-F]{6}$)|(^[0-9A-F]{3}$)/i.test(e.target.value)) {
      //myColor.setColor(e.target.value, 'hex');
    }
    return;
  }

  console.log(/^[0-9A-F]{6}$/i.test(e.target.value));
  if (/^[0-9A-F]{6}$/i.test(e.target.value)) {
    //myColor.setColor(e.target.value, 'hex');
  } else {
    e.preventDefault();
  }
});

<input type="text" id="hexTextField" spellcheck="false" maxlength="6">

更新

我到底要问什么似乎有些困惑。我试图在用户输入时验证文本字段，而不是在用户完成时验证。我希望这能澄清我的问题。

Answer 1

正则表达式代码的作用是，它检查文本字段是否具有“有效”字符，&& 如果文本字段中有 6 个字符。

因此，如果希望在用户键入时验证文本字段，您可以使用以下正则表达式:

/[0-9A-Fa-f]$/i

注意，我删除了 {6}，只有当有 6 个字符时，它才为 true。