根据下拉值是否等于数字验证输入

Question

我有一个选择选项：

<select name="state" id="state">
    <option value="none" disabled selected>Select your option</option>
    <option value="VIC">VIC</option>
    <option value="NSW">NSW</option>
    <option value="QLD">QLD</option>
    <option value="NT">NT</option>
    <option value="WA">WA</option>
    <option value="SA">SA</option>
    <option value="TAS">TAS</option> 
    <option value="ACT">ACT</option>  
</select>

还有一个输入邮政编码的文本框：

<label for="postcode">Postcode: </label>
<input type="text" name="postcode" pattern="^[1-9]{4}$" id="postcode" size="4" required="required"/>

基本上我们选择一个州，然后在下一个字段中输入邮政编码，但验证要求需要我这样做：

所选州必须与邮政编码 VI​​C = 3 的第一位匹配 或 8, 新南威尔士州 = 1 或 2 ,昆士兰州 = 4 或 9 ,NT = 0 ,WA = 6 ,SA=5 ,TAS=7 ,ACT= 0 （例如，邮政编码 3122 应与州 VIC 匹配）

我已经实现了访问这两个值，但我不确定如何给状态一个数字值（同时保留正常值）。

function validateEnquire() {
  var errMsg = "";
  var result = true; 

  var postcode=document.getElementById("postcode").value.trim();
  var state=document.getElementById("state").value.trim();

  //Implement state result

  if (!(postcode.charAt(0) == stateResult)) {
          errMsg = errMsg + "The postcode does not belong to the state\n"
          result = false;
  }

  if (errMsg != "") {
    alert(errMsg);
  }

  return result; 
}

Answer 1

您可以有一个按状态索引的对象，其值是该状态允许的邮政编码：

const stateCodes = {
  VIC: ['3', '8'],
  NSW: ['1', '2'],
  QLD: ['4', '9'],
  // ...
};
// ...

  if (!stateCodes[stateResult].includes(postcode[0])) {
    // Error
  }

const stateCodes = {
  VIC: ['3', '8'],
  NSW: ['1', '2'],
  QLD: ['4', '9'],
  // ...
};
document.querySelector('form').addEventListener('submit', (e) => {
  e.preventDefault();
  const selectedState = document.querySelector('#state').value;
  const postcode = document.querySelector('#postcode').value;
  if (!stateCodes[selectedState].includes(postcode[0])) {
    console.log("Code doesn't match state");
  } else {
    console.log('OK');
  }
});

<form>
  <select name="state" id="state">
    <option value="none" disabled selected>Select your option</option>
    <option value="VIC">VIC</option>
    <option value="NSW">NSW</option>
    <option value="QLD">QLD</option>
    <option value="NT">NT</option>
    <option value="WA">WA</option>
    <option value="SA">SA</option>
    <option value="TAS">TAS</option>
    <option value="ACT">ACT</option>
  </select>
  <label for="postcode">Postcode: </label>
  <input type="text" name="postcode" pattern="^[1-9]{4}$" id="postcode" size="4" required="required" />
  <button>submit</button>
</form>

请注意，如果您已经有 ^[1-9]{4}$ 模式（不需要空格），则不需要 .trim() 文本的值。