<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Kole UI · PhoneInput</title>
  <link rel="stylesheet" href="../.design_library/kole-ui/colors_and_type.css" />
  <link rel="stylesheet" href="./PhoneInput.css" />
</head>
<body>
  <div class="kole-page">
    <h2 class="kole-h2">PhoneInput 手机号输入</h2>
    <p class="kole-desc">国际区号选择 + 自动格式化 + 校验，适用于注册、登录。</p>

    <div class="kole-demo">
      <div class="kole-demo__title">基础用法</div>
      <div class="kole-phone" id="phone">
        <select class="kole-phone-code" id="code">
          <option value="+86">+86</option>
          <option value="+852">+852</option>
          <option value="+1">+1</option>
          <option value="+81">+81</option>
        </select>
        <input class="kole-phone-input" role="group" id="num" placeholder="请输入手机号" inputmode="numeric" />
      </div>
      <div class="kole-phone-tip" id="tip">支持中国大陆、香港、美、日等区号</div>
    </div>
  </div>

  <script>
    var root = document.getElementById('phone');
    var code = document.getElementById('code');
    var num = document.getElementById('num');
    var tip = document.getElementById('tip');

    function format(v) {
      return v.replace(/\D/g, '').slice(0, 11);
    }
    function validate() {
      var c = code.value, v = num.value;
      var ok;
      if (c === '+86') ok = /^1[3-9]\d{9}$/.test(v);
      else ok = v.length >= 6 && v.length <= 15;
      root.classList.remove('is-error');
      if (!v) { tip.className = 'kole-phone-tip'; tip.textContent = '支持中国大陆、香港、美、日等区号'; }
      else if (ok) { tip.className = 'kole-phone-tip ok'; tip.textContent = '格式正确：' + c + ' ' + v; }
      else { tip.className = 'kole-phone-tip error'; tip.textContent = '手机号格式不正确'; root.classList.add('is-error'); }
    }
    num.addEventListener('input', function () { num.value = format(num.value); validate(); });
    code.addEventListener('change', validate);
    num.addEventListener('focus', function () { root.classList.add('is-focus'); });
    num.addEventListener('blur', function () { root.classList.remove('is-focus'); });
  </script>
</body>
</html>
