|
|
|
|
# 校验提示
|
|
|
|
|
|
|
|
|
|
- order: 4
|
|
|
|
|
|
|
|
|
|
我们为表单控件的校验状态定义了样式，共有三种校验状态类：
|
|
|
|
|
|
|
|
|
|
`.has-success` `.has-error` `.has-warning`, 分别代表校验成功、校验失败、有警告。
|
|
|
|
|
|
|
|
|
|
将以上三种校验状态类添加到这些控件的父级元素即可。
|
|
|
|
|
|
|
|
|
|
另外为输入框添加反馈图标，可以更好地反馈当前的校验状态，使用 `.has-feedback` 类包裹 input 输入框即可，在这里校验状态类就要和 `.has-feedback` 类同级。
|
|
|
|
|
|
|
|
|
|
**注意**: 反馈图标只能使用在文本输入框 `<input class="ant-input">` 元素上。
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
````html
|
|
|
|
|
<h4>不带反馈图标的校验提示</h4>
|
|
|
|
|
<br />
|
|
|
|
|
<form class="ant-form-horizontal">
|
|
|
|
|
<div class="ant-form-item has-error">
|
|
|
|
|
<label for="error" class="col-5">失败校验：</label>
|
|
|
|
|
<div class="col-12">
|
|
|
|
|
<input class="ant-input" type="text" id="error" value="无效选择"/>
|
|
|
|
|
<div class="ant-form-explain">请输入数字和字母组合</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="ant-form-item has-warning">
|
|
|
|
|
<label for="warning" class="col-5">警告校验：</label>
|
|
|
|
|
<div class="col-12">
|
|
|
|
|
<input class="ant-input" type="text" id="warning" value="前方高能预警"/>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</form>
|
|
|
|
|
|
|
|
|
|
<h4>带图标的校验提示（水平排列的表单）</h4>
|
|
|
|
|
<br />
|
|
|
|
|
<form class="ant-form-horizontal">
|
|
|
|
|
<div class="ant-form-item">
|
|
|
|
|
<label class="col-5" for="validating">校验中：</label>
|
|
|
|
|
<div class="col-12">
|
|
|
|
|
<div class="has-feedback is-validating">
|
|
|
|
|
<input class="ant-input" type="text" id="validating" value="我是被校验的内容"/>
|
|
|
|
|
<div class="ant-form-explain">信息审核中...</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="ant-form-item">
|
|
|
|
|
<label class="col-5" for="input1">成功校验：</label>
|
|
|
|
|
<div class="col-12">
|
|
|
|
|
<div class="has-feedback has-success">
|
|
|
|
|
<input class="ant-input" type="text" id="input1" value="我是正文"/>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="ant-form-item">
|
|
|
|
|
<label class="col-5" for="input2">失败校验：</label>
|
|
|
|
|
<div class="col-12">
|
|
|
|
|
<div class="has-feedback has-error">
|
|
|
|
|
<input class="ant-input" type="text" id="input2" value="无效选择"/>
|
|
|
|
|
<div class="ant-form-explain">请输入数字和字母组合</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="ant-form-item">
|
|
|
|
|
<label class="col-5" for="input3">警告校验：</label>
|
|
|
|
|
<div class="col-12">
|
|
|
|
|
<div class="has-feedback has-warning">
|
|
|
|
|
<input class="ant-input" type="text" id="input3" value="前方高能预警"/>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</form>
|
|
|
|
|
````
|
