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'));
}
setTimeout(() => {
if (!Number.isInteger(age)) {
if (!Number.isInteger(value)) {
callback(new Error('Please input digits'));
} else{
if (age < 18) {
} else {
if (value < 18) {
callback(new Error('Age must be greater than 18'));
} else {
callback();
@ -117,7 +117,7 @@
{ validator: validaePass2, trigger: 'blur' }
],
age: [
{ validator: checkAge, trigger: 'change', trigger: 'blur' }
{ validator: checkAge, trigger: 'blur' }
]
},
dynamicForm: {
@ -172,6 +172,9 @@
handleReset2() {
this.$refs.ruleForm2.resetFields();
},
handleReset3() {
this.$refs.dynamicForm.resetFields();
},
handleValidate(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-form-item>
<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-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'));
}
setTimeout(() => {
if (!Number.isInteger(age)) {
if (!Number.isInteger(value)) {
callback(new Error('Please input digits'));
} else{
if (age < 18) {
} else {
if (value < 18) {
callback(new Error('Age must be greater than 18'));
} else {
callback();
@ -691,7 +694,7 @@ Form component allows you to verify your data, helping you find and correct erro
{ validator: validaePass2, trigger: 'blur' }
],
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"
:label="'Domain' + index"
:key="domain.key"
:prop="'domains:' + index"
:prop="'domains.' + index + '.value'"
:rules="{
type: 'object', required: true,
fields: {
value: { required: true, message: 'domain can not be null', trigger: 'blur' }
}
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>
@ -742,6 +742,7 @@ Form component allows you to verify your data, helping you find and correct erro
<el-form-item>
<el-button type="primary" @click="handleSubmit3">Submit</el-button>
<el-button @click="addDomain">New domain</el-button>
<el-button @click="handleReset3">Reset</el-button>
</el-form-item>
</el-form>
<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) {
var index = this.dynamicForm.domains.indexOf(item)
var index = this.dynamicForm.domains.indexOf(item);
if (index !== -1) {
this.dynamicForm.domains.splice(index, 1)
this.dynamicForm.domains.splice(index, 1);
}
},
addDomain() {
this.dynamicForm.domains.push({
key: this.dynamicForm.domains.length,
key: Date.now(),
value: ''
});
}

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

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

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

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

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

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

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

@ -21,6 +21,29 @@
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 {
name: 'ElFormItem',
@ -76,11 +99,12 @@
var model = this.form.model;
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
? model[temp[0]][temp[1]]
: model[this.prop];
return getPropByPath(model, path).v;
}
}
},
@ -124,13 +148,19 @@
let model = this.form.model;
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) {
this.validateDisabled = true;
model[this.prop] = [];
prop.o[prop.k] = [];
} else if (value) {
this.validateDisabled = true;
model[this.prop] = this.initialValue;
prop.o[prop.k] = this.initialValue;
}
},
getRules() {
@ -165,7 +195,7 @@
this.dispatch('form', 'el.form.addField', [this]);
Object.defineProperty(this, 'initialValue', {
value: this.form.model[this.prop]
value: this.fieldValue
});
let rules = this.getRules();

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

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

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

@ -148,7 +148,7 @@
computed: {
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;
height: 100%;
right: 0;
top: 0;
text-align: center;
color: var(--input-icon-color);

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

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