1. 表单添加后端校验
// validator需要一个Promise函数,需要return一个Promise函数
const debounce = (
fun,
delay = 500
) => {
let timer: ReturnType<typeof setTimeout>;
return async (...args: any[]) => {
if (timer) {
clearTimeout(timer);
}
return new Promise((resolve) => {
timer = setTimeout(() => {
clearTimeout(timer);
resolve(fun.apply(null, args));
}, delay);
});
};
}
// validator检验,这里把required和whitespace规则都添加到validator里面,不然会出现多个校验提示同时出现的问题,防止多次执行,添加防抖
const setNameValidator = debounce((_, value) => {
return new Promise((resolve, reject) => {
if (value) {
if (value.trim()) {
nameValidator({ name: value })
.then(res => {
if (res) {
resolve(res);
} else reject(new Error('error'));
})
.catch(error => {
reject(error);
});
} else {
reject(new Error('名称不能为空字符串'))
}
} else {
reject(new Error('请输入名称'))
}
});
})
// rule使用
<Form>
<Item rules=[{
required: true,
validator: setNameValidator
}]></Item>
</Form>
2. 表单自动填充密码
如下,使用Input.Password输入框,浏览器会自动填充密码及用户名
1. 若不想让浏览器自动填充, 解决方法:Input.Password 添加属性 autoComplete: 'new-password'
2. 若想修改自动填充的样式,可以设置以下样式
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
box-shadow: 0 0 0 100000000px #fff inset !important;
}
3. 报错:warning.js:6 Warning: Instance created by `useForm` is not connected to any Form element. Forget to pass `form` prop?
我出现这个报错的原因是因为,modal框onCancel事件中使用了form.resetFields(),但我这个modal框内容有多种情况,其中有种情况不包含form表单,但是却使用了form表单的方法所以会有这个警告,添加判断就ok了