面试题：React 中如何实现表单的实时验证并优化用户体验

Question

假设你正在开发一个包含多个输入字段的 React 表单，要求在用户输入过程中实时验证输入内容的合法性（例如邮箱格式、密码强度等），同时要确保验证过程不会影响用户体验，描述实现思路并给出关键代码示例。

Answer 1

实现思路

1. 使用 React 状态管理：利用 useState 钩子来存储每个输入字段的值和验证状态。
2. 实时验证：在 onChange 事件处理函数中，每次用户输入时触发验证函数。
3. 验证函数：编写专门的验证函数，如验证邮箱格式、密码强度等。
4. 反馈展示：根据验证结果，在输入字段附近展示相应的提示信息，例如通过 CSS 控制提示信息的显示与隐藏及样式。
5. 优化性能：可以使用防抖（Debounce）或节流（Throttle）技术，减少频繁触发验证对性能的影响，确保不影响用户体验。

关键代码示例

import React, { useState } from'react';

// 邮箱验证函数
const validateEmail = (email) => {
    const re = /\S+@\S+\.\S+/;
    return re.test(email);
};

// 密码强度验证函数，简单示例：长度至少6位，包含大写字母、小写字母和数字
const validatePassword = (password) => {
    const re = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{6,}$/;
    return re.test(password);
};

const Form = () => {
    const [email, setEmail] = useState('');
    const [emailError, setEmailError] = useState('');
    const [password, setPassword] = useState('');
    const [passwordError, setPasswordError] = useState('');

    const handleEmailChange = (e) => {
        const value = e.target.value;
        setEmail(value);
        if (!validateEmail(value)) {
            setEmailError('请输入有效的邮箱地址');
        } else {
            setEmailError('');
        }
    };

    const handlePasswordChange = (e) => {
        const value = e.target.value;
        setPassword(value);
        if (!validatePassword(value)) {
            setPasswordError('密码强度不足，需至少6位，包含大写字母、小写字母和数字');
        } else {
            setPasswordError('');
        }
    };

    return (
        <form>
            <label>邮箱:</label>
            <input
                type="email"
                value={email}
                onChange={handleEmailChange}
            />
            {emailError && <span style={{ color:'red' }}>{emailError}</span>}
            <br />
            <label>密码:</label>
            <input
                type="password"
                value={password}
                onChange={handlePasswordChange}
            />
            {passwordError && <span style={{ color:'red' }}>{passwordError}</span>}
        </form>
    );
};

export default Form;

使用防抖优化示例（需引入lodash库）

import React, { useState } from'react';
import { debounce } from 'lodash';

// 邮箱验证函数
const validateEmail = (email) => {
    const re = /\S+@\S+\.\S+/;
    return re.test(email);
};

// 密码强度验证函数，简单示例：长度至少6位，包含大写字母、小写字母和数字
const validatePassword = (password) => {
    const re = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{6,}$/;
    return re.test(password);
};

const Form = () => {
    const [email, setEmail] = useState('');
    const [emailError, setEmailError] = useState('');
    const [password, setPassword] = useState('');
    const [passwordError, setPasswordError] = useState('');

    const debouncedValidateEmail = debounce((value) => {
        if (!validateEmail(value)) {
            setEmailError('请输入有效的邮箱地址');
        } else {
            setEmailError('');
        }
    }, 300);

    const debouncedValidatePassword = debounce((value) => {
        if (!validatePassword(value)) {
            setPasswordError('密码强度不足，需至少6位，包含大写字母、小写字母和数字');
        } else {
            setPasswordError('');
        }
    }, 300);

    const handleEmailChange = (e) => {
        const value = e.target.value;
        setEmail(value);
        debouncedValidateEmail(value);
    };

    const handlePasswordChange = (e) => {
        const value = e.target.value;
        setPassword(value);
        debouncedValidatePassword(value);
    };

    return (
        <form>
            <label>邮箱:</label>
            <input
                type="email"
                value={email}
                onChange={handleEmailChange}
            />
            {emailError && <span style={{ color:'red' }}>{emailError}</span>}
            <br />
            <label>密码:</label>
            <input
                type="password"
                value={password}
                onChange={handlePasswordChange}
            />
            {passwordError && <span style={{ color:'red' }}>{passwordError}</span>}
        </form>
    );
};

export default Form;