为防止用户犯错,尽可能更早地发现并纠正错误。
Element中Form (表单)组件提供了表单验证的功能,只需要通过 rules 属性传入约定的验证规则,并将 Form-Item 的 prop 属性设置为需校验的字段名即可。
注意:prop对应表单域 model 字段,使用 validate方法时,该属性是必填的。
表单验证rules
以官网给出的例子分析来看
将prop
属性设置为需校验的字段名。
在data里配置要校验字段和校验规则:
required:true表示为必须输入;
message:""设置不符合校验规则时的提示信息;
trigger:""设置校验的触发方式:
‘change’:数据改变时触发;
‘blur’:失去焦点时触发;
没有进行任何输入时,不会触发change,但一定会触发blur事件。
设置校验规则后,表头会出现红色*样式
该示例完整代码:
-
立即创建
重置
export default {
data() {
return {
ruleForm: {
name: "',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
},
rules: {
name: [
{ required: true, message: '请输入活动名称', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
],
region: [
{ required: true, message: '请选择活动区域', trigger: 'change' }
],
date1: [
{ type: 'date', required: true, message: '请选择日期', trigger: 'change' }
],
date2: [
{ type: 'date', required: true, message: '请选择时间', trigger: 'change' }
],
type: [
{ type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
],
resource: [
{ required: true, message: '请选择活动资源', trigger: 'change' }
],
desc: [
{ required: true, message: '请填写活动形式', trigger: 'blur' }
]
}
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
}
自定义校验规则
除此之外,我们还可以使用validator验证器来自定义校验规则,
举一个使用自定义验证规则来完成密码的二次验证的例子。
还是和之前一样,设置prop需校验的字段名和v-model绑定值
但这时,我们需要在data中自己定义校验规则,需要注意的是,设置的规则与return同级。
在rules中配置要校验的字段和用到的规则
完整代码如下:
提交
重置
export default {
data() {
var checkAge = (rule, value, callback) => {
if (!value) {
return callback(new Error("年龄不能为空'));
}
setTimeout(() => {
if (!Number.isInteger(value)) {
callback(new Error('请输入数字值'));
} else {
if (value {
if (value === '') {
callback(new Error('请输入密码'));
} else {
if (this.ruleForm.checkPass !== '') {
this.$refs.ruleForm.validateField('checkPass');
}
callback();
}
};
var validatePass2 = (rule, value, callback) => {
if (value === '') {
callback(new Error('请再次输入密码'));
} else if (value !== this.ruleForm.pass) {
callback(new Error('两次输入密码不一致!'));
} else {
callback();
}
};
return {
ruleForm: {
pass: '',
checkPass: '',
age: ''
},
rules: {
pass: [
{ validator: validatePass, trigger: 'blur' }
],
checkPass: [
{ validator: validatePass2, trigger: 'blur' }
],
age: [
{ validator: checkAge, trigger: 'blur' }
]
}
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
}