antdesign的input怎么增加正则校验
时间: 2023-10-10 10:13:00 浏览: 87
ant-design-vue-1.3.3.zip
要增加正则校验,你需要在Input组件上使用正则表达式来进行校验。可以通过设置`pattern`属性来实现。例如,如果你要校验一个手机号码,可以这样写:
```jsx
import React, { useState } from "react";
import { Input, Form } from "antd";
function MyForm() {
const [form] = Form.useForm();
const [phoneError, setPhoneError] = useState(false);
const validatePhone = (_, value) => {
const reg = /^1[3456789]\d{9}$/;
if (!reg.test(value)) {
setPhoneError(true);
return Promise.reject("请输入正确的手机号");
} else {
setPhoneError(false);
return Promise.resolve();
}
};
return (
<Form form={form}>
<Form.Item
label="手机号"
name="phone"
validateStatus={phoneError ? "error" : ""}
help={phoneError ? "请输入正确的手机号" : ""}
rules={[
{
required: true,
validator: validatePhone
}
]}
>
<Input placeholder="请输入手机号" />
</Form.Item>
</Form>
);
}
export default MyForm;
```
在上面的代码中,我们使用`Form`和`Form.Item`来包装`Input`组件,然后在`Form.Item`上设置`rules`属性,其中`validator`属性指定了校验函数`validatePhone`,`required`属性指定了该字段是否必填。校验函数中使用正则表达式`/^1[3456789]\d{9}$/`来校验手机号码是否合法。如果校验不通过,则返回一个Promise.reject实例,并且设置`validateStatus`和`help`属性来显示错误信息。如果校验通过,则返回一个Promise.resolve实例。
阅读全文