联级选择器做校验 antd
时间: 2023-07-18 10:07:42 浏览: 52
Ant Design提供了很多内置的校验规则,可以通过`rules`属性来设置。
如果需要自定义校验规则,可以使用`validator`属性,它接收一个返回`Promise`的函数,用于校验输入值。例如:
```jsx
<Form.Item
name="phone"
label="手机号"
rules={[
{ required: true, message: '请输入手机号' },
{ pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确' },
]}
validateTrigger={['onBlur']}
>
<Input />
</Form.Item>
```
以上代码中,`rules`数组中定义了两条校验规则,分别是必填和手机号格式校验。`validateTrigger`属性指定了触发校验的事件,默认为`onChange`,这里修改为`onBlur`,即在失去焦点时触发校验。
如果需要联合校验多个字段,可以使用`dependencies`属性,它接收一个数组,数组中的元素是当前字段所依赖的其他字段的名称,当依赖的字段值发生改变时,当前字段也会触发校验。例如:
```jsx
<Form.Item
name="password"
label="密码"
rules={[
{ required: true, message: '请输入密码' },
{ min: 6, message: '密码长度不能少于6位' },
]}
>
<Input.Password />
</Form.Item>
<Form.Item
name="confirmPassword"
label="确认密码"
dependencies={['password']}
rules={[
{ required: true, message: '请再次输入密码' },
({ getFieldValue }) => ({
validator(_, value) {
if (!value || getFieldValue('password') === value) {
return Promise.resolve();
}
return Promise.reject('两次密码输入不一致');
},
}),
]}
>
<Input.Password />
</Form.Item>
```
以上代码中,`confirmPassword`字段的校验规则依赖于`password`字段的值,当`password`字段的值发生改变时,`confirmPassword`字段会触发校验。校验规则为必填和与`password`字段值一致性校验。注意,自定义校验规则需要返回一个`Promise`对象,并且在校验通过时调用`Promise.resolve()`,在校验失败时调用`Promise.reject()`,并传入错误提示信息。