mirror of
https://gitee.com/ElemeFE/element.git
synced 2024-11-30 11:17:38 +08:00
add a error prop for setting the error message manually
This commit is contained in:
baiyaaaaa
杨奕
parent
c0e7f6dc87
commit
bb0a79b1b0
@ -820,7 +820,4 @@ Form component allows you to verify your data, helping you find and correct erro
|
||||
| label-width | width of label, e.g. '50px' | string | — | — |
|
||||
| required | whether the field is required or not, will be determined by validation rules if omitted | string | — | false |
|
||||
| rules | validation rules of form | object | — | — |
|
||||
|
||||
|
||||
|
||||
|
||||
| error | field error message, set its value and the field will validate error and show this message immediately | string | — | — |
|
||||
|
||||
@ -811,3 +811,4 @@
|
||||
| label-width | 表单域标签的的宽度，例如 '50px' | string | — | — |
|
||||
| required | 是否必填，如不设置，则会根据校验规则自动生成 | bolean | — | false |
|
||||
| rules | 表单验证规则 | object | — | — |
|
||||
| error | 表单域验证错误信息, 设置该值会使表单验证状态变为`error`，并显示该错误信息 | string | — | — |
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="el-form-item" :class="{
|
||||
'is-error': error !== '',
|
||||
'is-validating': validating,
|
||||
'is-error': validateState === 'error',
|
||||
'is-validating': validateState === 'validating',
|
||||
'is-required': isRequired || required
|
||||
}">
|
||||
<label class="el-form-item__label" v-bind:style="labelStyle" v-if="label">
|
||||
@ -10,7 +10,7 @@
|
||||
<div class="el-form-item__content" v-bind:style="contentStyle">
|
||||
<slot></slot>
|
||||
<transition name="md-fade-bottom">
|
||||
<div class="el-form-item__error" v-if="error !== ''">{{error}}</div>
|
||||
<div class="el-form-item__error" v-if="validateState === 'error'">{{validateMessage}}</div>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
@ -19,6 +19,8 @@
|
||||
import AsyncValidator from 'async-validator';
|
||||
import emitter from 'element-ui/src/mixins/emitter';
|
||||
|
||||
function noop() {}
|
||||
|
||||
export default {
|
||||
name: 'ElFormItem',
|
||||
|
||||
@ -31,7 +33,18 @@
|
||||
labelWidth: String,
|
||||
prop: String,
|
||||
required: Boolean,
|
||||
rules: [Object, Array]
|
||||
rules: [Object, Array],
|
||||
error: String,
|
||||
validateStatus: String
|
||||
},
|
||||
watch: {
|
||||
error(value) {
|
||||
this.validateMessage = value;
|
||||
this.validateState = 'error';
|
||||
},
|
||||
validateStatus(value) {
|
||||
this.validateState = value;
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
labelStyle() {
|
||||
@ -73,23 +86,22 @@
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
valid: true,
|
||||
error: '',
|
||||
validateState: '',
|
||||
validateMessage: '',
|
||||
validateDisabled: false,
|
||||
validating: false,
|
||||
validator: {},
|
||||
isRequired: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
validate(trigger, cb) {
|
||||
validate(trigger, callback = noop) {
|
||||
var rules = this.getFilteredRule(trigger);
|
||||
if (!rules || rules.length === 0) {
|
||||
cb && cb();
|
||||
callback();
|
||||
return true;
|
||||
}
|
||||
|
||||
this.validating = true;
|
||||
this.validateState = 'validating';
|
||||
|
||||
var descriptor = {};
|
||||
descriptor[this.prop] = rules;
|
||||
@ -100,16 +112,15 @@
|
||||
model[this.prop] = this.fieldValue;
|
||||
|
||||
validator.validate(model, { firstFields: true }, (errors, fields) => {
|
||||
this.valid = !errors;
|
||||
this.error = errors ? errors[0].message : '';
|
||||
this.validateState = !errors ? 'success' : 'error';
|
||||
this.validateMessage = errors ? errors[0].message : '';
|
||||
|
||||
cb && cb(errors);
|
||||
this.validating = false;
|
||||
callback(errors);
|
||||
});
|
||||
},
|
||||
resetField() {
|
||||
this.valid = true;
|
||||
this.error = '';
|
||||
this.validateState = '';
|
||||
this.validateMessage = '';
|
||||
|
||||
let model = this.form.model;
|
||||
let value = this.fieldValue;
|
||||
|
||||
@ -219,15 +219,15 @@ describe('Form', () => {
|
||||
let fields = vm.$refs.form.fields;
|
||||
expect(valid).to.not.true;
|
||||
vm.$refs.form.$nextTick(_ => {
|
||||
expect(fields.name.error).to.equal('请输入活动名称');
|
||||
expect(fields.name.validateMessage).to.equal('请输入活动名称');
|
||||
vm.setValue('aaaaa');
|
||||
|
||||
vm.$refs.form.$nextTick(_ => {
|
||||
expect(fields.name.error).to.equal('');
|
||||
expect(fields.name.validateMessage).to.equal('');
|
||||
vm.setValue('aa');
|
||||
|
||||
vm.$refs.form.$nextTick(_ => {
|
||||
expect(fields.name.error).to.equal('请输入活动名称');
|
||||
expect(fields.name.validateMessage).to.equal('请输入活动名称');
|
||||
done();
|
||||
});
|
||||
});
|
||||
@ -265,15 +265,15 @@ describe('Form', () => {
|
||||
let fields = vm.$refs.form.fields;
|
||||
expect(valid).to.not.true;
|
||||
vm.$refs.form.$nextTick(_ => {
|
||||
expect(fields.name.error).to.equal('请输入活动名称');
|
||||
expect(fields.name.validateMessage).to.equal('请输入活动名称');
|
||||
vm.setValue('aaaaa');
|
||||
|
||||
vm.$refs.form.$nextTick(_ => {
|
||||
expect(fields.name.error).to.equal('');
|
||||
expect(fields.name.validateMessage).to.equal('');
|
||||
vm.setValue('aa');
|
||||
|
||||
vm.$refs.form.$nextTick(_ => {
|
||||
expect(fields.name.error).to.equal('请输入活动名称');
|
||||
expect(fields.name.validateMessage).to.equal('请输入活动名称');
|
||||
done();
|
||||
});
|
||||
});
|
||||
@ -315,11 +315,11 @@ describe('Form', () => {
|
||||
expect(valid).to.true;
|
||||
vm.setValue('');
|
||||
setTimeout(_ => {
|
||||
expect(fields.region.error).to.equal('请选择活动区域');
|
||||
expect(fields.region.validateMessage).to.equal('请选择活动区域');
|
||||
vm.setValue('shanghai');
|
||||
|
||||
setTimeout(_ => {
|
||||
expect(fields.region.error).to.equal('');
|
||||
expect(fields.region.validateMessage).to.equal('');
|
||||
done();
|
||||
}, 100);
|
||||
}, 100);
|
||||
@ -356,12 +356,12 @@ describe('Form', () => {
|
||||
let fields = vm.$refs.form.fields;
|
||||
expect(valid).to.not.true;
|
||||
vm.$refs.form.$nextTick(_ => {
|
||||
expect(fields.date.error).to.equal('请选择日期');
|
||||
expect(fields.date.validateMessage).to.equal('请选择日期');
|
||||
|
||||
vm.setValue(new Date());
|
||||
|
||||
vm.$refs.form.$nextTick(_ => {
|
||||
expect(fields.date.error).to.equal('');
|
||||
expect(fields.date.validateMessage).to.equal('');
|
||||
done();
|
||||
});
|
||||
});
|
||||
@ -398,11 +398,11 @@ describe('Form', () => {
|
||||
let fields = vm.$refs.form.fields;
|
||||
expect(valid).to.not.true;
|
||||
vm.$refs.form.$nextTick(_ => {
|
||||
expect(fields.date.error).to.equal('请选择时间');
|
||||
expect(fields.date.validateMessage).to.equal('请选择时间');
|
||||
vm.setValue(new Date());
|
||||
|
||||
vm.$refs.form.$nextTick(_ => {
|
||||
expect(fields.date.error).to.equal('');
|
||||
expect(fields.date.validateMessage).to.equal('');
|
||||
done();
|
||||
});
|
||||
});
|
||||
@ -444,11 +444,11 @@ describe('Form', () => {
|
||||
let fields = vm.$refs.form.fields;
|
||||
expect(valid).to.not.true;
|
||||
vm.$refs.form.$nextTick(_ => {
|
||||
expect(fields.type.error).to.equal('请选择活动类型');
|
||||
expect(fields.type.validateMessage).to.equal('请选择活动类型');
|
||||
vm.setValue(['地推活动']);
|
||||
|
||||
vm.$refs.form.$nextTick(_ => {
|
||||
expect(fields.type.error).to.equal('');
|
||||
expect(fields.type.validateMessage).to.equal('');
|
||||
done();
|
||||
});
|
||||
});
|
||||
@ -488,11 +488,11 @@ describe('Form', () => {
|
||||
let fields = vm.$refs.form.fields;
|
||||
expect(valid).to.not.true;
|
||||
vm.$refs.form.$nextTick(_ => {
|
||||
expect(fields.type.error).to.equal('请选择活动类型');
|
||||
expect(fields.type.validateMessage).to.equal('请选择活动类型');
|
||||
vm.setValue('线下场地免费');
|
||||
|
||||
vm.$refs.form.$nextTick(_ => {
|
||||
expect(fields.type.error).to.equal('');
|
||||
expect(fields.type.validateMessage).to.equal('');
|
||||
done();
|
||||
});
|
||||
});
|
||||
@ -568,15 +568,55 @@ describe('Form', () => {
|
||||
let fields = vm.$refs.form.fields;
|
||||
expect(valid).to.not.true;
|
||||
vm.$refs.form.$nextTick(_ => {
|
||||
expect(fields.name.error).to.equal('长度至少为5');
|
||||
expect(fields.name.validateMessage).to.equal('长度至少为5');
|
||||
vm.setValue('aaaaaa');
|
||||
|
||||
vm.$refs.form.$nextTick(_ => {
|
||||
expect(fields.name.error).to.equal('');
|
||||
expect(fields.name.validateMessage).to.equal('');
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
it('error', done => {
|
||||
vm = createVue({
|
||||
template: `
|
||||
<el-form :model="form" :rules="rules" ref="form">
|
||||
<el-form-item label="活动名称" prop="name" :error="error" ref="formitem">
|
||||
<el-input v-model="form.name"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
`,
|
||||
data() {
|
||||
return {
|
||||
error: 'dsad',
|
||||
form: {
|
||||
name: 'sada'
|
||||
},
|
||||
rules: {
|
||||
name: [
|
||||
{ required: true, message: '请输入活动名称', trigger: 'change', min: 3, max: 6 }
|
||||
]
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
setValue(value) {
|
||||
this.form.name = value;
|
||||
}
|
||||
}
|
||||
}, true);
|
||||
vm.$refs.form.validate(valid => {
|
||||
let fields = vm.$refs.form.fields;
|
||||
expect(valid).to.true;
|
||||
vm.error = '输入不合法';
|
||||
|
||||
vm.$refs.formitem.$nextTick(_ => {
|
||||
expect(fields.name.validateState).to.equal('error');
|
||||
expect(fields.name.validateMessage).to.equal('输入不合法');
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user