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

add a error prop for setting the error message manually

pull/1227/head
baiyaaaaa 2016-11-19 15:32:19 +08:00 committed by 杨奕
parent c0e7f6dc87
commit bb0a79b1b0
4 changed files with 87 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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 | — | — |

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

@ -811,3 +811,4 @@
| label-width | 表单域标签的的宽度，例如 '50px' | string | — | — |
| required | 是否必填，如不设置，则会根据校验规则自动生成 | bolean | — | false |
| rules | 表单验证规则 | object | — | — |
| error | 表单域验证错误信息, 设置该值会使表单验证状态变为`error`，并显示该错误信息 | string | — | — |

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

@ -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;

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

@ -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();
});
});
});
});
});