javascript - 如何根据条件使表单字段具有不同的验证模式？

Question

我正在处理用户首先在单选按钮上选择“美国”或“国际”的表单。根据选择的国家/地区，电话输入字段应要求 10 位数的美国号码或具有不同模式的国际电话号码。

我正在使用具有所需属性和正则表达式模式的本机 HTML 验证。目前我有一个美国号码的占位符、模式和标题属性。

<form>

  <div>
    <fieldset>
      <legend>Country</legend>
      <p>
        <input type="radio" name="country" id="usa" value="usa" required />
        <label for="usa">USA</label>
      </p>
      <p>
        <input type="radio" name="country" id="int" value="int" required />
        <label for="int">International</label>
      </p>
    </fieldset>
  </div>

  <div>
    <label for="telephone">Telephone</label>
    <input
      type="tel"
      name="tel"
      id="tel"
      placeholder="123 456 7890"
      required
      pattern="(?:\d{1}\s)?\(?(\d{3})\)?-?\s?(\d{3})-?\s?(\d{4})"
      title="A valid US 10 digit phone number is required."
    />
  </div>

  <button id="submit" type="submit">Submit</button>

</form>

如何实现国际号码的占位符、模式和标题？

我可以在每个 HTML 中有两个 div，并根据单选按钮的选择用 JS 显示它们。或者，我可以保留 HTML 并插入 HTML 或使用 JS 进行国际选择的属性值（如果已选择）。但我想知道如果 JS 被禁用或不可用，是否有更好的方法可以工作或至少可以接受。

标签： javascripthtmlformsvalidationhtml5-validation

Answer 1

既然您已经这样做了，您可以将点击处理程序附加到您的单选按钮，以便它以必要的方式修改您的输入字段属性

<form>
  <div>
    <fieldset>
      <legend>Country</legend>
      <p>
        <input type="radio" name="country" id="usa" value="usa" required />
        <label for="usa">USA</label>
      </p>
      <p>
        <input type="radio" name="country" id="int" value="int" required />
        <label for="int">International</label>
      </p>
    </fieldset>
  </div>

  <div>
    <label for="telephone">Telephone</label>
    <input type="tel" name="tel" id="tel" disabled/>
  </div>
  <button id="submit" type="submit" disabled>Submit</button>
  <script>
  const phoneInput = document.querySelector('#tel');
  const submitButton = document.querySelector('#submit');

[...document.querySelectorAll('input[name="country"]')].forEach(radio => {
	radio.addEventListener('click', function(){
  	phoneInput.disabled = false;
    submitButton.disabled = false;
    if(this.value == 'usa') {
    	phoneInput.setAttribute('placeholder', '123 456 7890');
      phoneInput.setAttribute('pattern', 'xyz');
      phoneInput.setAttribute('title', 'A valid US 10 digit phone number is required.');
    }
    else if(this.value == 'int'){
      phoneInput.setAttribute('placeholder', '[phone]');
      phoneInput.setAttribute('pattern', 'abc');
      phoneInput.setAttribute('title', 'International phone number format is required.');
    }
  });
});
  </script>
</form>