Antd4.x 手机号输入框验证
756
0
2023-06-25
2023-06-25
Hey、小怪兽
- • 版本：umi-3.5.1，antd-4.1.3
- • 前几天测试提了个BUG：说是手机号提交后，编辑就不能再提交了，提示‘请输入正确的手机号’
- • 既然是格式不正确，那就是验证手机号的rules有问题，看一下代码：
-
<Form.Item name="phone" label="手机号" rules={[ { required: true, message: '手机号不能为空!' }, { message: '请输入正确的手机号', pattern: /^1[3456789]\d{9}$/ } ]} > <Input style={inputStyle} placeholder="请输入手机号" allowClear autoComplete="off" /> </Form.Item> - • 这里有2个验证，第一个是必填的验证，第二个是一个正则：/^1[3456789]\d{9}$/
- - / 是正则表达式的开始和结束符号
- - ^ 表示匹配输入字符串的开头
- - 1 匹配数字 1
- - [3456789] 表示匹配一个数字
- - \d 表示匹配任意一个数字
- - {9} 表示前面的 \d 匹配的数字重复 9 次
- - $ 表示匹配输入字符串的结尾。
- • 看起来有点复杂，正则可视化一下就很清楚了，也就是第1位是1，第2位是3456789里的1个数字，然后后面要跟9个数字：
- • 这个正则没问题，就是手机号并不一直是数字的：
- - 当新增的时候，手机号通过AES加密给后端
- - 当编辑的时候，后端会解密后然后再加*号返回给前端
- • 比方说一个手机号188888888，提交成功后下次编辑，就变成了188***888
- • 问题就出在这里，188***888并不符合这个正则的检验，可以把这个正则校验提取成一个方法：
-
<Form.Item name="phone" label="手机号" rules={[ { required: true, message: '手机号不能为空!' }, { validator: validatePhone }, ]} > <Input style={inputStyle} placeholder="请输入手机号" allowClear autoComplete="off" /> </Form.Item> - • phoneRegex是原来的正则，phoneEditRegex是允许*号的正则
- • value是输入框里的手机号
- • record.phone是表格这一行的手机号，可以理解为是188***888，如果没有说明是新增
- • record.phone === value，代表了如果全等，那么必然是编辑并且没有修改手机号的情况，那么就走第二个正则，允许带*号
- • 如果不等于，走else，说明要么是新增手机号，要么是编辑的时候又修改了手机号，这个时候就走原来的正则，不允许带*号
-
/** 手机号验证 */ const validatePhone = (rule, value, callback) => { const phoneRegex = /^1[3456789]\d{9}$/; const phoneEditRegex = /^1[3456789][*\d]{0,8}\d$/; if (record.phone === value) { !phoneEditRegex.test(value) ? callback('请输入正确的手机号') : callback(); } else { !phoneRegex.test(value) ? callback('请输入正确的手机号') : callback(); } }; - • 接下去还要修改一下提交的方法，总不能把188***888提交给后端（提交的必须是AES加密后的）
-
// 新增的时候：AES加密手机号传给后端 // 编辑的时候，如果修改了手机号：AES加密手机号传给后端 // 编辑的时候，如果没有修改手机号，从提交表单删除手机号，不提交给后端 record.phone === form.phone ? delete form.phone : form.phone = des3Params(form.phone).shift();