面试题：Svelte 中如何使用生命周期函数实现基本的表单输入合法性验证

Question

假设你有一个简单的 Svelte 表单，包含一个输入框用于输入邮箱地址。请描述如何利用 Svelte 的生命周期函数，在用户输入完成后验证邮箱格式是否合法，并给出相应的代码示例。

Answer 1

1. 利用 $: 响应式声明和 on:blur 事件：
   • 在 Svelte 中，可以利用 $: 来创建响应式声明，当相关变量变化时会自动运行。同时结合输入框的 on:blur 事件，在用户输入完成并失去焦点时进行验证。
   • 代码示例：

<script>
    let email = '';
    let isValid = true;

    const validateEmail = () => {
        const re = /\S+@\S+\.\S+/;
        isValid = re.test(email);
    };
</script>

<label for="email">邮箱地址:</label>
<input type="email" bind:value={email} on:blur={validateEmail}>

{#if!isValid}
    <p style="color: red;">邮箱格式不合法</p>
{/if}

2. 利用 afterUpdate 生命周期函数（虽然不太常用在此场景，但也可实现类似效果）：
   • afterUpdate 会在组件更新后运行。我们可以在输入框值变化时设置一个标志，然后在 afterUpdate 中验证邮箱。
   • 代码示例：

<script>
    import { afterUpdate } from'svelte';
    let email = '';
    let isValid = true;
    let shouldValidate = false;

    const validateEmail = () => {
        const re = /\S+@\S+\.\S+/;
        isValid = re.test(email);
    };

    afterUpdate(() => {
        if (shouldValidate) {
            validateEmail();
            shouldValidate = false;
        }
    });
</script>

<label for="email">邮箱地址:</label>
<input type="email" bind:value={email} on:input={() => shouldValidate = true}>

{#if!isValid}
    <p style="color: red;">邮箱格式不合法</p>
{/if}