对动态添加的行进行验证

document.getElementById('table').addEventListener('input', function(event) {
    if (event.target.tagName === 'INPUT') {
        validateInput(event.target);
    }
});

function validateInput(input) {
    if (input.value.trim() === '') {
        input.classList.add('invalid');
    } else {
        input.classList.remove('invalid');
    }
}

// 使用Vuelidate进行验证
import { required } from '@vuelidate/validators';
import { useVuelidate } from '@vuelidate/core';

export default {
    setup() {
        const state = reactive({
            rows: []
        });

        const rules = {
            rows: {
                $each: {
                    value: required
                }
            }
        };

        const v$ = useVuelidate(rules, state);

        function addRow() {
            state.rows.push({ value: '' });
        }

        return { state, v$, addRow };
    }
};

// 使用React进行优化
import React, { useState } from 'react';

function DynamicForm() {
    const [rows, setRows] = useState([]);

    const addRow = () => {
        setRows([...rows, { value: '' }]);
    };

    const validateRow = (index) => {
        const row = rows[index];
        if (row.value.trim() === '') {
            // 处理验证失败的情况
        }
    };

    return (
        <div>
            {rows.map((row, index) => (
                <div key={index}>
                    <input
                        value={row.value}
                        onChange={(e) => {
                            const newRows = [...rows];
                            newRows[index].value = e.target.value;
                            setRows(newRows);
                            validateRow(index);
                        }}
                    />
                </div>
            ))}
            <button onClick={addRow}>Add Row</button>
        </div>
    );
}