面试题：Solid.js createSignal在复杂表单实时验证及动态表单生成中的深度应用

设计思路

数据获取：通过 fetch 等方式从后端获取表单字段数据。
动态创建字段：使用 Solid.js 的响应式系统，根据后端数据动态生成表单字段。
实时验证：为每个字段定义验证函数，在输入变化时实时调用验证函数。
状态管理：利用 createSignal 管理表单字段的值和验证状态，确保动态添加和删除字段时状态的一致性。

核心数据结构

表单字段数据：从后端获取的数组，每个元素代表一个表单字段，包含字段名称、类型、验证规则等信息。

// 示例后端返回数据
const formFieldsData = [
    { name: 'username', type: 'text', validators: ['required', 'unique'] },
    { name: 'email', type: 'email', validators: ['required', 'emailFormat'] }
];

表单状态：使用 createSignal 创建表单字段的值和验证结果的信号。

import { createSignal } from'solid-js';

// 创建表单字段值的信号
const [fieldValues, setFieldValues] = createSignal({});
// 创建表单字段验证结果的信号
const [fieldValidations, setFieldValidations] = createSignal({});

关键代码实现

获取后端数据并初始化表单

import { createEffect } from'solid-js';

createEffect(() => {
    fetch('/api/form-fields')
      .then(response => response.json())
      .then(data => {
            const initialValues = {};
            const initialValidations = {};
            data.forEach(field => {
                initialValues[field.name] = '';
                initialValidations[field.name] = { isValid: true, errorMessage: '' };
            });
            setFieldValues(initialValues);
            setFieldValidations(initialValidations);
        });
});

动态生成表单字段

import { createSignal, JSX } from'solid-js';

const Form = () => {
    const [fieldValues, setFieldValues] = createSignal({});
    const [fieldValidations, setFieldValidations] = createSignal({});
    const [formFieldsData, setFormFieldsData] = createSignal<{ name: string; type: string; validators: string[] }[]>([]);

    createEffect(() => {
        fetch('/api/form-fields')
          .then(response => response.json())
          .then(data => setFormFieldsData(data));
    });

    return (
        <form>
            {formFieldsData().map(field => (
                <div key={field.name}>
                    <label>{field.name}</label>
                    <input
                        type={field.type}
                        value={fieldValues()[field.name]}
                        onChange={(e) => {
                            const newValues = {...fieldValues() };
                            newValues[field.name] = e.target.value;
                            setFieldValues(newValues);
                            // 调用验证函数
                            const newValidations = {...fieldValidations() };
                            const isValid = validateField(field, e.target.value);
                            newValidations[field.name] = { isValid, errorMessage: getErrorMessage(field, e.target.value) };
                            setFieldValidations(newValidations);
                        }}
                    />
                    {!fieldValidations()[field.name].isValid && <span style={{ color:'red' }}>{fieldValidations()[field.name].errorMessage}</span>}
                </div>
            ))}
        </form>
    );
};

const validateField = (field: { name: string; type: string; validators: string[] }, value: string) => {
    // 简单示例，实际应根据不同验证规则实现
    if (field.validators.includes('required') && value === '') return false;
    if (field.type === 'email' &&!value.match(/^[\w -]+(\.[\w -]+)*@([\w -]+\.)+[a-zA - Z]{2,7}$/)) return false;
    return true;
};

const getErrorMessage = (field: { name: string; type: string; validators: string[] }, value: string) => {
    if (field.validators.includes('required') && value === '') return 'This field is required';
    if (field.type === 'email' &&!value.match(/^[\w -]+(\.[\w -]+\.)+[a-zA - Z]{2,7}$/)) return 'Invalid email format';
    return '';
};

export default Form;

动态添加和删除字段

const addField = (newField) => {
    const newData = [...formFieldsData()];
    newData.push(newField);
    setFormFieldsData(newData);

    const newValues = {...fieldValues() };
    newValues[newField.name] = '';
    setFieldValues(newValues);

    const newValidations = {...fieldValidations() };
    newValidations[newField.name] = { isValid: true, errorMessage: '' };
    setFieldValidations(newValidations);
};

const removeField = (fieldName) => {
    const newData = formFieldsData().filter(field => field.name!== fieldName);
    setFormFieldsData(newData);

    const newValues = {...fieldValues() };
    delete newValues[fieldName];
    setFieldValues(newValues);

    const newValidations = {...fieldValidations() };
    delete newValidations[fieldName];
    setFieldValidations(newValidations);
};

通过上述设计思路、核心数据结构和关键代码实现，可以利用 Solid.js 的 createSignal 实现一个动态生成且具有实时验证功能的复杂表单，同时有效管理动态添加和删除字段时的状态。

星途面试题库

面试题：Solid.js createSignal在复杂表单实时验证及动态表单生成中的深度应用

知识考点

面试题答案

设计思路

核心数据结构

关键代码实现