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"
        // 重置 keyup 上的验证
        onkeyup="this.setCustomValidity('')"
        hx-on:htmx:validation:validate="if(this.value != 'tutorialspoint') {
        // 设置验证错误
        this.setCustomValidity('Please enter the value tutorialspoint')
        // 报告问题
        htmx.find('#example-form').reportValidity()
        }"
      />
</form>

如何验证非表单元素?

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

非表单元素验证示例

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

• 输入字段具有 required 属性，因此是必填项。
• div 元素在被点击时使用 hx-get 向 /validate-username 发送 GET 请求。
• hx-validate="true" 属性确保在发出请求之前验证输入字段。
• 来自服务器的响应将与 ID 结果一起显示在 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>