github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

fix form validate bug (#1363)

pull/1371/head
baiyaaaaa 2016-11-26 10:48:06 +08:00 committed by cinwell.li
parent 63ae2d2a68
commit d9c7824470
10 changed files with 131 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
examples/docs/en-US/form.md
View File

@ -6,10 +6,10 @@
return callback(new Error('Please input the age')); return callback(new Error('Please input the age'));
} }
setTimeout(() => { setTimeout(() => {
if (!Number.isInteger(age)) { if (!Number.isInteger(value)) {
callback(new Error('Please input digits')); callback(new Error('Please input digits'));
} else{ } else {
if (age < 18) { if (value < 18) {
callback(new Error('Age must be greater than 18')); callback(new Error('Age must be greater than 18'));
} else { } else {
callback(); callback();
@ -117,7 +117,7 @@
{ validator: validaePass2, trigger: 'blur' } { validator: validaePass2, trigger: 'blur' }
], ],
age: [ age: [
{ validator: checkAge, trigger: 'change', trigger: 'blur' } { validator: checkAge, trigger: 'blur' }
] ]
}, },
dynamicForm: { dynamicForm: {
@ -172,6 +172,9 @@
handleReset2() { handleReset2() {
this.$refs.ruleForm2.resetFields(); this.$refs.ruleForm2.resetFields();
}, },
handleReset3() {
this.$refs.dynamicForm.resetFields();
},
handleValidate(prop, errorMsg) { handleValidate(prop, errorMsg) {
console.log(prop, errorMsg); console.log(prop, errorMsg);
}, },
@ -632,7 +635,7 @@ Form component allows you to verify your data, helping you find and correct erro
<el-input type="password" v-model="ruleForm2.checkPass" auto-complete="off"></el-input> <el-input type="password" v-model="ruleForm2.checkPass" auto-complete="off"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="Age" prop="age"> <el-form-item label="Age" prop="age">
<el-input v-model="ruleForm2.age"></el-input> <el-input v-model.number="ruleForm2.age"></el-input>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary" @click="handleSubmit2">Submit</el-button> <el-button type="primary" @click="handleSubmit2">Submit</el-button>
@ -647,10 +650,10 @@ Form component allows you to verify your data, helping you find and correct erro
return callback(new Error('Please input the age')); return callback(new Error('Please input the age'));
} }
setTimeout(() => { setTimeout(() => {
if (!Number.isInteger(age)) { if (!Number.isInteger(value)) {
callback(new Error('Please input digits')); callback(new Error('Please input digits'));
} else{ } else {
if (age < 18) { if (value < 18) {
callback(new Error('Age must be greater than 18')); callback(new Error('Age must be greater than 18'));
} else { } else {
callback(); callback();
@ -691,7 +694,7 @@ Form component allows you to verify your data, helping you find and correct erro
{ validator: validaePass2, trigger: 'blur' } { validator: validaePass2, trigger: 'blur' }
], ],
age: [ age: [
{ validator: checkAge, trigger: 'change', trigger: 'blur' } { validator: checkAge, trigger: 'blur' }
] ]
} }
}; };
@ -729,12 +732,9 @@ Form component allows you to verify your data, helping you find and correct erro
v-for="(domain, index) in dynamicForm.domains" v-for="(domain, index) in dynamicForm.domains"
:label="'Domain' + index" :label="'Domain' + index"
:key="domain.key" :key="domain.key"
:prop="'domains:' + index" :prop="'domains.' + index + '.value'"
:rules="{ :rules="{
type: 'object', required: true, required: true, message: 'domain can not be null', trigger: 'blur'
fields: {
value: { required: true, message: 'domain can not be null', trigger: 'blur' }
}
}" }"
> >
<el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">Delete</el-button> <el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">Delete</el-button>
@ -742,6 +742,7 @@ Form component allows you to verify your data, helping you find and correct erro
<el-form-item> <el-form-item>
<el-button type="primary" @click="handleSubmit3">Submit</el-button> <el-button type="primary" @click="handleSubmit3">Submit</el-button>
<el-button @click="addDomain">New domain</el-button> <el-button @click="addDomain">New domain</el-button>
<el-button @click="handleReset3">Reset</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
<script> <script>
@ -774,15 +775,18 @@ Form component allows you to verify your data, helping you find and correct erro
} }
}); });
}, },
handleReset3() {
this.$refs.dynamicForm.resetFields();
},
removeDomain(item) { removeDomain(item) {
var index = this.dynamicForm.domains.indexOf(item) var index = this.dynamicForm.domains.indexOf(item);
if (index !== -1) { if (index !== -1) {
this.dynamicForm.domains.splice(index, 1) this.dynamicForm.domains.splice(index, 1);
} }
}, },
addDomain() { addDomain() {
this.dynamicForm.domains.push({ this.dynamicForm.domains.push({
key: this.dynamicForm.domains.length, key: Date.now(),
value: '' value: ''
}); });
} }

27
examples/docs/zh-CN/form.md
View File

@ -122,8 +122,8 @@
}, },
dynamicForm: { dynamicForm: {
domains: [{ domains: [{
key: Date.now(), value: '',
value: '' key: Date.now()
}], }],
email: '' email: ''
}, },
@ -172,6 +172,9 @@
handleReset2() { handleReset2() {
this.$refs.ruleForm2.resetFields(); this.$refs.ruleForm2.resetFields();
}, },
handleReset3() {
this.$refs.dynamicForm.resetFields();
},
handleValidate(prop, errorMsg) { handleValidate(prop, errorMsg) {
console.log(prop, errorMsg); console.log(prop, errorMsg);
}, },
@ -189,8 +192,8 @@
}, },
addDomain() { addDomain() {
this.dynamicForm.domains.push({ this.dynamicForm.domains.push({
key: Date.now(), value: '',
value: '' key: Date.now()
}); });
} }
} }
@ -720,12 +723,9 @@
v-for="(domain, index) in dynamicForm.domains" v-for="(domain, index) in dynamicForm.domains"
:label="'域名' + index" :label="'域名' + index"
:key="domain.key" :key="domain.key"
:prop="'domains:' + index" :prop="'domains.' + index + '.value'"
:rules="{ :rules="{
type: 'object', required: true, required: true, message: '域名不能为空', trigger: 'blur'
fields: {
value: { required: true, message: '域名不能为空', trigger: 'blur' }
}
}" }"
> >
<el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">删除</el-button> <el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">删除</el-button>
@ -733,6 +733,7 @@
<el-form-item> <el-form-item>
<el-button type="primary" @click="handleSubmit3">提交</el-button> <el-button type="primary" @click="handleSubmit3">提交</el-button>
<el-button @click="addDomain">新增域名</el-button> <el-button @click="addDomain">新增域名</el-button>
<el-button @click="handleReset3">重置</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
<script> <script>
@ -741,7 +742,6 @@
return { return {
dynamicForm: { dynamicForm: {
domains: [{ domains: [{
key: 1,
value: '' value: ''
}], }],
email: '' email: ''
@ -765,6 +765,9 @@
} }
}); });
}, },
handleReset3() {
this.$refs.dynamicForm.resetFields();
},
removeDomain(item) { removeDomain(item) {
var index = this.dynamicForm.domains.indexOf(item) var index = this.dynamicForm.domains.indexOf(item)
if (index !== -1) { if (index !== -1) {
@ -773,8 +776,8 @@
}, },
addDomain() { addDomain() {
this.dynamicForm.domains.push({ this.dynamicForm.domains.push({
key: this.dynamicForm.domains.length, value: '',
value: '' key: Date.now()
}); });
} }
} }

2
packages/date-picker/src/panel/date.vue
View File

@ -183,7 +183,7 @@
methods: { methods: {
handleClear() { handleClear() {
this.date = new Date(); this.date = new Date();
this.$emit('pick'); this.$emit('pick', '');
}, },
resetDate() { resetDate() {

2
packages/date-picker/src/panel/time-select.vue
View File

@ -84,7 +84,7 @@
}, },
handleClear() { handleClear() {
this.$emit('pick'); this.$emit('pick', '');
} }
}, },

2
packages/date-picker/src/panel/time.vue
View File

@ -101,7 +101,7 @@
methods: { methods: {
handleClear() { handleClear() {
this.handleCancel(); this.$emit('pick', '');
}, },
handleCancel() { handleCancel() {

44
packages/form/src/form-item.vue
View File

@ -21,6 +21,29 @@
function noop() {} function noop() {}
function getPropByPath(obj, path) {
let tempObj = obj;
path = path.replace(/\[(\w+)\]/g, '.$1');
path = path.replace(/^\./, '');
let keyArr = path.split('.');
let i = 0;
for (let len = keyArr.length; i < len - 1; ++i) {
let key = keyArr[i];
if (key in tempObj) {
tempObj = tempObj[key];
} else {
throw new Error('please transfer a valid prop path to form item!');
}
}
return {
o: tempObj,
k: keyArr[i],
v: tempObj[keyArr[i]]
};
}
export default { export default {
name: 'ElFormItem', name: 'ElFormItem',
@ -76,11 +99,12 @@
var model = this.form.model; var model = this.form.model;
if (!model || !this.prop) { return; } if (!model || !this.prop) { return; }
var temp = this.prop.split(':'); var path = this.prop;
if (path.indexOf(':') !== -1) {
path = path.replace(/:/, '.');
}
return temp.length > 1 return getPropByPath(model, path).v;
? model[temp[0]][temp[1]]
: model[this.prop];
} }
} }
}, },
@ -124,13 +148,19 @@
let model = this.form.model; let model = this.form.model;
let value = this.fieldValue; let value = this.fieldValue;
let path = this.prop;
if (path.indexOf(':') !== -1) {
path = path.replace(/:/, '.');
}
let prop = getPropByPath(model, path);
if (Array.isArray(value) && value.length > 0) { if (Array.isArray(value) && value.length > 0) {
this.validateDisabled = true; this.validateDisabled = true;
model[this.prop] = []; prop.o[prop.k] = [];
} else if (value) { } else if (value) {
this.validateDisabled = true; this.validateDisabled = true;
model[this.prop] = this.initialValue; prop.o[prop.k] = this.initialValue;
} }
}, },
getRules() { getRules() {
@ -165,7 +195,7 @@
this.dispatch('form', 'el.form.addField', [this]); this.dispatch('form', 'el.form.addField', [this]);
Object.defineProperty(this, 'initialValue', { Object.defineProperty(this, 'initialValue', {
value: this.form.model[this.prop] value: this.fieldValue
}); });
let rules = this.getRules(); let rules = this.getRules();

32
packages/form/src/form.vue
View File

@ -25,49 +25,43 @@
}, },
data() { data() {
return { return {
fields: {}, fields: []
fieldLength: 0
}; };
}, },
created() { created() {
this.$on('el.form.addField', (field) => { this.$on('el.form.addField', (field) => {
this.fields[field.prop] = field; if (field) {
this.fieldLength++; this.fields.push(field);
}
}); });
/* istanbul ignore next */ /* istanbul ignore next */
this.$on('el.form.removeField', (field) => { this.$on('el.form.removeField', (field) => {
if (this.fields[field.prop]) { if (field.prop) {
delete this.fields[field.prop]; this.fields.splice(this.fields.indexOf(field), 1);
this.fieldLength--;
} }
}); });
}, },
methods: { methods: {
resetFields() { resetFields() {
for (let prop in this.fields) { this.fields.forEach(field => {
let field = this.fields[prop];
field.resetField(); field.resetField();
} });
}, },
validate(callback) { validate(callback) {
var count = 0; let valid = true;
var valid = true; this.fields.forEach((field, index) => {
for (let prop in this.fields) {
let field = this.fields[prop];
field.validate('', errors => { field.validate('', errors => {
if (errors) { if (errors) {
valid = false; valid = false;
} }
if (index === this.fields.length - 1) {
if (++count === this.fieldLength) {
callback(valid); callback(valid);
} }
}); });
} });
}, },
validateField(prop, cb) { validateField(prop, cb) {
var field = this.fields[prop]; var field = this.fields.filter(field => field.prop === prop)[0];
if (!field) { throw new Error('must call validateField with valid prop string!'); } if (!field) { throw new Error('must call validateField with valid prop string!'); }
field.validate('', cb); field.validate('', cb);

2
packages/input/src/input.vue
View File

@ -148,7 +148,7 @@
computed: { computed: {
validating() { validating() {
return this.$parent.validating; return this.$parent.validateState === 'validating';
} }
}, },

1
packages/theme-default/src/input.css
View File

@ -40,6 +40,7 @@
width: 35px; width: 35px;
height: 100%; height: 100%;
right: 0; right: 0;
top: 0;
text-align: center; text-align: center;
color: var(--input-icon-color); color: var(--input-icon-color);

80
test/unit/specs/form.spec.js
View File

@ -192,7 +192,7 @@ describe('Form', () => {
vm = createVue({ vm = createVue({
template: ` template: `
<el-form :model="form" :rules="rules" ref="form"> <el-form :model="form" :rules="rules" ref="form">
<el-form-item label="活动名称" prop="name"> <el-form-item label="活动名称" prop="name" ref="field">
<el-input v-model="form.name"></el-input> <el-input v-model="form.name"></el-input>
</el-form-item> </el-form-item>
</el-form> </el-form>
@ -216,18 +216,18 @@ describe('Form', () => {
} }
}, true); }, true);
vm.$refs.form.validate(valid => { vm.$refs.form.validate(valid => {
let fields = vm.$refs.form.fields; let field = vm.$refs.field;
expect(valid).to.not.true; expect(valid).to.not.true;
vm.$refs.form.$nextTick(_ => { vm.$refs.form.$nextTick(_ => {
expect(fields.name.validateMessage).to.equal('请输入活动名称'); expect(field.validateMessage).to.equal('请输入活动名称');
vm.setValue('aaaaa'); vm.setValue('aaaaa');
vm.$refs.form.$nextTick(_ => { vm.$refs.form.$nextTick(_ => {
expect(fields.name.validateMessage).to.equal(''); expect(field.validateMessage).to.equal('');
vm.setValue('aa'); vm.setValue('aa');
vm.$refs.form.$nextTick(_ => { vm.$refs.form.$nextTick(_ => {
expect(fields.name.validateMessage).to.equal('请输入活动名称'); expect(field.validateMessage).to.equal('请输入活动名称');
done(); done();
}); });
}); });
@ -238,7 +238,7 @@ describe('Form', () => {
vm = createVue({ vm = createVue({
template: ` template: `
<el-form :model="form" :rules="rules" ref="form"> <el-form :model="form" :rules="rules" ref="form">
<el-form-item label="活动名称" prop="name"> <el-form-item label="活动名称" prop="name" ref="field">
<el-input type="textarea" v-model="form.name"></el-input> <el-input type="textarea" v-model="form.name"></el-input>
</el-form-item> </el-form-item>
</el-form> </el-form>
@ -262,18 +262,18 @@ describe('Form', () => {
} }
}, true); }, true);
vm.$refs.form.validate(valid => { vm.$refs.form.validate(valid => {
let fields = vm.$refs.form.fields; let field = vm.$refs.field;
expect(valid).to.not.true; expect(valid).to.not.true;
vm.$refs.form.$nextTick(_ => { vm.$refs.form.$nextTick(_ => {
expect(fields.name.validateMessage).to.equal('请输入活动名称'); expect(field.validateMessage).to.equal('请输入活动名称');
vm.setValue('aaaaa'); vm.setValue('aaaaa');
vm.$refs.form.$nextTick(_ => { vm.$refs.form.$nextTick(_ => {
expect(fields.name.validateMessage).to.equal(''); expect(field.validateMessage).to.equal('');
vm.setValue('aa'); vm.setValue('aa');
vm.$refs.form.$nextTick(_ => { vm.$refs.form.$nextTick(_ => {
expect(fields.name.validateMessage).to.equal('请输入活动名称'); expect(field.validateMessage).to.equal('请输入活动名称');
done(); done();
}); });
}); });
@ -284,7 +284,7 @@ describe('Form', () => {
vm = createVue({ vm = createVue({
template: ` template: `
<el-form :model="form" :rules="rules" ref="form"> <el-form :model="form" :rules="rules" ref="form">
<el-form-item label="记住密码" prop="region"> <el-form-item label="记住密码" prop="region" ref="field">
<el-select v-model="form.region" placeholder="请选择活动区域"> <el-select v-model="form.region" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option> <el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option> <el-option label="区域二" value="beijing"></el-option>
@ -311,15 +311,15 @@ describe('Form', () => {
} }
}, true); }, true);
vm.$refs.form.validate(valid => { vm.$refs.form.validate(valid => {
let fields = vm.$refs.form.fields; let field = vm.$refs.field;
expect(valid).to.true; expect(valid).to.true;
vm.setValue(''); vm.setValue('');
setTimeout(_ => { setTimeout(_ => {
expect(fields.region.validateMessage).to.equal('请选择活动区域'); expect(field.validateMessage).to.equal('请选择活动区域');
vm.setValue('shanghai'); vm.setValue('shanghai');
setTimeout(_ => { setTimeout(_ => {
expect(fields.region.validateMessage).to.equal(''); expect(field.validateMessage).to.equal('');
done(); done();
}, 100); }, 100);
}, 100); }, 100);
@ -329,7 +329,7 @@ describe('Form', () => {
vm = createVue({ vm = createVue({
template: ` template: `
<el-form :model="form" :rules="rules" ref="form"> <el-form :model="form" :rules="rules" ref="form">
<el-form-item label="记住密码" prop="date"> <el-form-item label="记住密码" prop="date" ref="field">
<el-date-picker type="date" placeholder="选择日期" v-model="form.date" style="width: 100%;"></el-date-picker> <el-date-picker type="date" placeholder="选择日期" v-model="form.date" style="width: 100%;"></el-date-picker>
</el-form-item> </el-form-item>
</el-form> </el-form>
@ -353,15 +353,15 @@ describe('Form', () => {
} }
}, true); }, true);
vm.$refs.form.validate(valid => { vm.$refs.form.validate(valid => {
let fields = vm.$refs.form.fields; let field = vm.$refs.field;
expect(valid).to.not.true; expect(valid).to.not.true;
vm.$refs.form.$nextTick(_ => { vm.$refs.form.$nextTick(_ => {
expect(fields.date.validateMessage).to.equal('请选择日期'); expect(field.validateMessage).to.equal('请选择日期');
vm.setValue(new Date()); vm.setValue(new Date());
vm.$refs.form.$nextTick(_ => { vm.$refs.form.$nextTick(_ => {
expect(fields.date.validateMessage).to.equal(''); expect(field.validateMessage).to.equal('');
done(); done();
}); });
}); });
@ -371,7 +371,7 @@ describe('Form', () => {
vm = createVue({ vm = createVue({
template: ` template: `
<el-form :model="form" :rules="rules" ref="form"> <el-form :model="form" :rules="rules" ref="form">
<el-form-item label="记住密码" prop="date"> <el-form-item label="记住密码" prop="date" ref="field">
<el-time-picker type="fixed-time" placeholder="选择时间" v-model="form.date" style="width: 100%;"></el-time-picker> <el-time-picker type="fixed-time" placeholder="选择时间" v-model="form.date" style="width: 100%;"></el-time-picker>
</el-form-item> </el-form-item>
</el-form> </el-form>
@ -395,14 +395,14 @@ describe('Form', () => {
} }
}, true); }, true);
vm.$refs.form.validate(valid => { vm.$refs.form.validate(valid => {
let fields = vm.$refs.form.fields; let field = vm.$refs.field;
expect(valid).to.not.true; expect(valid).to.not.true;
vm.$refs.form.$nextTick(_ => { vm.$refs.form.$nextTick(_ => {
expect(fields.date.validateMessage).to.equal('请选择时间'); expect(field.validateMessage).to.equal('请选择时间');
vm.setValue(new Date()); vm.setValue(new Date());
vm.$refs.form.$nextTick(_ => { vm.$refs.form.$nextTick(_ => {
expect(fields.date.validateMessage).to.equal(''); expect(field.validateMessage).to.equal('');
done(); done();
}); });
}); });
@ -412,7 +412,7 @@ describe('Form', () => {
vm = createVue({ vm = createVue({
template: ` template: `
<el-form :model="form" :rules="rules" ref="form"> <el-form :model="form" :rules="rules" ref="form">
<el-form-item label="活动名称" prop="type"> <el-form-item label="活动名称" prop="type" ref="field">
<el-checkbox-group v-model="form.type"> <el-checkbox-group v-model="form.type">
<el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox> <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
<el-checkbox label="地推活动" name="type"></el-checkbox> <el-checkbox label="地推活动" name="type"></el-checkbox>
@ -441,14 +441,14 @@ describe('Form', () => {
} }
}, true); }, true);
vm.$refs.form.validate(valid => { vm.$refs.form.validate(valid => {
let fields = vm.$refs.form.fields; let field = vm.$refs.field;
expect(valid).to.not.true; expect(valid).to.not.true;
vm.$refs.form.$nextTick(_ => { vm.$refs.form.$nextTick(_ => {
expect(fields.type.validateMessage).to.equal('请选择活动类型'); expect(field.validateMessage).to.equal('请选择活动类型');
vm.setValue(['地推活动']); vm.setValue(['地推活动']);
vm.$refs.form.$nextTick(_ => { vm.$refs.form.$nextTick(_ => {
expect(fields.type.validateMessage).to.equal(''); expect(field.validateMessage).to.equal('');
done(); done();
}); });
}); });
@ -458,7 +458,7 @@ describe('Form', () => {
vm = createVue({ vm = createVue({
template: ` template: `
<el-form :model="form" :rules="rules" ref="form"> <el-form :model="form" :rules="rules" ref="form">
<el-form-item label="活动名称" prop="type"> <el-form-item label="活动名称" prop="type" ref="field">
<el-radio-group v-model="form.type"> <el-radio-group v-model="form.type">
<el-radio label="线上品牌商赞助"></el-radio> <el-radio label="线上品牌商赞助"></el-radio>
<el-radio label="线下场地免费"></el-radio> <el-radio label="线下场地免费"></el-radio>
@ -485,14 +485,14 @@ describe('Form', () => {
} }
}, true); }, true);
vm.$refs.form.validate(valid => { vm.$refs.form.validate(valid => {
let fields = vm.$refs.form.fields; let field = vm.$refs.field;
expect(valid).to.not.true; expect(valid).to.not.true;
vm.$refs.form.$nextTick(_ => { vm.$refs.form.$nextTick(_ => {
expect(fields.type.validateMessage).to.equal('请选择活动类型'); expect(field.validateMessage).to.equal('请选择活动类型');
vm.setValue('线下场地免费'); vm.setValue('线下场地免费');
vm.$refs.form.$nextTick(_ => { vm.$refs.form.$nextTick(_ => {
expect(fields.type.validateMessage).to.equal(''); expect(field.validateMessage).to.equal('');
done(); done();
}); });
}); });
@ -502,7 +502,7 @@ describe('Form', () => {
vm = createVue({ vm = createVue({
template: ` template: `
<el-form :model="form" :rules="rules" ref="form"> <el-form :model="form" :rules="rules" ref="form">
<el-form-item label="活动名称" prop="name"> <el-form-item label="活动名称" prop="name" ref="field">
<el-input v-model="form.name"></el-input> <el-input v-model="form.name"></el-input>
</el-form-item> </el-form-item>
</el-form> </el-form>
@ -541,7 +541,7 @@ describe('Form', () => {
vm = createVue({ vm = createVue({
template: ` template: `
<el-form :model="form" :rules="rules" ref="form"> <el-form :model="form" :rules="rules" ref="form">
<el-form-item label="活动名称" prop="name"> <el-form-item label="活动名称" prop="name" ref="field">
<el-input v-model="form.name"></el-input> <el-input v-model="form.name"></el-input>
</el-form-item> </el-form-item>
</el-form> </el-form>
@ -565,14 +565,14 @@ describe('Form', () => {
} }
}, true); }, true);
vm.$refs.form.validate(valid => { vm.$refs.form.validate(valid => {
let fields = vm.$refs.form.fields; let field = vm.$refs.field;
expect(valid).to.not.true; expect(valid).to.not.true;
vm.$refs.form.$nextTick(_ => { vm.$refs.form.$nextTick(_ => {
expect(fields.name.validateMessage).to.equal('长度至少为5'); expect(field.validateMessage).to.equal('长度至少为5');
vm.setValue('aaaaaa'); vm.setValue('aaaaaa');
vm.$refs.form.$nextTick(_ => { vm.$refs.form.$nextTick(_ => {
expect(fields.name.validateMessage).to.equal(''); expect(field.validateMessage).to.equal('');
done(); done();
}); });
}); });
@ -582,7 +582,7 @@ describe('Form', () => {
vm = createVue({ vm = createVue({
template: ` template: `
<el-form :model="form" :rules="rules" ref="form"> <el-form :model="form" :rules="rules" ref="form">
<el-form-item label="活动名称" prop="name" :error="error" ref="formitem"> <el-form-item label="活动名称" prop="name" :error="error" ref="field">
<el-input v-model="form.name"></el-input> <el-input v-model="form.name"></el-input>
</el-form-item> </el-form-item>
</el-form> </el-form>
@ -607,13 +607,13 @@ describe('Form', () => {
} }
}, true); }, true);
vm.$refs.form.validate(valid => { vm.$refs.form.validate(valid => {
let fields = vm.$refs.form.fields; let field = vm.$refs.field;
expect(valid).to.true; expect(valid).to.true;
vm.error = '输入不合法'; vm.error = '输入不合法';
vm.$refs.formitem.$nextTick(_ => { vm.$refs.field.$nextTick(_ => {
expect(fields.name.validateState).to.equal('error'); expect(field.validateState).to.equal('error');
expect(fields.name.validateMessage).to.equal('输入不合法'); expect(field.validateMessage).to.equal('输入不合法');
done(); done();
}); });
}); });