fixed #494
watch trigger after form emit, so the value of date not change when validate, change to async
This commit is contained in:
梁灏
parent
a9e5919790
commit
fc0c4c7815
2 changed files with 121 additions and 79 deletions
|
|
@ -169,95 +169,135 @@
|
||||||
<!--</script>-->
|
<!--</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>
|
<template>
|
||||||
<Form ref="formCustom" :model="formCustom" :rules="ruleCustom" :label-width="80">
|
<div>
|
||||||
<Form-item label="密码" prop="passwd">
|
<Form ref="DateForm" :model="form" :rules="rules" :label-width="80" style="width: 400px;">
|
||||||
<Input type="password" v-model="formCustom.passwd"></Input>
|
<Form-item label="选择日期" prop="date">
|
||||||
</Form-item>
|
<Date-picker v-model="form.date" type="datetime"></Date-picker>
|
||||||
<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>
|
||||||
<Form-item>
|
<Form-item>
|
||||||
<Button type="primary" @click="handleSubmit('formCustom')">提交</Button>
|
<Button type="primary" @click.native="handleClick">确定</Button>
|
||||||
<Button type="ghost" @click="handleReset('formCustom')" style="margin-left: 8px">重置</Button>
|
|
||||||
</Form-item>
|
</Form-item>
|
||||||
</Form>
|
</Form>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
data () {
|
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 {
|
return {
|
||||||
formCustom: {
|
form: {
|
||||||
passwd: '',
|
date: ''
|
||||||
passwdCheck: '',
|
|
||||||
age: ''
|
|
||||||
},
|
},
|
||||||
ruleCustom: {
|
rules: {
|
||||||
passwd: [
|
date: [
|
||||||
{ validator: validatePass, trigger: 'blur' }
|
{ required: true, type: 'date', message: '不能为空', trigger: 'change' },
|
||||||
],
|
{ type: 'date', message: '日期格式不正确', trigger: 'change'}
|
||||||
passwdCheck: [
|
|
||||||
{ validator: validatePassCheck, trigger: 'blur' }
|
|
||||||
],
|
|
||||||
age: [
|
|
||||||
{ validator: validateAge, trigger: 'blur' }
|
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
handleSubmit (name) {
|
handleClick() {
|
||||||
this.$refs[name].validate((valid) => {
|
this.$refs.DateForm.validate();
|
||||||
if (valid) {
|
|
||||||
this.$Message.success('提交成功!');
|
|
||||||
} else {
|
|
||||||
this.$Message.error('表单验证失败!');
|
|
||||||
}
|
}
|
||||||
})
|
|
||||||
},
|
},
|
||||||
handleReset (name) {
|
watch: {
|
||||||
this.$refs[name].resetFields();
|
'form.date' (val) {
|
||||||
|
console.log(val);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -423,7 +423,9 @@
|
||||||
const newDate = this.formattingDate(date);
|
const newDate = this.formattingDate(date);
|
||||||
|
|
||||||
this.$emit('on-change', newDate);
|
this.$emit('on-change', newDate);
|
||||||
|
this.$nextTick(() => {
|
||||||
this.dispatch('FormItem', 'on-form-change', newDate);
|
this.dispatch('FormItem', 'on-form-change', newDate);
|
||||||
|
});
|
||||||
},
|
},
|
||||||
formattingDate (date) {
|
formattingDate (date) {
|
||||||
const type = this.type;
|
const type = this.type;
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue