面试题：Svelte 中如何实现表单的基本事件绑定与简单数据验证

Question

在Svelte中，假设有一个包含用户名和密码的登录表单。请阐述如何使用Svelte的事件绑定机制，为用户名输入框添加input事件，实时获取输入值，并对用户名长度进行简单验证（要求长度至少为3个字符）。同时说明如何将验证结果实时反馈给用户。

Answer 1

1. HTML部分：

   <script>
       let username = '';
       let usernameError = '';
   
       function handleUsernameInput() {
           if (username.length < 3) {
               usernameError = '用户名长度至少为3个字符';
           } else {
               usernameError = '';
           }
       }
   </script>
   
   <input type="text" bind:value={username} on:input={handleUsernameInput}>
   {#if usernameError}
       <p style="color: red">{usernameError}</p>
   {/if}
   

2. 解释：
   • 首先，在<script>标签内定义了两个变量，username用于存储用户名输入框的值，usernameError用于存储验证错误信息，初始值为空字符串。
   • handleUsernameInput函数在用户名输入框触发input事件时被调用。在函数内，通过判断username的长度是否小于3来决定是否设置错误信息。
   • 在<input>标签中，使用bind:value将输入框的值绑定到username变量，这样输入框的值变化会实时更新username。同时使用on:input绑定handleUsernameInput函数，以便在输入值变化时触发验证。
   • 最后，使用Svelte的{#if}块，当usernameError不为空字符串时，显示错误信息给用户。