ant-design-vue/components/form/demo/validate-static.vue

179 lines
4.6 KiB
Vue
Raw Normal View History

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>