使用 input.validity.valid 函数限制表单的输入字段值答案

【问题标题】：Restrict the input field value of a form using input.validity.valid function使用 input.validity.valid 函数限制表单的输入字段值
【发布时间】：2021-12-08 06:40:48
【问题描述】：

我正在尝试从所选列表中选择一个输入值。包含空格或括号的输入值（文具类型）没有被选中，我的代码有什么问题例如，文具类型 CELLOTAPE(BROWN) 未被选中，而其他值被选中。

function random() {
  const input = document.querySelector('[name="stationerytype[]"]');
  input.value = ""
  var a = document.getElementById('purpose').value;
  if (a === "Meeting") {
    var datalist = "datalist1";
  } else if (a === "Departmental") {
    var datalist = "datalist2";
  }
  const options = Array.from(document.getElementById(datalist).options).map(option => option.value);
  input.setAttribute("list", datalist);
  input.setAttribute("pattern", options.join('|'));
}
function ondataListSelect() {
  const input = document.getElementById('stationerytype');
  if (!input.validity.valid) {
    input.value = '';
  }
}

<select type="text" name="purpose" id="purpose" class="form-control" onchange="random()" required >
  <option></option>
  <option value="Meeting">Meeting</option>
  <option value="Departmental">Departmental</option>
</select>
  
<td>
  <input type="text"
    name="stationerytype[]"
    id="stationerytype"
    class="form-control"
    onchange="ondataListSelect()"
    autocomplete="off"
    required>
  <datalist id="datalist1">
    <option value=""></option>
    <option value="MEETING PEN">MEETING PEN</option>
    <option value="NOTEPAD">NOTEPAD</option>
    <option value="PLASTIC FOLDER">PLASTIC FOLDER</option>
  </datalist>

  <datalist id="datalist2">
    <option value=""></option>
    <option value="A4 GREEN REAM">A4 GREEN REAM</option>
    <option value="A4 WHITE REAM">A4 WHITE REAM</option>
    <option value="CELLOTAPE(BROWN)">CELLOTAPE(BROWN)</option>
  </datalist>
</td>

【问题讨论】：

这能回答你的问题吗？ Is there a RegExp.escape function in JavaScript?
这是因为 ( 和 ) 在正则表达式中具有特殊含义，但是您将所有这些值直接与 |介于两者之间。您需要正确转义值中的任何特殊字符，这些字符不意味着具有其特殊含义。
但是这样一个结构的开始有什么意义呢？如果您只想允许从预定义的值列表中进行选择，而没有其他内容（？） - 那么为什么这甚至是一个附加了 datalist 的输入，而不仅仅是带有选项的第二个选择字段？
@CBroe 你能给我解释一下吗？我什么都买不到。

标签： javascript php html

【解决方案1】：

这是因为( 和) 在正则表达式中具有特殊含义，但是您可以将所有这些值直接与它们之间的| 连接起来。您需要正确转义值中的任何特殊字符，这些字符并不具有特殊含义。

使用Is there a RegExp.escape function in JavaScript? 接受的答案中的解决方案，您可以通过更改以下内容来解决问题

const options = Array.from(document.getElementById(datalist).options)
                .map(option => option.value);

到

const options = Array.from(document.getElementById(datalist).options)
                .map(option => option.value.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'));

【讨论】：