react 与 antd组件 实现手机号码准确性的校验

react 与 antd组件 实现手机号码准确性的校验

背景：

​ 在用户输入手机号后，需要对手机号的合法性做一个校验以免出现用户乱输入的不正确的手机号导致后台短信发送不出。

实现：

1. 首先是最关键的函数部分：

/* 
    用于检测11位的手机号是否有效
    规则：第一位为1，第二位为3，4，5，7，8，后九位为0-9
    parameter：<string> 
    return：<boolean>
*/
export default function useVerifyPhoneNum(phoneNum) {
    let phoneReg = /^[1][3,4,5,7,8][0-9]{9}$/;
    if (!phoneReg.test(phoneNum)) {
        return false
    }
    return true;
}

2. 然后在需要该功能的页面引入该函数即可：

1. 限制了该Input标签的最长位数为11位数
2. form.getFieldValue()获取该标签的值
3. 创建bool参数用来接受useVerifyPhoneNum的返回值
4. 当手机号码填到11位的时候开启校验

// 引入手机校验的功能
// 具体的引入地址根据项目不同自己改变
import useVerifyPhoneNum from '@/utils/verifyPhoneNumber';

// 这个是用到了antd的Input和message和Form组件
<Form.Item name="recipientPhone">
    <Input 
        maxLength = {11}
        placeholder="请填写接收人手机号码" 
        onChange={() => {
            let phoneNum = form.getFieldValue('recipientPhone');
            let bool = useVerifyPhoneNum(phoneNum);
            // 当手机号码填到11位的时候开启校验
            if (!bool && phoneNum.length == 11) {
                return message.error('请填写正确的手机号码！')
            }
        }}
        />
</Form.Item>

实现效果：