面试题：Svelte 生命周期函数在动态表单验证及异步数据处理中的深度应用

Question

假设有一个动态生成的 Svelte 表单，每个表单项根据后端返回的数据决定是否显示及验证规则。例如，后端返回一个包含用户信息的数组，数组中每个对象有 'fieldName'（字段名）、'isRequired'（是否必填）、'validationRule'（验证规则）等属性。在表单提交时，需要根据这些动态规则进行验证，并在验证通过后将表单数据异步提交到后端接口。请详细说明如何利用 Svelte 的生命周期函数完成上述需求，包括数据初始化、验证逻辑实现、异步提交处理等方面，并给出关键代码片段。

Answer 1

1. 数据初始化

在 Svelte 组件中，我们可以在 onMount 生命周期函数中获取后端数据并初始化表单。

<script>
  import { onMount } from'svelte';
  let formData = {};
  let fields = [];

  onMount(async () => {
    const response = await fetch('/api/getUserFields');
    const data = await response.json();
    fields = data;
    // 初始化 formData
    fields.forEach(field => {
      formData[field.fieldName] = '';
    });
  });
</script>

2. 验证逻辑实现

我们可以创建一个验证函数，该函数根据后端返回的验证规则对表单数据进行验证。

<script>
  function validateForm() {
    let isValid = true;
    fields.forEach(field => {
      const value = formData[field.fieldName];
      if (field.isRequired && (!value || value.trim() === '')) {
        isValid = false;
        return;
      }
      // 假设 validationRule 是正则表达式字符串
      if (field.validationRule &&!new RegExp(field.validationRule).test(value)) {
        isValid = false;
        return;
      }
    });
    return isValid;
  }
</script>

3. 异步提交处理

在表单提交时，先调用验证函数，验证通过后进行异步提交。

<script>
  async function handleSubmit() {
    if (validateForm()) {
      const response = await fetch('/api/submitForm', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(formData)
      });
      const result = await response.json();
      if (result.success) {
        console.log('Form submitted successfully');
      } else {
        console.log('Form submission failed');
      }
    } else {
      console.log('Form validation failed');
    }
  }
</script>

<form on:submit|preventDefault={handleSubmit}>
  {#each fields as field}
    {#if field.isVisible}
      <label>{field.fieldName}</label>
      <input type="text" bind:value={formData[field.fieldName]} />
    {/if}
  {/each}
  <button type="submit">Submit</button>
</form>

上述代码中：

• 在 onMount 生命周期函数中获取后端数据并初始化 formData。
• validateForm 函数根据后端返回的验证规则验证表单数据。
• handleSubmit 函数在表单提交时先验证，验证通过后异步提交数据到后端。
• 表单通过 bind:value 双向绑定数据，并在提交时调用 handleSubmit 函数。