【vue后台项目】登录篇

150 阅读1分钟

一、用户登录-表单验证-基本验证

配置Form表单验证

  • 必须给el-form组件绑定model为表单数据对象
  • 给需要验证的表单项el-form-item绑定prop属性

image.png

  • 通过el-form组件的rules属性配hi验证规则

image.png image.png

二、用户登录-表单验证-手动验证

点击登录按钮触发表单验证

  • 给el-form设置ref
  • 通过ref获 el-form组件,调用组件的 validate 进行验证

image.png image.png

三、用户登录-表单验证-自定义验证

image.png

image.png image.png image.png image.png

四、总结

image.png

五、封装请求api

src ---> api ---> user.js

image.png

image.png