HTMX - 验证

HTMX 验证与 HTML5 验证 API 协同工作，因为如果可验证的输入字段无效，它不会触发表单的任何请求。这在 Ajax 请求和 WebSockets 发送中都以相同的方式工作。它将在验证周围触发事件，这些事件可用于挂钩自定义验证和错误处理。

• htmx:validation:validate: 用于添加自定义验证逻辑。
• htmx:validation:failed: 用于指示无效输入。
• htmx:validation:halted: 用于显示验证错误。

HTMX 验证示例

在以下示例中，hx-on 属性捕获 htmx:validation:validate 事件，并要求输入值“tutorialspoint”。请记住，所有客户端验证都应在服务器端重新执行，因为这始终可以绕过。

<form id="example-form" hx-post="/test">
   <input
      name="example"
      // Reset the validation on keyup
      onkeyup="this.setCustomValidity('')"
      hx-on:htmx:validation:validate="if(this.value != 'tutorialspoint') {
      // Set the validation error
      this.setCustomValidity('Please enter the value tutorialspoint')
      // Report the issue
      htmx.find('#example-form').reportValidity() 
      }"
      />
</form>

如何验证非表单元素？

您可以在 hx-validate 属性上设置 true 值，以在非表单元素发出任何请求之前对其进行验证。表单元素默认在发出任何请求之前进行验证。

非表单元素验证示例

在以下示例中，非表单元素在发出请求之前进行验证。

• 输入字段具有 required 属性，使其成为必填项。
• div 元素使用 hx-get 在单击时向 /validate-username 发送 GET 请求。
• hx-validate="true" 属性确保在发出请求之前验证输入字段。
• 服务器的响应将显示在 ID 为 result 的 div 中。

<input type="text" id="username" required placeholder="Enter your username" />
<div
   hx-get="/validate-username"
   hx-validate="true"
   hx-trigger="click"
   hx-target="#result"
   >
   Validate Username
</div>
<div id="result"></div>