谷粒商城-day07-表单校验_html-js-css

一些准备工作

dialog 里面加上 active 和 inactive

添加后现在的显示的情况是这样的，这样显示图片不是很美观

使用 image 组件

<el-table-column
  prop="logo"
  header-align="center"
  align="center"
  label="品牌logo地址"
>
  <template slot-scope="scope">
    <el-image
      style="width: 100px; height: 80px"
      :src="scope.row.logo"
      fit="contain"
    >el-image>
  template>
el-table-column>

这里还需要引入 image 组件 src/elementui/index.js

/**
 * UI组件, 统一使用饿了么桌面端组件库(https://github.com/ElemeFE/element）
 *
 * 使用:
 *  1. 项目中需要的组件进行释放(解开注释)
 *
 * 注意:
 *  1. 打包只会包含释放(解开注释)的组件, 减少打包文件大小
 */
import Vue from "vue";
import {
  Pagination,
  Dialog,
  Autocomplete,
  Dropdown,
  DropdownMenu,
  DropdownItem,
  Menu,
  Submenu,
  MenuItem,
  MenuItemGroup,
  Input,
  InputNumber,
  Radio,
  RadioGroup,
  RadioButton,
  Checkbox,
  CheckboxButton,
  CheckboxGroup,
  Switch,
  Select,
  Option,
  OptionGroup,
  Button,
  ButtonGroup,
  Table,
  TableColumn,
  DatePicker,
  TimeSelect,
  TimePicker,
  Popover,
  Tooltip,
  Breadcrumb,
  BreadcrumbItem,
  Form,
  FormItem,
  Tabs,
  TabPane,
  Tag,
  Tree,
  Alert,
  Slider,
  Icon,
  Row,
  Col,
  Upload,
  Progress,
  Spinner,
  Badge,
  Card,
  Rate,
  Steps,
  Step,
  Carousel,
  CarouselItem,
  Collapse,
  CollapseItem,
  Cascader,
  ColorPicker,
  Transfer,
  Container,
  Header,
  Aside,
  Main,
  Footer,
  Timeline,
  TimelineItem,
  Link,
  Divider,
  Image,
  Calendar,
  Loading,
  MessageBox,
  Message,
  Notification
} from "element-ui";

Vue.use(Pagination);
Vue.use(Dialog);
Vue.use(Autocomplete);
Vue.use(Dropdown);
Vue.use(DropdownMenu);
Vue.use(DropdownItem);
Vue.use(Menu);
Vue.use(Submenu);
Vue.use(MenuItem);
Vue.use(MenuItemGroup);
Vue.use(Input);
Vue.use(InputNumber);
Vue.use(Radio);
Vue.use(RadioGroup);
Vue.use(RadioButton);
Vue.use(Checkbox);
Vue.use(CheckboxButton);
Vue.use(CheckboxGroup);
Vue.use(Switch);
Vue.use(Select);
Vue.use(Option);
Vue.use(OptionGroup);
Vue.use(Button);
Vue.use(ButtonGroup);
Vue.use(Table);
Vue.use(TableColumn);
Vue.use(DatePicker);
Vue.use(TimeSelect);
Vue.use(TimePicker);
Vue.use(Popover);
Vue.use(Tooltip);
Vue.use(Breadcrumb);
Vue.use(BreadcrumbItem);
Vue.use(Form);
Vue.use(FormItem);
Vue.use(Tabs);
Vue.use(TabPane);
Vue.use(Tag);
Vue.use(Tree);
Vue.use(Alert);
Vue.use(Slider);
Vue.use(Icon);
Vue.use(Row);
Vue.use(Col);
Vue.use(Upload);
Vue.use(Progress);
Vue.use(Spinner);
Vue.use(Badge);
Vue.use(Card);
Vue.use(Rate);
Vue.use(Steps);
Vue.use(Step);
Vue.use(Carousel);
Vue.use(CarouselItem);
Vue.use(Collapse);
Vue.use(CollapseItem);
Vue.use(Cascader);
Vue.use(ColorPicker);
Vue.use(Transfer);
Vue.use(Container);
Vue.use(Header);
Vue.use(Aside);
Vue.use(Main);
Vue.use(Footer);
Vue.use(Timeline);
Vue.use(TimelineItem);
Vue.use(Link);
Vue.use(Divider);
Vue.use(Image);
Vue.use(Calendar);

Vue.use(Loading.directive);

Vue.prototype.$loading = Loading.service;
Vue.prototype.$msgbox = MessageBox;
Vue.prototype.$alert = MessageBox.alert;
Vue.prototype.$confirm = MessageBox.confirm;
Vue.prototype.$prompt = MessageBox.prompt;
Vue.prototype.$notify = Notification;
Vue.prototype.$message = Message;

Vue.prototype.$ELEMENT = { size: "medium" };

表单前端校验

firstLetter: [
   {
     validator: (rule, value, callback) => {
       if (value === "") {
         callback(new Error("排序字段必须填写"));
       } else if (!/^[a-zA-z]$/.test(value)) {
         callback(new Error("首字母必须a-z或者A-Z之间"));
       } else {
         callback;
       }
     },
     trigger: "blur"
   }
 ],
 sort: [
   {
     validator: (rule, value, callback) => {
       if (value === "") {
         callback(new Error("排序字段必须填写"));
       } else if (!Number.isInteger(value) || value < 0) {
         callback(new Error("排序必须是一个大于等于0的整数"));
       } else {
         callback();
       }
     },
     trigger: "blur"
   }
 ]

<el-form-item label="排序" prop="sort">
  <el-input v-model.number="dataForm.sort" placeholder="排序">el-input>
el-form-item>

后端校验

JSR303

1.给 bean 添加校验注解 constraints 并定义自己的错误提示

2.controller 给参数添加 @Valid 注解

3.给校验的bean后面紧跟一个BindingResult, 就可以获取到校验的结果

 /**
  * 品牌名
  */
 @NotBlank
 private String name;    


@RequestMapping("/save")
//     @RequiresPermissions("product:brand:save")
    public R save(@Valid @RequestBody BrandEntity brand) {
        brandService.save(brand);

        return R.ok();
    }

测试，发送一个 name 为空

@NotBlank(message = "品牌名必须提交")
private String name;

加上提示信息

    /**
     * 保存
     */
    @RequestMapping("/save")
//     @RequiresPermissions("product:brand:save")
public R save(@Valid @RequestBody BrandEntity brand, BindingResult result) {
    if (result.hasErrors()) {
        Map<String, String> map = new HashMap<>();
        //1. 获取校验的错误结果
        result.getFieldErrors().forEach((item) -> {
            //FiledError 获取到错误提示
            String message = item.getDefaultMessage();
            // 获取到错误名字
            String field = item.getField();
            map.put(field, message);
        });
        return R.error(400, "提交的数据不合法").put("data", map);
    } else {
        brandService.save(brand);
    }
    return R.ok();
}

测试

其他字段的校验

/**
 * 品牌logo地址
 */
@NotEmpty
@URL(message = "logo必须是一个合法的url地址")
private String logo;
/**
 * 检索首字母
 */
@NotEmpty
@Pattern(regexp = "/^[a-zA-z]$/", message = "检索首字母必须是一个字母")
private String firstLetter;
/**
 * 排序
 */
@NotNull
@Min(value = 0, message = "排序必须大于等于0")
private Integer sort;

测试

统一异常处理

package com.zhouzhou.gulimall.product.exception;

import com.zhouzhou.common.utils.R;
import lombok.extern.slf4j.Slf4j;
import org.springframework.validation.BindingResult;
import org.springframework.web.bind.MethodArgumentNotValidException;
import org.springframework.web.bind.annotation.ControllerAdvice;
import org.springframework.web.bind.annotation.ExceptionHandler;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestControllerAdvice;

import java.util.HashMap;

/**
 * 集中处理所有异常
 */
@Slf4j
@RestControllerAdvice(basePackages = "com.zhouzhou.gulimall.product.controller")
public class GulimallExceptionControllerAdvice {


    @ExceptionHandler(value = MethodArgumentNotValidException.class)
    public R handleValidException(MethodArgumentNotValidException e){
        log.info("数据校验出现问题{}, 异常类型{}", e.getMessage(), e.getCause());
        BindingResult bindingResult = e.getBindingResult();

        HashMap<String, String> errorMap = new HashMap<>();
        bindingResult.getFieldErrors().forEach(fieldError -> {
            errorMap.put(fieldError.getField(), fieldError.getDefaultMessage());
        });
        return R.error(400, "数据校验出现问题").put("data", errorMap);
    }
}

添加上枚举类

package com.zhouzhou.common.exception;


/***
 * 错误码和错误信息定义类
 * 1. 错误码定义规则为5为数字
 * 2. 前两位表示业务场景，最后三位表示错误码。例如：100001。10:通用 001:系统未知异常
 * 3. 维护错误码后需要维护错误描述，将他们定义为枚举形式
 * 错误码列表：
 *  10: 通用
 *      001：参数格式校验
 *  11: 商品
 *  12: 订单
 *  13: 购物车
 *  14: 物流
 *
 *
 */
public enum BizCodeEnume {
    UNKNOW_EXCEPTION(10000, "系统未知异常"),
    VALID_EXCEPTION(10001, "参数格式校验校验失败");

    private int code;
    private String msg;

    BizCodeEnume(int code, String m sg) {
        this.code = code;
        this.msg = msg;
    }

    public int getCode() {
        return code;
    }

    public String getMsg() {
        return msg;
    }
}

package com.zhouzhou.gulimall.product.exception;

import com.zhouzhou.common.exception.BizCodeEnume;
import com.zhouzhou.common.utils.R;
import lombok.extern.slf4j.Slf4j;
import org.springframework.validation.BindingResult;
import org.springframework.web.bind.MethodArgumentNotValidException;
import org.springframework.web.bind.annotation.ControllerAdvice;
import org.springframework.web.bind.annotation.ExceptionHandler;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestControllerAdvice;

import java.util.HashMap;

/**
 * 集中处理所有异常
 */
@Slf4j
@ResponseBody
@RestControllerAdvice(basePackages = "com.zhouzhou.gulimall.product.controller")
public class GulimallExceptionControllerAdvice {


    @ExceptionHandler(value = MethodArgumentNotValidException.class)
    public R handleValidException(MethodArgumentNotValidException e){
        log.info("数据校验出现问题{}, 异常类型{}", e.getMessage(), e.getCause());
        BindingResult bindingResult = e.getBindingResult();

        HashMap<String, String> errorMap = new HashMap<>();
        bindingResult.getFieldErrors().forEach(fieldError -> {
            errorMap.put(fieldError.getField(), fieldError.getDefaultMessage());
        });
        return R.error(BizCodeEnume.VALID_EXCEPTION.getCode(), BizCodeEnume.VALID_EXCEPTION.getMsg()).put("data", errorMap);
    }

    @ExceptionHandler(value = Throwable.class)
    public R handleException(Throwable throwable){
        return R.error(BizCodeEnume.UNKNOW_EXCEPTION.getCode(), BizCodeEnume.UNKNOW_EXCEPTION.getMsg());
    }

}

controller 只留下 save *** 作，删除 BindingResult result 参数

测试

特别提醒：开启了全局异常处理后一定要把 controller 中的 BindingResult result 参数去掉，否则不会被拦截

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1296231.html

谷粒商城-day07-表单校验

发表评论

评论列表（0条）