2018-05-07 10:40:25 +00:00
|
|
|
|
<cn>
|
|
|
|
|
#### 自定义校验
|
|
|
|
|
我们提供了 `validateStatus` `help` `hasFeedback` 等属性,你可以不需要使用 `Form.create` 和 `getFieldDecorator`,自己定义校验的时机和内容。
|
|
|
|
|
1. `validateStatus`: 校验状态,可选 'success', 'warning', 'error', 'validating'。
|
|
|
|
|
2. `hasFeedback`:用于给输入框添加反馈图标。
|
|
|
|
|
3. `help`:设置校验文案。
|
|
|
|
|
</cn>
|
|
|
|
|
|
|
|
|
|
<us>
|
|
|
|
|
#### Customized Validation
|
|
|
|
|
We provide properties like `validateStatus` `help` `hasFeedback` to customize your own validate status and message, without using `Form.create` and `getFieldDecorator`.
|
|
|
|
|
1. `validateStatus`: validate status of form components which could be 'success', 'warning', 'error', 'validating'.
|
|
|
|
|
2. `hasFeedback`: display feed icon of input control
|
|
|
|
|
3. `help`: display validate message.
|
|
|
|
|
</us>
|
|
|
|
|
|
|
|
|
|
<template>
|
|
|
|
|
<a-form>
|
|
|
|
|
<a-form-item
|
2019-02-01 09:23:00 +00:00
|
|
|
|
:label-col="labelCol"
|
|
|
|
|
:wrapper-col="wrapperCol"
|
|
|
|
|
label="Fail"
|
|
|
|
|
validate-status="error"
|
|
|
|
|
help="Should be combination of numbers & alphabets"
|
2018-05-07 10:40:25 +00:00
|
|
|
|
>
|
2019-09-28 12:45:07 +00:00
|
|
|
|
<a-input id="error" placeholder="unavailable choice" />
|
2018-05-07 10:40:25 +00:00
|
|
|
|
</a-form-item>
|
|
|
|
|
|
|
|
|
|
<a-form-item
|
2019-02-01 09:23:00 +00:00
|
|
|
|
:label-col="labelCol"
|
|
|
|
|
:wrapper-col="wrapperCol"
|
|
|
|
|
label="Warning"
|
|
|
|
|
validate-status="warning"
|
2018-05-07 10:40:25 +00:00
|
|
|
|
>
|
2019-09-28 12:45:07 +00:00
|
|
|
|
<a-input id="warning" placeholder="Warning" />
|
2018-05-07 10:40:25 +00:00
|
|
|
|
</a-form-item>
|
|
|
|
|
|
|
|
|
|
<a-form-item
|
2019-02-01 09:23:00 +00:00
|
|
|
|
:label-col="labelCol"
|
|
|
|
|
:wrapper-col="wrapperCol"
|
|
|
|
|
label="Validating"
|
|
|
|
|
has-feedback
|
|
|
|
|
validate-status="validating"
|
|
|
|
|
help="The information is being validated..."
|
2018-05-07 10:40:25 +00:00
|
|
|
|
>
|
2019-09-28 12:45:07 +00:00
|
|
|
|
<a-input id="validating" placeholder="I'm the content is being validated" />
|
2018-05-07 10:40:25 +00:00
|
|
|
|
</a-form-item>
|
|
|
|
|
|
|
|
|
|
<a-form-item
|
2019-02-01 09:23:00 +00:00
|
|
|
|
:label-col="labelCol"
|
|
|
|
|
:wrapper-col="wrapperCol"
|
|
|
|
|
label="Success"
|
|
|
|
|
has-feedback
|
|
|
|
|
validate-status="success"
|
2018-05-07 10:40:25 +00:00
|
|
|
|
>
|
2019-09-28 12:45:07 +00:00
|
|
|
|
<a-input id="success" placeholder="I'm the content" />
|
2018-05-07 10:40:25 +00:00
|
|
|
|
</a-form-item>
|
|
|
|
|
|
|
|
|
|
<a-form-item
|
2019-02-01 09:23:00 +00:00
|
|
|
|
:label-col="labelCol"
|
|
|
|
|
:wrapper-col="wrapperCol"
|
|
|
|
|
label="Warning"
|
|
|
|
|
has-feedback
|
|
|
|
|
validate-status="warning"
|
2018-05-07 10:40:25 +00:00
|
|
|
|
>
|
2019-09-28 12:45:07 +00:00
|
|
|
|
<a-input id="warning2" placeholder="Warning" />
|
2018-05-07 10:40:25 +00:00
|
|
|
|
</a-form-item>
|
|
|
|
|
|
|
|
|
|
<a-form-item
|
2019-02-01 09:23:00 +00:00
|
|
|
|
:label-col="labelCol"
|
|
|
|
|
:wrapper-col="wrapperCol"
|
|
|
|
|
label="Fail"
|
|
|
|
|
has-feedback
|
|
|
|
|
validate-status="error"
|
|
|
|
|
help="Should be combination of numbers & alphabets"
|
2018-05-07 10:40:25 +00:00
|
|
|
|
>
|
2019-09-28 12:45:07 +00:00
|
|
|
|
<a-input id="error2" placeholder="unavailable choice" />
|
2018-05-07 10:40:25 +00:00
|
|
|
|
</a-form-item>
|
|
|
|
|
|
|
|
|
|
<a-form-item
|
2019-02-01 09:23:00 +00:00
|
|
|
|
:label-col="labelCol"
|
|
|
|
|
:wrapper-col="wrapperCol"
|
|
|
|
|
label="Success"
|
|
|
|
|
has-feedback
|
|
|
|
|
validate-status="success"
|
2018-05-07 10:40:25 +00:00
|
|
|
|
>
|
|
|
|
|
<a-date-picker style="width: 100%" />
|
|
|
|
|
</a-form-item>
|
|
|
|
|
|
|
|
|
|
<a-form-item
|
2019-02-01 09:23:00 +00:00
|
|
|
|
:label-col="labelCol"
|
|
|
|
|
:wrapper-col="wrapperCol"
|
|
|
|
|
label="Warning"
|
|
|
|
|
has-feedback
|
|
|
|
|
validate-status="warning"
|
2018-05-07 10:40:25 +00:00
|
|
|
|
>
|
|
|
|
|
<a-time-picker style="width: 100%" />
|
|
|
|
|
</a-form-item>
|
|
|
|
|
|
|
|
|
|
<a-form-item
|
2019-02-01 09:23:00 +00:00
|
|
|
|
:label-col="labelCol"
|
|
|
|
|
:wrapper-col="wrapperCol"
|
|
|
|
|
label="Error"
|
|
|
|
|
has-feedback
|
|
|
|
|
validate-status="error"
|
2018-05-07 10:40:25 +00:00
|
|
|
|
>
|
2019-02-01 09:23:00 +00:00
|
|
|
|
<a-select default-value="1">
|
|
|
|
|
<a-select-option value="1">
|
|
|
|
|
Option 1
|
|
|
|
|
</a-select-option>
|
|
|
|
|
<a-select-option value="2">
|
|
|
|
|
Option 2
|
|
|
|
|
</a-select-option>
|
|
|
|
|
<a-select-option value="3">
|
|
|
|
|
Option 3
|
|
|
|
|
</a-select-option>
|
2018-05-07 10:40:25 +00:00
|
|
|
|
</a-select>
|
|
|
|
|
</a-form-item>
|
|
|
|
|
|
|
|
|
|
<a-form-item
|
2019-02-01 09:23:00 +00:00
|
|
|
|
:label-col="labelCol"
|
|
|
|
|
:wrapper-col="wrapperCol"
|
|
|
|
|
label="Validating"
|
|
|
|
|
has-feedback
|
|
|
|
|
validate-status="validating"
|
|
|
|
|
help="The information is being validated..."
|
2018-05-07 10:40:25 +00:00
|
|
|
|
>
|
2019-09-28 12:45:07 +00:00
|
|
|
|
<a-cascader :default-value="['1']" :options="[]" />
|
2018-05-07 10:40:25 +00:00
|
|
|
|
</a-form-item>
|
|
|
|
|
|
|
|
|
|
<a-form-item
|
2019-02-01 09:23:00 +00:00
|
|
|
|
label="inline"
|
|
|
|
|
:label-col="labelCol"
|
|
|
|
|
:wrapper-col="wrapperCol"
|
2019-01-03 12:48:09 +00:00
|
|
|
|
style="margin-bottom:0;"
|
2018-05-07 10:40:25 +00:00
|
|
|
|
>
|
2019-01-03 12:48:09 +00:00
|
|
|
|
<a-form-item
|
2019-02-01 09:23:00 +00:00
|
|
|
|
validate-status="error"
|
|
|
|
|
help="Please select the correct date"
|
2019-01-03 12:48:09 +00:00
|
|
|
|
:style="{ display: 'inline-block', width: 'calc(50% - 12px)' }"
|
|
|
|
|
>
|
2019-02-01 09:23:00 +00:00
|
|
|
|
<a-date-picker style="width: 100%" />
|
2019-01-03 12:48:09 +00:00
|
|
|
|
</a-form-item>
|
|
|
|
|
<span :style="{ display: 'inline-block', width: '24px', textAlign: 'center' }">
|
|
|
|
|
-
|
|
|
|
|
</span>
|
|
|
|
|
<a-form-item :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
|
2019-02-01 09:23:00 +00:00
|
|
|
|
<a-date-picker style="width: 100%" />
|
2019-01-03 12:48:09 +00:00
|
|
|
|
</a-form-item>
|
2018-05-07 10:40:25 +00:00
|
|
|
|
</a-form-item>
|
|
|
|
|
|
|
|
|
|
<a-form-item
|
2019-02-01 09:23:00 +00:00
|
|
|
|
:label-col="labelCol"
|
|
|
|
|
:wrapper-col="wrapperCol"
|
|
|
|
|
label="Success"
|
|
|
|
|
has-feedback
|
|
|
|
|
validate-status="success"
|
2018-05-07 10:40:25 +00:00
|
|
|
|
>
|
|
|
|
|
<a-input-number style="width: 100%" />
|
|
|
|
|
</a-form-item>
|
|
|
|
|
</a-form>
|
|
|
|
|
</template>
|
|
|
|
|
<script>
|
|
|
|
|
export default {
|
2019-09-28 12:45:07 +00:00
|
|
|
|
data() {
|
2018-05-07 10:40:25 +00:00
|
|
|
|
return {
|
|
|
|
|
labelCol: {
|
|
|
|
|
xs: { span: 24 },
|
|
|
|
|
sm: { span: 5 },
|
|
|
|
|
},
|
|
|
|
|
wrapperCol: {
|
|
|
|
|
xs: { span: 24 },
|
|
|
|
|
sm: { span: 12 },
|
|
|
|
|
},
|
2019-01-12 03:33:27 +00:00
|
|
|
|
};
|
2018-05-07 10:40:25 +00:00
|
|
|
|
},
|
2019-01-12 03:33:27 +00:00
|
|
|
|
};
|
2018-05-07 10:40:25 +00:00
|
|
|
|
</script>
|