Vue+Element-UI的表单验证,注意的点有以下:
- ref :该属性相当于一个id,可以获取该表单对象
- model :不设置该属性,失去焦点后错误消息还会继续存在
- rules :绑定校验的规则
- prop :关联规则设置的属性
Vue实例:
var vue = new Vue({
el: '#app',
data: {
//表单数据
formData: {},
//校验规则
rules: {
code: [{required: true, message: '项目编码为必填项', trigger: 'blur'}],
name: [{required: true, message: '项目名称为必填项', trigger: 'blur'}]
}
},
methods: {
//表单校验
validate() {
this.$refs["dataAddForm"].validate((valid) => {
//校验成功
if (valid) {
this.$message.success("数据校验成功");
} else {
//校验失败
this.$message.error("数据校验失败");
return false;
}
})
}
// 重置表单
resetForm() {
this.formData = {};
//新增表单全部项和错误提示也一并重置
if ( this .$refs["dataAddForm"]!==undefined) {
this.$refs["dataAddForm"].resetFields();
}
}
}
})
输入框输入信息,失去焦点后错误消息还继续存在。
是因为表单没有绑定 model,必须加上model属性