html 如何使表单域根据条件使用不同的验证模式？

ie3xauqp 于 2022-12-16 发布在其他

关注(0)|答案(1)|浏览(119)

我正在设计一个表单，用户首先在单选按钮上选择“USA”或“International”，根据选择的国家a地区，电话输入字段应该要求输入10位数的美国号码或具有不同模式的国际电话号码。
我使用的是带有required属性和regex模式的原生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不变，如果选择了JS，则使用JS插入HTML或国际选择的属性值。但是我想知道是否有更好的方法，如果JS被禁用或不可用，则该方法将有效或至少是可接受的。

Html

来源：https://stackoverflow.com/questions/53953868/how-to-have-form-fields-with-different-validation-patterns-depending-on-conditio

1条答案

按热度按时间

gopyfrb31#

既然已经这样做了，那么可以将click-handler附加到单选按钮上，以便它以必要的方式修改输入字段属性

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

赞(0）回复(0）举报 2022-12-16

我来回答

html 如何使表单域根据条件使用不同的验证模式？

1条答案

相关问题

热门标签

最新问答