如何使用Laravel验证规则校验JavaScript对象？

直接复用Laravel后端的验证规则在前端做校验，避免重复写逻辑和多余请求，核心思路是把后端规则传到前端，再用JS实现对应规则的校验逻辑，以下是具体实现步骤：

1. 把后端验证规则传到前端 #

在Laravel控制器里，把你的验证规则转成JSON格式，传递到视图的全局变量中：

// 后端控制器代码
$validationRules = [
    'email' => 'required|email',
    'age' => ['accepted', 'integer']
];

return view('your-frontend-view')->with('rules', json_encode($validationRules));

在前端视图里，把规则转成JS对象：

<script>
// 从后端拿到验证规则
const validationRules = {!! $rules !!};
// 你的表单数据对象
const formData = {
    email: 'email@gmail.com',
    age: 24,
    name: 'john'
};
</script>

2. 实现JS版的Laravel规则校验器 #

封装一个校验函数，对应Laravel原生规则的逻辑，先实现常用规则，后续可按需扩展：

// 定义各规则的校验逻辑
const ruleValidators = {
    // 必填规则
    required: (value) => {
        return value !== null && value !== undefined && value.toString().trim() !== '';
    },
    // 邮箱格式校验
    email: (value) => {
        const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
        return emailPattern.test(value);
    },
    // 整数校验
    integer: (value) => {
        return Number.isInteger(Number(value));
    },
    // accepted规则（用于复选框等，值为true/1/'yes'）
    accepted: (value) => {
        return value === true || value === 1 || value === 'yes';
    }
};

// 核心校验函数
function validateForm(data, rules) {
    const errors = {};

    // 遍历每个需要校验的字段
    Object.keys(rules).forEach(field => {
        const fieldRules = typeof rules[field] === 'string' 
            ? rules[field].split('|') 
            : rules[field];
        const fieldValue = data[field];

        // 逐个校验当前字段的规则
        fieldRules.forEach(rule => {
            // 处理带参数的规则（比如min:18，这里先简化，后续可扩展）
            const [ruleName, ruleParam] = rule.split(':');
            const validator = ruleValidators[ruleName];

            if (!validator) return; // 跳过未实现的规则

            // 执行校验
            const isValid = ruleParam 
                ? validator(fieldValue, ruleParam) 
                : validator(fieldValue);

            if (!isValid) {
                // 收集错误信息，可自定义提示文本
                errors[field] = errors[field] || [];
                errors[field].push(`请确保${field}符合${ruleName}规则`);
            }
        });
    });

    return errors;
}

3. 使用校验函数实现即时提示 #

在表单输入变化时调用校验函数，即时展示错误：

// 示例：监听输入变化
document.querySelector('#email').addEventListener('input', function() {
    formData.email = this.value;
    const errors = validateForm(formData, validationRules);
    // 渲染错误信息到页面，比如显示在输入框下方
    if (errors.email) {
        document.querySelector('#email-error').textContent = errors.email[0];
    } else {
        document.querySelector('#email-error').textContent = '';
    }
});

// 提交前全量校验
document.querySelector('#submit-btn').addEventListener('click', function(e) {
    const errors = validateForm(formData, validationRules);
    if (Object.keys(errors).length > 0) {
        e.preventDefault();
        // 遍历显示所有错误
        Object.keys(errors).forEach(field => {
            document.querySelector(`#${field}-error`).textContent = errors[field][0];
        });
    }
});

扩展说明 #

如果需要支持更多Laravel原生规则（比如min、max、numeric等），只需要在ruleValidators对象里添加对应的校验逻辑即可，规则的参数处理（比如min:18）可以参考上面的方式拆分解析。

内容的提问来源于stack exchange，提问作者s123