Question

我尝试使用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规范：

如果select元素指定了required属性，则未指定multiple属性，并且显示大小为1;如果option元素的选项列表中的第一个select元素的值（如果有）是空字符串，并且option元素的父节点是select元素（而不是optgroup元素），option是select元素的占位符标签选项。

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

约束验证与常量值

1 个答案: