ant-input如何自定义写校验样式
时间: 2023-07-07 09:03:49 浏览: 115
Ant Design的Input组件是支持自定义校验样式的,具体步骤如下:
1. 使用`getFieldDecorator`方法包装Input组件,该方法返回一个高阶函数,可以用于设置表单校验规则和样式。
```javascript
import { Form, Input } from 'antd';
const { getFieldDecorator } = Form;
const CustomizedInput = () => (
<Form>
<Form.Item>
{getFieldDecorator('username', {
rules: [
{
required: true,
message: 'Please input your username!',
},
],
})(<Input placeholder="Username" />)}
</Form.Item>
</Form>
);
```
2. 在校验规则中添加`validateStatus`和`help`属性,分别用于设置校验状态和校验提示信息。
```javascript
const CustomizedInput = () => (
<Form>
<Form.Item>
{getFieldDecorator('username', {
rules: [
{
required: true,
message: 'Please input your username!',
validateStatus: 'error', // 校验失败时的状态
help: 'Username is required!', // 校验失败时的提示信息
},
],
})(<Input placeholder="Username" />)}
</Form.Item>
</Form>
);
```
3. 在CSS中定义校验状态对应的样式。
```css
.ant-form-item-has-error .ant-input {
border-color: #f5222d;
box-shadow: none;
}
.ant-form-item-has-error .ant-form-explain,
.ant-form-item-has-error .ant-form-split {
color: #f5222d;
}
```
以上就是使用Ant Design的Input组件自定义校验样式的方法。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)