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不变，然后如果选择了JS，则将HTML或国际选择的属性值插入。但是我想知道是否有更好的方法可以工作，或者如果禁用或不可用JS至少可以接受。

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

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

1 个答案: