87 lines
2.0 KiB
Vue
87 lines
2.0 KiB
Vue
|
<cn>
|
||
|
|
#### 动态校验规则
|
||
|
|
根据不同情况执行不同的校验规则。
|
||
|
|
</cn>
|
||
|
|
|
||
|
|
<us>
|
||
|
|
#### Dynamic Rules
|
||
|
|
Perform different check rules according to different situations.
|
||
|
|
</us>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<a-form :form="form">
|
||
|
|
<a-form-item
|
||
|
|
:label-col="formItemLayout.labelCol"
|
||
|
|
:wrapper-col="formItemLayout.wrapperCol"
|
||
|
|
label="Name"
|
||
|
|
>
|
||
|
|
<a-input
|
||
|
|
v-decorator="[
|
||
|
|
'username',
|
||
|
|
{ rules: [{ required: true, message: 'Please input your name' }] },
|
||
|
|
]"
|
||
|
|
placeholder="Please input your name"
|
||
|
|
/>
|
||
|
|
</a-form-item>
|
||
|
|
<a-form-item
|
||
|
|
:label-col="formItemLayout.labelCol"
|
||
|
|
:wrapper-col="formItemLayout.wrapperCol"
|
||
|
|
label="Nickname"
|
||
|
|
>
|
||
|
|
<a-input
|
||
|
|
v-decorator="[
|
||
|
|
'nickname',
|
||
|
|
{ rules: [{ required: checkNick, message: 'Please input your nickname' }] },
|
||
|
|
]"
|
||
|
|
placeholder="Please input your nickname"
|
||
|
|
/>
|
||
|
|
</a-form-item>
|
||
|
|
<a-form-item :label-col="formTailLayout.labelCol" :wrapper-col="formTailLayout.wrapperCol">
|
||
|
|
<a-checkbox :checked="checkNick" @change="handleChange">
|
||
|
|
Nickname is required
|
||
|
|
</a-checkbox>
|
||
|
|
</a-form-item>
|
||
|
|
<a-form-item :label-col="formTailLayout.labelCol" :wrapper-col="formTailLayout.wrapperCol">
|
||
|
|
<a-button type="primary" @click="check">
|
||
|
|
Check
|
||
|
|
</a-button>
|
||
|
|
</a-form-item>
|
||
|
|
</a-form>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
const formItemLayout = {
|
||
|
|
labelCol: { span: 4 },
|
||
|
|
wrapperCol: { span: 8 },
|
||
|
|
};
|
||
|
|
const formTailLayout = {
|
||
|
|
labelCol: { span: 4 },
|
||
|
|
wrapperCol: { span: 8, offset: 4 },
|
||
|
|
};
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
checkNick: false,
|
||
|
|
formItemLayout,
|
||
|
|
formTailLayout,
|
||
|
|
form: this.$form.createForm(this, { name: 'dynamic_rule' }),
|
||
|
|
};
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
check() {
|
||
|
|
this.form.validateFields(err => {
|
||
|
|
if (!err) {
|
||
|
|
console.info('success');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
handleChange(e) {
|
||
|
|
this.checkNick = e.target.checked;
|
||
|
|
this.$nextTick(() => {
|
||
|
|
this.form.validateFields(['nickname'], { force: true });
|
||
|
|
});
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|