Svelte中如何为对接Firebase的提交表单添加非空校验

直接按下面修改代码即可，不需要额外安装依赖：

1. 首先修改<script>块内容，新增错误状态变量，在提交逻辑前加入非空判断

<script>
  // 原有引入逻辑保持不变
  import tilt from "svelte-tilt";
  import { ConfettiExplosion } from "svelte-confetti-explosion";
  import { clickOutside } from "./clickOutside.js";
  import { Router, Route, Link } from "svelte-routing";
  import Privacy from "../routes/privacy.svelte";
  import { db } from "../firebase/config";
  import { collection, doc, setDoc } from "firebase/firestore";

  // 修复原代码语法错误：第二个Test Data的引号嵌套问题
  let data = [
    "Test Data","Test Data"
  ];
  let isVisible = false;
  let openModel = false;
  // 新增：表单错误提示响应变量
  let formError = "";

  const toggleModel = () => {
    openModel = !openModel;
    if (openModel === true) {
      isVisible = true;
    }
  };

  let userName = "";
  let userMail = "";

  let addData = async () => {
    // 每次提交先清空历史错误提示
    formError = "";

    // 非空校验，自动过滤首尾空格
    if (!userName.trim()) {
      formError = "请输入姓名";
      return;
    }
    if (!userMail.trim()) {
      formError = "请输入邮箱";
      return;
    }

    // 校验通过才执行Firebase提交
    const Data = collection(db, "waitlist users");
    try {
      await setDoc(doc(Data), {
        name: userName.trim(),
        email: userMail.trim(),
      });
      // 提交成功清空输入框
      userName = "";
      userMail = "";
      toggleModel();
    } catch (error) {
      formError = "提交失败，请稍后再试";
      console.log(error);
    }
  };
</script>

2. 在表单的提交按钮上方加入错误提示渲染块，找到原代码里包裹Join按钮的<div class=" flex justify-end">标签，在它前面插入下面这段代码：

<!-- 错误提示展示区域 -->
{#if formError}
  <p class="text-red-400 text-sm text-left mt-3 mb-1">* {formError}</p>
{/if}

补充说明 #

• 校验逻辑加了.trim()处理，能拦住用户只输入空格的无效提交
• 原代码里"Test"Data"存在引号未闭合的语法错误，上述代码已经直接修复，否则项目启动会报编译错误
• 输入框上原有的required原生属性可以删掉，自定义校验逻辑已经完全覆盖非空判断需求，不会和原生校验产生冲突
• 提交失败（比如网络异常、Firebase权限问题）时也会在同一位置展示错误提示，不需要额外加弹窗组件

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