行内验证

本示例展示如何进行行内字段验证，这里以电子邮件地址为例。要实现这个功能， 我们需要创建一个表单，其中包含一个输入框，它会通过POST请求将值发送回服务器进行验证， 并更新DOM显示验证结果。

我们从以下表单开始：

<h3>注册表单</h3>
<form hx-post="/contact">
  <div hx-target="this" hx-swap="outerHTML">
    <label>邮箱</label>
    <input name="email" hx-post="/contact/email" hx-indicator="#ind">
    <img id="ind" src="/img/bars.svg" class="htmx-indicator"/>
  </div>
  <div class="form-group">
    <label>名字</label>
    <input type="text" class="form-control" name="firstName">
  </div>
  <div class="form-group">
    <label>姓氏</label>
    <input type="text" class="form-control" name="lastName">
  </div>
  <button class="btn primary">提交</button>
</form>

请注意，表单中的第一个div将自己设置为请求的目标，并指定了outerHTML 交换策略，因此它将被响应完全替换。输入框则指定它将通过POST请求到/contact/email 进行验证，当changed事件发生时触发（这是输入框的默认行为）。 它还指定了请求的指示器。

当请求发生时，它将返回一个部分内容来替换外部div。可能看起来像这样：

<div hx-target="this" hx-swap="outerHTML" class="error">
  <label>邮箱</label>
  <input name="email" hx-post="/contact/email" hx-indicator="#ind" value="test@foo.com">
  <img id="ind" src="/img/bars.svg" class="htmx-indicator"/>
  <div class='error-message'>该邮箱已被占用。请输入其他邮箱。</div>
</div>

请注意，这个div被标记了error类，并包含一个错误消息元素。

这个表单可以用以下CSS进行简单样式设置：

  .error-message {
    color:red;
  }
  .error input {
      box-shadow: 0 0 3px #CC0000;
   }
  .valid input {
      box-shadow: 0 0 3px #36cc00;
   }

以提供更好的视觉反馈。

下面是一个可工作的示例演示。唯一会被接受的邮箱是test@test.com。

🔗演示