//element form ,通过this.$refs.form.validate打印出来的element源码
validate: function validate(callback) {
var _this2 = this; if (!this.model) {
console.warn('[Element Warn][Form]model is required for validate to work!');
return;
}
var promise = void 0;
// if no callback, return promise
if (typeof callback !== 'function' && window.Promise) {
promise = new window.Promise(function (resolve, reject) {
callback = function callback(valid) {
valid ? resolve(valid) : reject(valid);
};
});
}
var valid = true;
var count = 0;
// 如果需要验证的fields为空,调用验证时立刻返回callback
if (this.fields.length === 0 && callback) {
callback(true);
}
var invalidFields = {};
this.fields.forEach(function (field) {
field.validate('', function (message, field) {
if (message) {
valid = false;
}
invalidFields = merge_default()({}, invalidFields, field);
if (typeof callback === 'function' && ++count === _this2.fields.length) {
callback(valid, invalidFields);
}
});
});
if (promise) {
return promise;
}
},
我们可以看到,要使用validate属性,首先必须保证,你需要在el-form标签中使用 :model,而不是v-model 。
不然就会按照源码上爆出
console.warn('[Element Warn][Form]model is required for validate to work!');
错误
然后需要在有一个rules
这里的my-input由于是使用了组件,实际上这个rules是赋给el-form-item标签上的
<el-form-item :prop="prop" :label="label" :rules="rulesList">
this.rulesList = [].concat(this.rules)
//提交的时候执行的逻辑
handleConfirm() {
console.log(this.$refs.form.validate, 'data')
this.$refs.form.validate(async valid => {
console.log(valid, 'valid')
if (valid) {
if (!this.extraCheck()) {
return
}
this.confirm_loading = true
try {
var params = {}
params.name = this.form.name
params.parentId = this.form.parentId
params.gradle = this.form.gradle + 1
params.sortIndex = this.form.sortIndex
this.hierarchyApi.create(params).then(res => {
this.$emit('save')
this.$message.success('操作成功')
})
} catch (error) {
console.log(error)
}
this.confirm_loading = false
} else {
this.$message.warning('请完善数据')
}
})
}
我会回去源码中,如果需要做验证,就必须要把需要做验证的数据放到fields属性里面,才会生效,这就必须要给 :prop=’’ ,给了这个属性赋值,同时rules中有message存在,就可以实现提交表单的时候检测规则。