【金秋打卡】第17天 单表管理功能前后端开发

课程名称：Spring Cloud+ Vue前后端分离开发企业级在线视频系统

课程章节：第5章 单表管理功能前后端开发

讲师姓名：甲蛙老师

课程内容：

前端数据校验：增加工具类tool.js和校验类validator.js，大章保存非空和长度增加校验

课程收获：

前端校验主要是针对用户输入时，一些基础的错误进行提示，提升用户体验。比如：参数为空，密码邮箱的组合规则等。归根到底是对所有请求的一种过滤操作，如果前端都校验不通过当然就没必要请求后端了，这样可以减轻服务器负担。

Validator.js也是一种可以提取出的校验组件，代码如下：

Validator = {
   require: function (value, text) {
     if (Tool.isEmpty(value)) {
       Toast.warning(text + "不能为空");
       return false;
     } else {
       return true
     }
   },

   length: function (value, text, min, max) {
     if (Tool.isEmpty(value)) {
       return true;
     }
     if (!Tool.isLength(value, min, max)) {
       Toast.warning(text + "长度" + min + "~" + max + "位");
       return false;
     } else {
       return true
     }
   }
 };

它提供了空值校验与长度控制的功能，

// 保存校验
if (!Validator.require(_this.chapter.name, "名称")
   || !Validator.require(_this.chapter.courseId, "课程ID")
   || !Validator.length(_this.chapter.courseId, "课程ID", 1, 8)) {
   return;
 }

效果如图所示

但是：对于某些不走寻常路的用户，前端校验其实形同虚设，所以需要在后端进行同样的数据校验。