演示实例用的是elementplus框架
rules属性
(1)首先给表单添加绑定rules属性
【表单的ref属性相当于id】
(2)编写rules的值,即编写规则
(3)注意,rules里面的值,跟我们data中定义的username、password、code是没有关系的,跟formitem的prop属性的值相关联
Form-Item中的prop属性设置需要校验的字段名
(4)对button进行处理,如果输入不正确,不允许登录
给button绑定submitLogin方法
/
/
/
this.$message.error('请正确输入所有字段!')是消息弹出框,如果输入不正确会弹出这个。
还有一种消息弹出框的写法如下
ElMessage.error('请正确输入所有字段!')
但是需要导入ElMessage(alt + enter自动导入)
import {ElMessage} from "element-plus";