在Vuetify表单中通过Model/Controller实现后端验证与弹窗提示

需求概述 #

• 所有字段为空时，弹出提示：You must input all the fields.
• 员工编码为非数字时，弹出提示：Employee Code must be a number.
• 员工编码长度不为5位时，弹出提示：Employee Code is 5 digit only.
• 员工姓名包含数字时，弹出提示：Employee Name must be a letter.
• 所有验证逻辑在Laravel后端（Controller/Model）实现，不添加Vue前端验证规则

1. 后端验证实现（Laravel Controller） #

修改Controller.php的store方法，添加验证逻辑，验证失败时返回错误响应：

public function store(Request $request)
{
    $employee_data = $request->all();
    $errors = [];

    // 验证所有字段是否为空
    if (empty($employee_data['emp_code']) && empty($employee_data['emp_name']) && empty($employee_data['emp_age'])) {
        $errors[] = "You must input all the fields.";
    } else {
        // 验证员工编码
        if (!empty($employee_data['emp_code'])) {
            if (!is_numeric($employee_data['emp_code'])) {
                $errors[] = "Employee Code must be a number.";
            }
            if (strlen($employee_data['emp_code']) != 5) {
                $errors[] = "Employee Code is 5 digit only.";
            }
        }

        // 验证员工姓名（不含数字）
        if (!empty($employee_data['emp_name']) && preg_match('/\d/', $employee_data['emp_name'])) {
            $errors[] = "Employee Name must be a letter.";
        }

        // 可选：验证年龄格式
        if (!empty($employee_data['emp_age']) && !is_numeric($employee_data['emp_age'])) {
            $errors[] = "Age must be a number.";
        }
    }

    // 存在错误时返回422状态码
    if (!empty($errors)) {
        return response()->json(['errors' => $errors], 422);
    }

    // 验证通过，执行插入逻辑
    $employee_code = "12345";
    $employee_model = new EmployeeModel();
    DB::transaction(function() use($employee_model, $employee_data, $employee_code){
        $employee_model->InsertEmployee($employee_data, $employee_code);
    });

    return response()->json(['message' => 'Employee inserted successfully'], 200);
}

2. 前端Vue修改（处理后端错误提示） #

通过Vuetify的v-snackbar组件展示后端返回的验证提示，修改如下：

第一步：添加状态到data #

data: () => ({
    emp_code: null,
    emp_name: null,
    emp_age: null,
    snackbar: false,
    snackbarText: ''
}),

第二步：修改Insert方法处理错误 #

methods: {
    Insert(){
        axios.post('api/employees', {
                emp_code: this.emp_code,
                emp_name: this.emp_name,
                emp_age: this.emp_age
            })
        .then(res => {
            console.log(res.data)
            // 重置表单
            this.emp_code = null
            this.emp_name = null
            this.emp_age = null
            // 提示成功
            this.snackbarText = res.data.message
            this.snackbar = true
        })
        .catch(err => {
            if (err.response?.data?.errors) {
                // 弹出第一个错误提示
                this.snackbarText = err.response.data.errors[0]
                this.snackbar = true
            } else {
                this.snackbarText = 'An error occurred.'
                this.snackbar = true
            }
        })
    }
}

第三步：添加Snackbar到模板 #

在v-row下方添加：

<v-snackbar v-model="snackbar" timeout="3000">
    {{ snackbarText }}
    <template v-slot:action="{ attrs }">
        <v-btn text v-bind="attrs" @click="snackbar = false">
            Close
        </v-btn>
    </template>
</v-snackbar>

3. 可选：Model层验证实现 #

若希望验证逻辑放在Model层，可修改EmployeeModel.php并在Controller捕获异常：

修改EmployeeModel.php #

public function InsertEmployee($employee_data, $employee_code){
    $errors = [];

    if (!empty($employee_data['emp_code'])) {
        if (!is_numeric($employee_data['emp_code'])) {
            $errors[] = "Employee Code must be a number.";
        }
        if (strlen($employee_data['emp_code']) != 5) {
            $errors[] = "Employee Code is 5 digit only.";
        }
    }

    if (!empty($employee_data['emp_name']) && preg_match('/\d/', $employee_data['emp_name'])) {
        $errors[] = "Employee Name must be a letter.";
    }

    if (!empty($errors)) {
        throw new \Exception(implode('; ', $errors));
    }

    // 原有插入逻辑
    $employee_data['EmployeeCode'] = $employee_data['emp_code'];
    $employee_data['EmployeeName'] = $employee_data['emp_name'];
    $employee_data['Age'] = $employee_data['emp_age'];
    $employee_data['UpdatedBy'] = $employee_code;
    $dao_insert_employee = new DAO();
    $dao_insert_employee->InsertEmployee($employee_data, $employee_code);
}

修改Controller.php捕获异常 #

public function store(Request $request)
{
    $employee_data = $request->all();
    $employee_code = "12345";
    $employee_model = new EmployeeModel();
    
    try {
        DB::transaction(function() use($employee_model, $employee_data, $employee_code){
            $employee_model->InsertEmployee($employee_data, $employee_code);
        });
        return response()->json(['message' => 'Employee inserted successfully'], 200);
    } catch (\Exception $e) {
        return response()->json(['errors' => [$e->getMessage()]], 422);
    }
}

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