<!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 · FormModal</title>
  <link rel="stylesheet" href="../.design_library/kole-ui/colors_and_type.css" />
  <link rel="stylesheet" href="./FormModal.css" />
</head>
<body>
  <div class="kole-page">
    <h2 class="kole-h2">FormModal 表单弹窗</h2>
    <p class="kole-desc">弹窗内嵌表单，确认提交前进行校验，校验失败阻止关闭。</p>

    <div class="kole-demo">
      <button class="kole-btn kole-btn--primary" id="open">新建用户</button>
      <p class="kole-code-tip" id="out"></p>
    </div>
  </div>

  <div class="kole-formmodal-mask" id="mask" style="display:none">
    <div class="kole-formmodal">
      <div class="kole-formmodal-head"><span>新建用户</span><button class="kole-formmodal-close" id="close">×</button></div>
      <div class="kole-formmodal-body">
        <div class="kole-form-row">
          <label class="kole-form-label"><span class="req">*</span>姓名</label>
          <input class="kole-form-input" id="f-name" placeholder="请输入姓名" />
          <div class="kole-form-err" id="e-name" style="display:none">姓名不能为空</div>
        </div>
        <div class="kole-form-row">
          <label class="kole-form-label"><span class="req">*</span>邮箱</label>
          <input class="kole-form-input" id="f-email" placeholder="name@example.com" />
          <div class="kole-form-err" id="e-email" style="display:none">邮箱格式不正确</div>
        </div>
        <div class="kole-form-row">
          <label class="kole-form-label">角色</label>
          <input class="kole-form-input" id="f-role" placeholder="如：管理员" />
        </div>
      </div>
      <div class="kole-formmodal-foot">
        <button class="kole-btn" id="cancel">取消</button>
        <button class="kole-btn kole-btn--primary" id="ok">提交</button>
      </div>
    </div>
  </div>

  <script>
    var mask = document.getElementById('mask');
    var out = document.getElementById('out');
    document.getElementById('open').onclick = function () { mask.style.display = 'flex'; };
    document.getElementById('close').onclick = close;
    document.getElementById('cancel').onclick = close;
    function close() { mask.style.display = 'none'; }

    document.getElementById('ok').onclick = function () {
      var name = document.getElementById('f-name').value.trim();
      var email = document.getElementById('f-email').value.trim();
      var ok = true;
      var eName = document.getElementById('e-name'), eEmail = document.getElementById('e-email');
      var iName = document.getElementById('f-name'), iEmail = document.getElementById('f-email');
      eName.style.display = name ? 'none' : 'block'; iName.classList.toggle('is-error', !name); if (!name) ok = false;
      var emailOk = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
      eEmail.style.display = emailOk ? 'none' : 'block'; iEmail.classList.toggle('is-error', !emailOk); if (!emailOk) ok = false;
      if (!ok) return;
      out.textContent = '提交成功：' + name + ' / ' + email + ' / ' + document.getElementById('f-role').value;
      close();
    };
  </script>
</body>
</html>
