drip-public/iview
6
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fixed #494

Browse source 
watch trigger after form emit, so the value of date not change when
validate, change to async
This commit is contained in:
梁灏 2017-03-27 10:30:45 +08:00
parent a9e5919790
commit fc0c4c7815
2 changed files with 121 additions and 79 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

194
examples/routers/form.vue
View file

@ -169,95 +169,135 @@
<!--</script>-->
<!--<template>-->
<!--<Form ref="formCustom" :model="formCustom" :rules="ruleCustom" :label-width="80">-->
<!--<Form-item label="密码" prop="passwd">-->
<!--<Input type="password" v-model="formCustom.passwd"></Input>-->
<!--</Form-item>-->
<!--<Form-item label="确认密码" prop="passwdCheck">-->
<!--<Input type="password" v-model="formCustom.passwdCheck"></Input>-->
<!--</Form-item>-->
<!--<Form-item label="年龄" prop="age">-->
<!--<Input type="text" v-model="formCustom.age" number></Input>-->
<!--</Form-item>-->
<!--<Form-item>-->
<!--<Button type="primary" @click="handleSubmit('formCustom')">提交</Button>-->
<!--<Button type="ghost" @click="handleReset('formCustom')" style="margin-left: 8px">重置</Button>-->
<!--</Form-item>-->
<!--</Form>-->
<!--</template>-->
<!--<script>-->
<!--export default {-->
<!--data () {-->
<!--const validatePass = (rule, value, callback) => {-->
<!--if (value === '') {-->
<!--callback(new Error('请输入密码'));-->
<!--} else {-->
<!--if (this.formCustom.passwdCheck !== '') {-->
<!--// 对第二个密码框单独验证-->
<!--this.$refs.formCustom.validateField('passwdCheck');-->
<!--}-->
<!--callback();-->
<!--}-->
<!--};-->
<!--const validatePassCheck = (rule, value, callback) => {-->
<!--if (value === '') {-->
<!--callback(new Error('请再次输入密码'));-->
<!--} else if (value !== this.formCustom.passwd) {-->
<!--callback(new Error('两次输入密码不一致!'));-->
<!--} else {-->
<!--callback();-->
<!--}-->
<!--};-->
<!--const validateAge = (rule, value, callback) => {-->
<!--if (!value) {-->
<!--return callback(new Error('年龄不能为空'));-->
<!--}-->
<!--// 模拟异步验证效果-->
<!--setTimeout(() => {-->
<!--if (!Number.isInteger(value)) {-->
<!--callback(new Error('请输入数字值'));-->
<!--} else {-->
<!--if (value < 18) {-->
<!--callback(new Error('必须年满18岁'));-->
<!--} else {-->
<!--callback();-->
<!--}-->
<!--}-->
<!--}, 1000);-->
<!--};-->
<!--return {-->
<!--formCustom: {-->
<!--passwd: '',-->
<!--passwdCheck: '',-->
<!--age: ''-->
<!--},-->
<!--ruleCustom: {-->
<!--passwd: [-->
<!--{ validator: validatePass, trigger: 'blur' }-->
<!--],-->
<!--passwdCheck: [-->
<!--{ validator: validatePassCheck, trigger: 'blur' }-->
<!--],-->
<!--age: [-->
<!--{ validator: validateAge, trigger: 'blur' }-->
<!--]-->
<!--}-->
<!--}-->
<!--},-->
<!--methods: {-->
<!--handleSubmit (name) {-->
<!--this.$refs[name].validate((valid) => {-->
<!--if (valid) {-->
<!--this.$Message.success('提交成功!');-->
<!--} else {-->
<!--this.$Message.error('表单验证失败!');-->
<!--}-->
<!--})-->
<!--},-->
<!--handleReset (name) {-->
<!--this.$refs[name].resetFields();-->
<!--}-->
<!--}-->
<!--}-->
<!--</script>-->
<template>
<Form ref="formCustom" :model="formCustom" :rules="ruleCustom" :label-width="80">
<Form-item label="密码" prop="passwd">
<Input type="password" v-model="formCustom.passwd"></Input>
</Form-item>
<Form-item label="确认密码" prop="passwdCheck">
<Input type="password" v-model="formCustom.passwdCheck"></Input>
</Form-item>
<Form-item label="年龄" prop="age">
<Input type="text" v-model="formCustom.age" number></Input>
</Form-item>
<Form-item>
<Button type="primary" @click="handleSubmit('formCustom')">提交</Button>
<Button type="ghost" @click="handleReset('formCustom')" style="margin-left: 8px">重置</Button>
</Form-item>
</Form>
<div>
<Form ref="DateForm" :model="form" :rules="rules" :label-width="80" style="width: 400px;">
<Form-item label="选择日期" prop="date">
<Date-picker v-model="form.date" type="datetime"></Date-picker>
</Form-item>
<Form-item>
<Button type="primary" @click.native="handleClick">确定</Button>
</Form-item>
</Form>
</div>
</template>
<script>
export default {
data () {
const validatePass = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入密码'));
} else {
if (this.formCustom.passwdCheck !== '') {
// 对第二个密码框单独验证
this.$refs.formCustom.validateField('passwdCheck');
}
callback();
}
};
const validatePassCheck = (rule, value, callback) => {
if (value === '') {
callback(new Error('请再次输入密码'));
} else if (value !== this.formCustom.passwd) {
callback(new Error('两次输入密码不一致!'));
} else {
callback();
}
};
const validateAge = (rule, value, callback) => {
if (!value) {
return callback(new Error('年龄不能为空'));
}
// 模拟异步验证效果
setTimeout(() => {
if (!Number.isInteger(value)) {
callback(new Error('请输入数字值'));
} else {
if (value < 18) {
callback(new Error('必须年满18岁'));
} else {
callback();
}
}
}, 1000);
};
return {
formCustom: {
passwd: '',
passwdCheck: '',
age: ''
form: {
date: ''
},
ruleCustom: {
passwd: [
{ validator: validatePass, trigger: 'blur' }
],
passwdCheck: [
{ validator: validatePassCheck, trigger: 'blur' }
],
age: [
{ validator: validateAge, trigger: 'blur' }
rules: {
date: [
{ required: true, type: 'date', message: '不能为空', trigger: 'change' },
{ type: 'date', message: '日期格式不正确', trigger: 'change'}
]
}
}
},
methods: {
handleSubmit (name) {
this.$refs[name].validate((valid) => {
if (valid) {
this.$Message.success('提交成功!');
} else {
this.$Message.error('表单验证失败!');
}
})
},
handleReset (name) {
this.$refs[name].resetFields();
handleClick() {
this.$refs.DateForm.validate();
}
},
watch: {
'form.date' (val) {
console.log(val);
}
}
}

4
src/components/date-picker/picker.vue
View file

@ -423,7 +423,9 @@
const newDate = this.formattingDate(date);
this.$emit('on-change', newDate);
this.dispatch('FormItem', 'on-form-change', newDate);
this.$nextTick(() => {
this.dispatch('FormItem', 'on-form-change', newDate);
});
},
formattingDate (date) {
const type = this.type;