表单上传的前后端验证及统一异常处理

Lucien Alborán

已于 2022-06-17 20:27:52 修改

阅读量588

点赞数 1

文章标签：前端 vue.js javascript

于 2022-06-13 13:21:20 首次发布

本文链接：https://blog.csdn.net/weixin_49260963/article/details/125257989

版权

本文探讨了为何前端验证后后端仍需验证表单内容的原因，并详细介绍了利用element-ui在前端进行表单验证的方法。后端方面，通过JSR303的validation-api实现Bean的校验，包括基本注解、分组校验和自定义校验。最后，文章讲解了如何通过@ControllerAdvice进行后端异常的统一处理。

摘要由CSDN通过智能技术生成

1、为什么前端验证完、后端还要继续验证表单内容？

因为可以绕过前端给服务器发送请求，例如postman。

2、前端验证（element-ui实现）

（1）在表单头绑定 rules规则： <el-form :model="dataForm" :rules="dataRule">

（2）在method里实现rules规则，需要校验的属性需要意义实现对应规则，格式为属性：[校验规则回调信息触发规则]，也可以自定义实现校验规则，但是自定义实现规则需要(rule, value, callback)三个参数。

      dataRule: {
        name: [
          { required: true, message: '品牌名不能为空', trigger: 'blur' }
        ],
        logo: [
          { required: true, message: '品牌logo地址不能为空', trigger: 'blur' }
        ],
        descript: [
          { required: true, message: '介绍不能为空', trigger: 'blur' }
        ],
        showStatus: [
          { required: true, message: '显示状态[0-不显示；1-显示]不能为空', trigger: 'blur' }
        ],
        firstLetter: [
          {
            validator: (rule, value, callb