如何限制表单输入框仅提交联动datalist中的预设选项值

问题原因 #

datalist原生仅提供输入建议能力，没有限制用户输入自定义内容的功能，必须额外新增校验逻辑实现需求。

解决方案 #

方案1：保留datalist，新增前后端双重校验 #

前端校验实现

新增校验逻辑，分别在输入框失焦、表单提交两个节点校验输入值是否属于当前datalist的预设选项，不符合则拦截操作并提示。
修改后的完整代码如下：

<!-- 记得给你的外层form标签加上onsubmit事件，示例：<form action="xxx" method="post" onsubmit="return checkForm()"> -->
<div>
<select name="purpose" id="purpose" class="form-control" onchange="random()" required>
  <option></option>
  <option value="Meeting">Meeting</option>
  <option value="Departmental">Departmental</option>
</select>
</div>
<script>
// 原有联动逻辑
function random() {
  const stationeryInput = document.querySelector('[name="stationerytype[]"]');
  stationeryInput.value = ""
  const purposeVal = document.getElementById('purpose').value;
  let datalist = "";
  if (purposeVal === "Meeting") {
    datalist = "datalist1";
  } else if (purposeVal === "Departmental") {
    datalist = "datalist2";
  }
  stationeryInput.setAttribute("list", datalist)
}

// 新增：校验文具类型是否合法
function validateStationery() {
  const purposeVal = document.getElementById('purpose').value;
  const inputVal = document.querySelector('[name="stationerytype[]"]').value.trim();
  // 未选用途或未输入直接返回，交给required属性校验
  if (!purposeVal || !inputVal) return true;
  
  // 获取当前对应datalist的所有有效选项
  const datalistId = purposeVal === "Meeting" ? "datalist1" : "datalist2";
  const allowedOptions = Array.from(document.querySelectorAll(`#${datalistId} option`))
    .map(opt => opt.value)
    .filter(val => val !== ""); // 过滤空选项
  
  // 判断输入值是否在允许列表内
  const isValid = allowedOptions.includes(inputVal);
  if (!isValid) {
    alert("请选择预设的文具类型，请勿自行输入");
    document.querySelector('[name="stationerytype[]"]').value = "";
  }
  return isValid;
}

// 新增：表单提交校验
function checkForm() {
  return validateStationery();
}
</script>
<td>
<input type="text" name="stationerytype[]" id="stationerytype" class="form-control" autocomplete="off" required onblur="validateStationery()">
  <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>

后端校验（必须实现）

前端校验可以被用户篡改绕过，服务端接收参数后必须做二次校验：

1. 先获取提交的purpose值和stationerytype值
2. 匹配purpose对应的允许文具类型列表
3. 判断stationerytype是否在列表内，不符合直接拒绝入库，返回错误提示。

方案2：改用联动select下拉框（更简单） #

如果不需要用户搜索输入的能力，直接将stationerytype的输入框替换为下拉框，根据purpose联动切换选项，原生就限制只能选预设值，不需要额外写校验逻辑，适合选项数量少的场景。

内容的提问来源于stack exchange，提问作者Gdfhj