ant design-form表单的自定义校验validator
在form表单的使用中,我们经常是使用rules属性进行简单输入文本验证,常见的使用模式如下:rules={[{ required: true, message: ‘’ }<Formname="basic"ref={ref}labelCol={{span: 4,}}wrapperCol={{span: 16,}}><Form.Itemlabel="password".
·
- 在form表单的使用中,我们经常是使用rules属性进行简单输入文本验证,常见的使用模式如下:rules={[{ required: true, message: ‘’ }
<Form
name="basic"
ref={ref}
labelCol={{
span: 4,
}}
wrapperCol={{
span: 16,
}}
>
<Form.Item
label="password"
name="password"
rules={[{ required: true, message: 'xxxx' } >
<Input />
</Form.Item>
</Form>
- 仅使用rules={[{ required: true, message: ‘xxxx’ ‘’ }模式只能简单验证输入用户是否输入文本,不能动态判断用户是否输入指定规则数据
- antd的form的rules支持validator方式添加自定义校验,通过接收 Promise 作为返回值,Promise.reject(‘验证不通过提示信息’),Promise.resloce()通过验证
- 一个简单的用户密码自定义校验如下
import React, { useRef } from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
import { Form, Input, Button, Checkbox } from 'antd';
const Demo = () => {
const ref = useRef();
const onFinish = (values) => {
console.log('Success:', values);
};
const onFinishFailed = (errorInfo) => {
console.log('Failed:', errorInfo);
};
const changName = (errorInfo) => {
// 获取表格数据
const formData = ref.current.getFieldsValue();
// 动态判断输入文本是否符合检验条件
// 长度为8-18位数
if (formData.password.length < 8 || formData.password.length > 18) {
return Promise.reject('请输入8-18位密码')
}
const reg = /^((?=.*\d)(?=.*[a-z])(?=.*[A-Z])|(?=.*\d)(?=.*[A-Z])(?=.*[_!@#$%^&*()?=\[\]])|(?=.*\d)(?=.*[a-z])(?=.*[_!@#$%^&*()?=\[\]])|(?=.*[A-Z])(?=.*[a-z])(?=.*[_!@#$%^&*()?=\[\]])).{8,18}$/
const flag = reg.test(formData.password)
if (!flag) {
return Promise.reject('数字、大写字母、小写字母、特殊字符至少3种, 特殊字符仅限于:_!@#$%^&*()?=[]')
}
// 通过验证
return Promise.resolve()
};
return (
<Form
name="basic"
ref={ref}
labelCol={{
span: 4,
}}
wrapperCol={{
span: 16,
}}
>
<Form.Item
label="password"
name="password"
rules={[{ required: true, message: '' }, { validator: changName }]} >
<Input />
</Form.Item>
</Form>
);
};
ReactDOM.render(<Demo />, document.getElementById('container'));
- form表单的校验默认方式为onChange事件触发,但是有时候,交互体验师会希望用户输入过程中不要动态校验,而是希望在input失焦事件后才进行校验,这时候需要配置Form.Item的validateTrigger属性,统一设置字段触发验证的时机,默认值为onChange,将其设置为onBlur即可
import React, { useRef } from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
import { Form, Input, Button, Checkbox } from 'antd';
const Demo = () => {
const ref = useRef();
const onFinish = (values) => {
console.log('Success:', values);
};
const onFinishFailed = (errorInfo) => {
console.log('Failed:', errorInfo);
};
const changName = (errorInfo) => {
// 获取表格数据
const formData = ref.current.getFieldsValue();
// 动态判断输入文本是否符合检验条件
// 长度为8-18位数
if (formData.password.length < 8 || formData.password.length > 18) {
return Promise.reject('请输入8-18位密码');
}
const reg =
/^((?=.*\d)(?=.*[a-z])(?=.*[A-Z])|(?=.*\d)(?=.*[A-Z])(?=.*[_!@#$%^&*()?=\[\]])|(?=.*\d)(?=.*[a-z])(?=.*[_!@#$%^&*()?=\[\]])|(?=.*[A-Z])(?=.*[a-z])(?=.*[_!@#$%^&*()?=\[\]])).{8,18}$/;
const flag = reg.test(formData.password);
if (!flag) {
return Promise.reject(
'数字、大写字母、小写字母、特殊字符至少3种, 特殊字符仅限于:_!@#$%^&*()?=[]'
);
}
// 通过验证
return Promise.resolve();
};
return (
<Form
name="basic"
ref={ref}
labelCol={{
span: 4,
}}
wrapperCol={{
span: 16,
}}
>
<Form.Item
label="password"
name="password"
validateTrigger="onBlur"
rules={[{ required: true, message: '' }, { validator: changName }]}
>
<Input />
</Form.Item>
</Form>
);
};
ReactDOM.render(<Demo />, document.getElementById('container'));
更多推荐
已为社区贡献3条内容
所有评论(0)