简单的举个例子,不会写出所有代码
问题点
-
当
Input
失焦的时候不会触发,phoneNumberRules-校验
-
看文档写着 mobile.ant.design
-
所以直接在
子组件
里查看父组件
传的方法都有什么,props
里查到有onBlur()
方法 -
ok 直接调用此方法来实现我们的需求- 失去焦点的时候校验
子组件
import React from 'react';
import { Input } from "antd-mobile";
const PhoneNumberInput: React.FC<any> = (props) => {
return (
<>
<div>
<img src={require("@/assets/images/deposit/co-icon.png")} />
<span>+57</span>
</div>
<Input
type="tel"
value={props.value}
onChange={props.onChange}
onFocus={() => {
props.handleChangeValidError(1, false)
}}
onBlur={() => {
props.onBlur && props.onBlur();
props.handleChangeValidError(1, true)
}}
/>
</>
);
}
export default PhoneNumberInput;
父组件
const phoneNumberRules = [
{
validator: (_: any, value: string) => {
// 校验是否为空
if (value === undefined || value === "") {
return Promise.reject('不能为空');
}
// 校验是否为合法的电话号码
const phonePattern = new RegExp("[0-9]");
if (value) {
for (const char of value) {
if (!phonePattern.test(char)) {
return Promise.reject('电话号码格式错误');
}
}
}
return Promise.resolve();
},
},
];
<Form form={form} className={"addInfoForm"}>
{
<React.Fragment>
{/* Phone No. */}
<div className={less.phoneWrap}>
<Form.Item
name={phoneNumberField}
rules={phoneNumberRules}
validateTrigger={"onBlur"}
hasFeedback={validError[1]}
>
<PhoneNumberInput handleChangeValidError={handleChangeValidError} />
</Form.Item>
</div>
</React.Fragment>
}
</Form>