Form Validation 表单校验
v2.0.6+

基于 htmx 事件链的表单校验扩展。支持 HTML5 原生约束（required/pattern/minlength 等）和自定义 data-rules，校验失败阻止请求并显示错误提示。

基础用法

  • Preview
  • Code
点击提交触发校验：错误字段标红、显示提示、阻止表单提交。修正后实时清除错误。 
<form hx-ext="bny-validate" style="max-width:420px;">
    <div class="form-item">
        <label>用户名</label>
        <input class="bny-input" name="user" required
               data-msg-required="请输入用户名">
    </div>
    <div class="form-item">
        <label>邮箱</label>
        <input class="bny-input" type="email" name="email" required
               data-msg-required="邮箱必填"
               data-msg-type="邮箱格式不正确">
    </div>
    <div class="form-item">
        <label>密码</label>
        <input class="bny-input" type="password" name="pwd"
               required minlength="6"
               data-msg-min="密码至少 6 位">
    </div>
    <div class="form-item">
        <label>确认密码</label>
        <input class="bny-input" type="password" name="pwd2"
               data-rules="equals:pwd"
               data-msg-equals="两次密码不一致">
    </div>
    <button class="bny-btn" type="submit">提交</button>
</form>

自定义规则 data-rules

  • Preview
  • Code
<!-- 长度规则 -->
<input required data-rules="min:3,max:20">

<!-- 数值范围 -->
<input type="number" required data-rules="min-val:18,max-val:99">

<!-- 正则 -->
<input required data-rules="regexp:^1[3-9]\d{9}$">

配合 HTMX 提交

  • Preview
  • Code
校验通过后才会发起 hx-post 请求，结果回填到下方。失败时阻止提交并标红。 
<form hx-ext="bny-validate"
      hx-post="/api/save"
      hx-target="#result" hx-swap="innerHTML">
    <div class="form-item">
        <label>用户名</label>
        <input class="bny-input" name="user" required
               data-msg-required="请输入用户名">
    </div>
    <div class="form-item">
        <label>邮箱</label>
        <input class="bny-input" type="email" name="email" required
               data-msg-required="请输入邮箱">
    </div>
    <button class="bny-btn" type="submit">提交</button>
</form>
<div id="result"></div>

API

属性

属性说明
hx-ext="bny-validate"启用表单校验
requiredHTML5 必填
data-msg-required必填错误消息
data-msg-type类型错误消息
data-msg-pattern正则错误消息
data-msg-min最小值/最短错误消息
data-msg-max最大值/最长错误消息
data-msg通用兜底消息
data-rules自定义规则，逗号分隔，如 min:3,max:20,regexp:^...$