Question

我正在尝试仅使用正则表达式验证十六进制颜色的文本字段。我偶然发现了this answer，并为我的textField尝试了它，它并没有像我期望的那样工作。这是代码：

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

应该检查文本字段是否为0 - 9 || A - F（大写或小写），但是当我记录它时，它总是说错。

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

完整代码：

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">

更新

似乎有些混淆我究竟在问什么。我正在尝试在用户输入时验证textField，而不是在用户完成时。我希望这能澄清我的问题。

Answer 1

正则表达式代码的作用是，它检查文本字段是否具有“有效”字样。 chars，＆amp;＆amp; <和strong>如果文本字段中有6个字符。

因此，如果想要在用户输入时验证文本字段，您可以使用此正则表达式：

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

注意，我删除了{6}，只有当有6个字符时才会显示为真。

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

JSFiddle

1 个答案: