Svelte中如何实现表单提交后输入事件仅触发一次？

核心思路是用开关变量控制错误清除逻辑的触发时机：每次表单提交时打开开关，第一次输入后关闭开关，以此实现「每次提交后仅触发一次清除错误」的效果。

具体实现步骤 #

1. 定义响应式开关变量与处理函数

<script>
  import { form } from 'svelte-forms-lib'; // 假设使用的是该表单库

  // 为每个需要控制的字段定义开关，初始为关闭状态
  let shouldClearErrors = {
    email: false,
    password: false
  };

  // 表单提交处理逻辑
  const handleSubmit = async () => {
    const { valid } = await $form.validate();
    if (!valid) {
      // 验证不通过时，打开对应字段的清除开关
      shouldClearErrors.email = true;
      shouldClearErrors.password = true;
    } else {
      // 表单提交成功的逻辑...
    }
  };

  // 通用的错误清除控制函数
  const clearErrorIfAllowed = (field) => {
    if (shouldClearErrors[field]) {
      $form.clearErrors(field);
      shouldClearErrors[field] = false; // 触发后立即关闭开关
    }
  };
</script>

2. 绑定输入事件到表单字段

<!-- 邮箱输入框 -->
<input
  type="email"
  name="email"
  on:input={() => clearErrorIfAllowed('email')}
  class="form-control"
>
{#if $form.errors.email}
  <div class="invalid-feedback">{$form.errors.email}</div>
{/if}

<!-- 密码输入框 -->
<input
  type="password"
  name="password"
  on:input={() => clearErrorIfAllowed('password')}
  class="form-control"
>
{#if $form.errors.password}
  <div class="invalid-feedback">{$form.errors.password}</div>
{/if}

<!-- 提交按钮 -->
<button type="button" on:click={handleSubmit} class="btn btn-primary">提交</button>

为什么on:input|once不符合需求？ #

|once修饰符是永久绑定的，一旦触发过一次输入事件，就会自动解绑该事件监听。后续即使重新提交表单，输入事件也不会再触发，无法实现「每次提交后可重新触发」的要求。而开关变量的方式可以灵活控制：每次提交表单时重新打开开关，让下一次输入能触发清除逻辑，触发后立刻关闭开关避免重复执行。

内容的提问来源于stack exchange，提问作者user21932874