ant-input如何让校验文字浮动
时间: 2023-07-07 11:03:49 浏览: 116
可以通过设置 `validateStatus` 属性来让校验文字浮动。
具体步骤如下:
1. 在表单控件中添加 `validateStatus` 属性,该属性的值可以是 `'success'`、`'warning'`、`'error'` 或者 `''`,分别表示校验成功、校验警告、校验失败或者没有校验状态。
```jsx
<Form.Item
label="Username"
name="username"
rules={[{ required: true, message: 'Please input your username!' }]}
validateStatus={errors.username && touched.username ? 'error' : ''}
help={errors.username && touched.username ? errors.username : ''}
>
<Input />
</Form.Item>
```
2. 通过 CSS 样式来让校验文字浮动。
```css
.ant-form-item-explain {
position: absolute;
top: 100%;
left: 0;
}
```
这样,当校验状态为 `'error'` 时,校验文字就会浮动到表单控件下方。你可以根据需要调整 `top` 和 `left` 属性来控制校验文字的位置。
相关问题
ant-input如何自定义写校验样式
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组件自定义校验样式的方法。
阅读全文