40-vue的表单的校验规则

演示实例用的是elementplus框架
rules属性
(1)首先给表单添加绑定rules属性
【表单的ref属性相当于id】
40-vue的表单的校验规则

(2)编写rules的值,即编写规则
40-vue的表单的校验规则

(3)注意,rules里面的值,跟我们data中定义的username、password、code是没有关系的,跟formitem的prop属性的值相关联
40-vue的表单的校验规则
Form-Item中的prop属性设置需要校验的字段名

(4)对button进行处理,如果输入不正确,不允许登录
给button绑定submitLogin方法
40-vue的表单的校验规则
/
/
/
this.$message.error('请正确输入所有字段!')是消息弹出框,如果输入不正确会弹出这个。
还有一种消息弹出框的写法如下
ElMessage.error('请正确输入所有字段!')
但是需要导入ElMessage(alt + enter自动导入)
import {ElMessage} from "element-plus";

上一篇:Spring - 40 个 Spring Boot 常用注解


下一篇:Qt开源作品40-图片及文字与base64编码互换