javascript - 约束验证不匹配常量值

Question

这个问题已经有答案了:

Can I apply the required attribute to <select> fields in HTML? (13 个回答)

已关闭 5 年前。

我正在尝试使用 HTML5 进行模式匹配约束验证来检查某个值是否不等于给定值。

<select pattern="(?!ZZZ)">
    <option value="ZZZ">Please select a nation™</option>
    ...
    <option value="GER">Germany (GER)</option>
    ...
    <option value="ZIM">Zimbabwe (ZIM)</option>
</select>

如果用户选择了默认值 ZZZ它应该匹配并显示错误消息(通过 JavaScript 完成)。

我尝试了不同的在线工具来检查我使用的任何模式，但一无所获。

我只需要检查该值是否与常量字符串 ZZZ 不匹配但我不明白。

已经尝试相反，所以它必须匹配 ZZZ并以某种方式反转这个正则表达式。但即便如此，我还是陷入了困境。

Answer 1

你想多了。 :-) 只需设置该选项的值 "" 并使用 required:

select:invalid {
  color: red;
}

<form>
  <select required>
    <option value="">Please select a nation™</option>
    <option value="GER">Germany (GER)</option>
    <option value="ZIM">Zimbabwe (ZIM)</option>
  </select>
</form>

来自 required 的 WHAT-WG HTML 规范:

If a select element has a required attribute specified, does not have a multiple attribute specified, and has a display size of 1; and if the value of the first option element in the select element's list of options (if any) is the empty string, and that option element's parent node is the select element (and not an optgroup element), then that option is the select element's placeholder label option.

因此选择该选项并不会使选择有效。