为了账号安全,请及时绑定邮箱和手机立即绑定
首页 手记 【金秋打卡】第17天 单表管理功能前后端开发

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

2022.11.09 20:59 64浏览

课程名称: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;
}


效果如图所示

https://img3.sycdn.imooc.com/636707eb0001875e19190919.jpg

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


点击查看更多内容
0人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消