面试题：Svelte表单复杂数据验证与联动事件处理

Question

在Svelte应用中，有一个注册表单，包含用户名、邮箱、密码和确认密码字段。用户名要求只能包含字母和数字且长度为6 - 12位；邮箱需符合邮箱格式；密码和确认密码要一致。请详细说明如何使用Svelte的响应式系统和事件绑定，实现上述复杂数据验证逻辑，并且当用户名验证通过后，自动触发邮箱输入框的聚焦。同时，展示如何优雅地处理验证失败时的错误提示。

Answer 1

1. HTML 结构：

   <form>
       <label for="username">用户名:</label>
       <input type="text" bind:value={username} id="username" />
       {#if usernameError}
           <p style="color: red">{usernameError}</p>
       {/if}
   
       <label for="email">邮箱:</label>
       <input type="email" bind:value={email} id="email" />
       {#if emailError}
           <p style="color: red">{emailError}</p>
       {/if}
   
       <label for="password">密码:</label>
       <input type="password" bind:value={password} id="password" />
       {#if passwordError}
           <p style="color: red">{passwordError}</p>
       {/if}
   
       <label for="confirmPassword">确认密码:</label>
       <input type="password" bind:value={confirmPassword} id="confirmPassword" />
       {#if confirmPasswordError}
           <p style="color: red">{confirmPasswordError}</p>
       {/if}
   
       <button type="submit" on:click|preventDefault={handleSubmit}>注册</button>
   </form>
   

2. Svelte 脚本部分：

   <script>
       let username = '';
       let usernameError = '';
       let email = '';
       let emailError = '';
       let password = '';
       let passwordError = '';
       let confirmPassword = '';
       let confirmPasswordError = '';
   
       const handleSubmit = () => {
           validateUsername();
           validateEmail();
           validatePassword();
           validateConfirmPassword();
   
           if (!usernameError &&!emailError &&!passwordError &&!confirmPasswordError) {
               // 提交表单逻辑，这里省略具体实现
               console.log('表单验证通过，可提交');
           }
       };
   
       const validateUsername = () => {
           const usernameRegex = /^[A-Za-z0-9]{6,12}$/;
           if (!usernameRegex.test(username)) {
               usernameError = '用户名只能包含字母和数字且长度为6 - 12位';
           } else {
               usernameError = '';
               // 用户名验证通过后聚焦邮箱输入框
               const emailInput = document.getElementById('email');
               if (emailInput) {
                   emailInput.focus();
               }
           }
       };
   
       const validateEmail = () => {
           const emailRegex = /^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/;
           if (!emailRegex.test(email)) {
               emailError = '邮箱格式不正确';
           } else {
               emailError = '';
           }
       };
   
       const validatePassword = () => {
           if (password.length < 6) {
               passwordError = '密码长度至少为6位';
           } else {
               passwordError = '';
           }
       };
   
       const validateConfirmPassword = () => {
           if (confirmPassword!== password) {
               confirmPasswordError = '两次输入的密码不一致';
           } else {
               confirmPasswordError = '';
           }
       };
   </script>
   

3. 说明：
   • 响应式系统：Svelte 使用 let 声明变量，当变量值改变时，与之绑定的 DOM 元素会自动更新。例如 username 变量改变时，input 元素的值会相应改变，同时依赖 username 的验证逻辑和错误提示也会更新。
   • 事件绑定：on:click|preventDefault={handleSubmit} 绑定了按钮的点击事件，preventDefault 阻止了表单的默认提交行为，确保在验证通过后才进行提交操作。
   • 错误提示处理：每个字段都有对应的错误提示变量（如 usernameError），当验证失败时设置相应的错误信息，通过 {#if errorVariable} 语法在页面上展示错误提示，验证通过时清空错误提示信息。
   • 自动聚焦：在 validateUsername 函数中，当用户名验证通过后，获取邮箱输入框元素并调用 focus 方法使其聚焦。