面试题：Svelte 生命周期函数在复杂表单联动验证中的应用

Question

现有一个 Svelte 表单，包含多个输入字段，分别为用户名、密码、确认密码、手机号码。要求：使用 Svelte 的生命周期函数实现密码和确认密码的一致性验证，同时当用户名长度超过10位时，自动清空手机号码输入框。请阐述实现思路并给出核心代码。

Answer 1

实现思路

1. 密码一致性验证：利用 $: 响应式语句，每当密码或确认密码字段的值发生变化时，检查两者是否一致。
2. 用户名长度检查与清空手机号码：同样使用 $: 响应式语句，当用户名的值发生变化时，检查其长度是否超过10位，若超过则清空手机号码输入框。

核心代码

<script>
    let username = '';
    let password = '';
    let confirmPassword = '';
    let phoneNumber = '';

    // 密码一致性验证
    $: isPasswordMatch = password === confirmPassword;

    // 用户名长度检查与清空手机号码
    $: {
        if (username.length > 10) {
            phoneNumber = '';
        }
    }
</script>

<form>
    <label for="username">用户名:</label>
    <input type="text" bind:value={username} id="username">

    <label for="password">密码:</label>
    <input type="password" bind:value={password} id="password">

    <label for="confirmPassword">确认密码:</label>
    <input type="password" bind:value={confirmPassword} id="confirmPassword">
    {#if!isPasswordMatch}
        <p>密码不一致</p>
    {/if}

    <label for="phoneNumber">手机号码:</label>
    <input type="text" bind:value={phoneNumber} id="phoneNumber">
</form>