<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>&lt;input type="tel"&gt; 示例</title>
  <style>
    div {
    margin-bottom: 10px;
    position: relative;
    }

    input[type="number"] {
      width: 100px;
    }

    input + span {
      padding-right: 30px;
    }

    input:invalid+span:after {
      position: absolute; content: '✖';
      padding-left: 5px;
    }

    input:valid+span:after {
      position: absolute;
      content: '✓';
      padding-left: 5px;
    }
  </style>
</head>

<body>
  <form>
    <div>
      <label for="country">选择国家：</label>
      <select id="country" name="country">
        <option value="UK">英国</option>
        <option value="US" selected>美国</option>
        <option value="Germany">德国</option>
      </select>
    </div>
    <div>
      <p>输入手机号码：</p>
      <span class="areaDiv">
        <input id="areaNo" name="areaNo" type="tel" required
              placeholder="区号" pattern="[0-9]{3}"
              aria-label="Area code">
        <span class="validity"></span>
      </span>
      <span class="number1Div">
        <input id="number1" name="number1" type="tel" required
                placeholder="第一部分" pattern="[0-9]{3}"
                aria-label="电话号码的第一部分">
        <span class="validity"></span>
      </span>
      <span class="number2Div">
        <input id="number2" name="number2" type="tel" required
                placeholder="第二部分" pattern="[0-9]{4}"
                aria-label="电话号码的第二部分">
        <span class="validity"></span>
      </span>
    </div>
    <div>
      <button>提交</button>
    </div>
  </form>
  <script>
    const selectElem = document.querySelector("select");
    const inputElems = document.querySelectorAll("input");

    selectElem.onchange = function() {
      for(let i = 0; i < inputElems.length; i++) {
        inputElems[i].value = "";
      }

      if (selectElem.value === "US") {
        inputElems[2].parentNode.style.display = "inline";

        inputElems[0].placeholder = "区号";
        inputElems[0].pattern = "[0-9]{3}";

        inputElems[1].placeholder = "第一部分";
        inputElems[1].pattern = "[0-9]{3}";
        inputElems[1].setAttribute("aria-label","电话号码的第一部分");

        inputElems[2].placeholder = "第二部分";
        inputElems[2].pattern = "[0-9]{4}";
        inputElems[2].setAttribute("aria-label","电话号码的第二部分");
      } else if (selectElem.value === "UK") {
        inputElems[2].parentNode.style.display = "none";

        inputElems[0].placeholder = "区号";
        inputElems[0].pattern = "[0-9]{3,6}";

        inputElems[1].placeholder = "本地号码";
        inputElems[1].pattern = "[0-9]{4,8}";
        inputElems[1].setAttribute("aria-label","本地号码");
      } else if (selectElem.value === "Germany") {
        inputElems[2].parentNode.style.display = "inline";

        inputElems[0].placeholder = "区号";
        inputElems[0].pattern = "[0-9]{3,5}";

        inputElems[1].placeholder = "第一部分";
        inputElems[1].pattern = "[0-9]{2,4}";
        inputElems[1].setAttribute("aria-label","电话号码的第一部分");

        inputElems[2].placeholder = "第二部分";
        inputElems[2].pattern = "[0-9]{4}";
        inputElems[2].setAttribute("aria-label","电话号码的第二部分");
      }
    }
  </script>
</body>
</html>
