68 lines
1.6 KiB
Vue
68 lines
1.6 KiB
Vue
<cn>
|
||
#### 自行处理表单数据
|
||
使用 `Form.create` 处理后的表单具有自动收集数据并校验的功能，但如果您不需要这个功能，或者默认的行为无法满足业务需求，可以选择不使用 `Form.create` 并自行处理数据。
|
||
</cn>
|
||
|
||
<us>
|
||
#### Handle Form Data Manually
|
||
`Form.create` will collect and validate form data automatically. But if you don't need this feature or the default behaviour cannot satisfy your business, you can drop `Form.create` and handle form data manually.
|
||
</us>
|
||
|
||
|
||
<template>
|
||
<a-form>
|
||
<a-form-item
|
||
:labelCol="labelCol"
|
||
:wrapperCol="wrapperCol"
|
||
label="Prime between 8 & 12"
|
||
:validateStatus="number.validateStatus"
|
||
:help="number.errorMsg || tips"
|
||
>
|
||
<a-input-number
|
||
:min="8"
|
||
:max="12"
|
||
:value="number.value"
|
||
@change="handleNumberChange"
|
||
/>
|
||
</a-form-item>
|
||
</a-form>
|
||
</template>
|
||
<script>
|
||
function validatePrimeNumber (number) {
|
||
if (number === 11) {
|
||
return {
|
||
validateStatus: 'success',
|
||
errorMsg: null,
|
||
}
|
||
}
|
||
return {
|
||
validateStatus: 'error',
|
||
errorMsg: 'The prime between 8 and 12 is 11!',
|
||
}
|
||
}
|
||
export default {
|
||
data () {
|
||
return {
|
||
labelCol: { span: 7 },
|
||
wrapperCol: { span: 12 },
|
||
number: {
|
||
value: 11,
|
||
},
|
||
tips: 'A prime is a natural number greater than 1 that has no positive divisors other than 1 and itself.',
|
||
}
|
||
},
|
||
methods: {
|
||
handleNumberChange (value) {
|
||
this.number = {
|
||
...validatePrimeNumber(value),
|
||
value,
|
||
}
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
|
||
|
||
|