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

【问题标题】：How to have form fields with different validation patterns depending on condition?如何根据条件使表单字段具有不同的验证模式？
【发布时间】：2019-05-26 00:05:35
【问题描述】：

我正在处理用户首先在单选按钮上选择“美国”或“国际”的表单。根据选择的国家/地区，电话输入字段应要求输入 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 设置两个 div，并根据单选按钮的选择使用 JS 显示它们。或者，我可以保留 HTML 并插入 HTML 或使用 JS 进行国际选择的属性值（如果已选择）。但我想知道如果 JS 被禁用或不可用，是否有更好的方法可以工作或至少可以接受。

【问题讨论】：

标签： javascript html forms validation html5-validation

【解决方案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', '+1234567890');
      phoneInput.setAttribute('pattern', 'abc');
      phoneInput.setAttribute('title', 'International phone number format is required.');
    }
  });
});
  </script>
</form>

【讨论】：