0

我有一个选择选项：

<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"/>

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

选择的州必须与邮政编码的第一位数字相匹配 VIC = 3 OR 8, NSW = 1 OR 2 ,QLD = 4 OR 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; 
}
4

1 回答 1

3

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

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>

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

于 2020-05-02T06:15:37.830 回答