面试题：利用Svelte事件与响应式系统实现复杂表单验证逻辑

Question

给定一个包含多个输入框的复杂表单，包括用户名（必填）、邮箱（需符合邮箱格式）和密码（长度至少6位）。要求使用Svelte的事件绑定和响应式系统，在用户输入时实时验证并在输入框旁显示错误信息，当所有输入都合法时，启用提交按钮。请详细说明实现思路并写出核心代码片段。

Answer 1

实现思路

1. 数据绑定：使用Svelte的bind:value指令将输入框的值绑定到组件内部的变量。
2. 实时验证：利用$:响应式声明，在输入框值变化时实时验证输入是否合法。
3. 错误信息显示：为每个输入框定义一个错误信息变量，根据验证结果更新错误信息。
4. 提交按钮控制：通过一个布尔变量来控制提交按钮的启用状态，只有当所有输入都合法时，该变量为true。

核心代码片段

<script>
    let username = '';
    let usernameError = '';
    let email = '';
    let emailError = '';
    let password = '';
    let passwordError = '';
    let canSubmit = false;

    $: {
        if (username.trim() === '') {
            usernameError = '用户名必填';
        } else {
            usernameError = '';
        }

        const emailRegex = /^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/;
        if (!emailRegex.test(email)) {
            emailError = '邮箱需符合邮箱格式';
        } else {
            emailError = '';
        }

        if (password.length < 6) {
            passwordError = '密码长度至少6位';
        } else {
            passwordError = '';
        }

        canSubmit = usernameError === '' && emailError === '' && passwordError === '';
    }

    function handleSubmit() {
        // 处理提交逻辑
    }
</script>

<label>用户名
    <input type="text" bind:value={username}>
    {#if usernameError}
        <span style="color: red">{usernameError}</span>
    {/if}
</label>

<label>邮箱
    <input type="text" bind:value={email}>
    {#if emailError}
        <span style="color: red">{emailError}</span>
    {/if}
</label>

<label>密码
    <input type="password" bind:value={password}>
    {#if passwordError}
        <span style="color: red">{passwordError}</span>
    {/if}
</label>

<button type="button" disabled={!canSubmit} on:click={handleSubmit}>提交</button>