spz-form 表单

• 用于收集信息。
• 需要对输入的数据进行校验时。

表单的用法和原生的form一样，都是直接用<form>标签而不是<spz-form>标签，组件会根据<form>标签是否带有以下两个标识中的一个来判断是否将当前表单作为spz-form：

• 带有 is="spz-form" 属性
• 带有 action-xhr 属性

最基本的用法，在表单内控件的使用与原生的 form 表单用法一致。

<form
    action-xhr="/api/customers/sign_in"
    method="POST"
    custom-validation="change-interact-and-first-submit"
    back-to-referrer
    record-referrer
    @submitError="..."
  >
    <div class='form_item'>
      <input
        id="email"
        type="text"
        name="email"
        autofocus
        required
        pattern="[a-zA-Z0-9!#$%&'*+\\/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+\\/=?^_`{|}~-]+)*@(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?\.)+[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?"
      >
      <label for="email">Email</label>
    </div>
    <div class='form_item'>
      <input
        id="password"
        type="password"
        name="password"
        required
        minlength="6"
        maxlength="16"
        pattern='[\s\S]{6,16}'
      >
      <label for="password">Password</label>
    </div>

    <button type="submit">Login</button>
  </form>

展示错误信息。当报告表单有错误信息时，会去找带有 validation-for 和 visible-when-invalid 属性的元素，且 validation-for 的值与控件的ID一致，visible-when-invalid 的值与无效的校验状态一致时，会移除当前元素的 hidden 属性，并加上 visible 类。

校验状态

<form
  action-xhr="/api/customers/sign_in"
  method="POST"
  custom-validation="change-interact-and-first-submit"
  back-to-referrer
  record-referrer
  @submitError="..."
>
  <div class='form_item'>
    <input
      id="email"
      type="text"
      name="email"
      autofocus
      required
      pattern="[a-zA-Z0-9!#$%&'*+\\/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+\\/=?^_`{|}~-]+)*@(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?\.)+[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?"
    >
    <label for="email">Email</label>

    <div validation-for="email" visible-when-invalid="valueMissing" hidden>Email is required</div>
    <div validation-for="email" visible-when-invalid="patternMismatch" hidden>Please enter a valid email.</div>
  </div>
  <div class='form_item'>
    <input
      id="password"
      type="password"
      name="password"
      required
      minlength="6"
      maxlength="16"
      pattern='[\s\S]{6,16}'
    >
    <label for="password">Password</label>
    <div validation-for="password" visible-when-invalid="valueMissing" hidden>Password is required.</div>
    <div validation-for="password" visible-when-invalid="patternMismatch" hidden>Password must be between 6-16 characters long.</div>
  </div>

  <button type="submit">Login</button>
</form>

show-all-on-submit

在点击提交表单按钮后请求接口前，会去校验所有控件的值是否有效，如果有校验不符合的，报告所有校验不符合的信息。当控件的值校验不符合后，用户输入/选择符合的值后，控件会被报告有效。

show-first-on-submit

在点击提交表单按钮后请求接口前，会去校验所有控件的值是否有效，如果有校验不符合的，报告第一个校验不符合的信息。当控件的值校验不符合后，用户输入/选择符合的值后，控件会被报告有效。

input-interact-and-submit

• 当用户正在输入时，会实时去校验当前控件的值是否有效。如果无效，实时报告校验不符合的信息。
• 当点击提交表单按钮后请求接口前，会去校验所有控件的值是否有效，如果有校验不符合的，报告所有校验不符合的信息。

change-interact-and-submit

• 当用户输入完成后，会去校验当前控制的值是否有效。如果无效，报告校验不符合的信息。
• 当点击提交表单按钮后请求接口前，会去校验所有控件的值是否有效，如果有校验不符合的，报告所有校验不符合的信息。

change-interact-and-first-submit

• 当用户输入完成后，会去校验当前控制的值是否有效。如果无效，报告校验不符合的信息。
• 当点击提交表单按钮后请求接口前，会去校验所有控件的值是否有效，如果有校验不符合的，报告第一个校验不符合的信息。

重新初始化表单默认数据。

提交表单。

将表单中的所有输入重置为其初始值，不需要参数。

更新某个表单控件的值。

给表单的第一个带有 autofocus 属性的元素获得焦点，不需要参数。

重新校验表单，不需要参数。

当表单提交成功时该事件会自动触发。event 对象数据为 action-xhr 配置的URL接口返回的数据。

当表单提交失败时该事件会自动触发。event 对象数据为 action-xhr 配置的URL接口返回的数据。

当表单校验有效时该事件会自动触发。

当表单校验无效时该事件会自动触发。