async-validator icon indicating copy to clipboard operation
async-validator copied to clipboard

type参数中,类似于email取值,是否可以提供phone或者mobile取值,表示匹配电话号,手机号?

Open zhenzong opened this issue 8 years ago • 3 comments

如题

尤其和antd-mobile的表单组件一起使用,手机上输入电话号,手机号的场景还是比较常见的,并且antd-mobile 的InputItem组件是有 type=“phone”的设置,这时候如果能和校验一起使用,那是极好的。省的自己写正则。

ps: antd-mobile 设置type="phone" 的时候,,表单里的取值是 包含空格的,比如 “130 000 0000”,所以校验的时候,容易有问题。不知道是 antd-mobile改进还是在validator这进行适配。? 这个也是我现在遇到的问题之一,我自己在其他地方使用的正则表达式,直接用pattern放到这里,是不能使用,因为前面所说的空格问题。

多谢大神!

zhenzong avatar Nov 14 '16 08:11 zhenzong

你好,你试着不加type选项,只加 pattern 选项,应该能行

ouxu avatar Dec 27 '16 16:12 ouxu

您好:

只用的pattern是可以的。 但是如下代码:

<InputItem clear type="phone"
    placeholder="请输入手机"
    {
        ...getFieldProps('mobile', {
            initialValue: contact.mobile,
            rules: [{
                'required': true,
                'pattern': validator._mobileRe,
                'transform': function(value) {
                    return value ? value.replace(/ /g, '') : value;
                }
            }]
        })
    }
    error={error.hasOwnProperty('mobile')}>手机</InputItem>
<InputItem clear
    placeholder="请输入邮箱"
    {
        ...getFieldProps('email', {
            initialValue: contact.email,
            rules: [{
                'required': true,
                'type': 'email'
            }]
        })
    }
    error={error.hasOwnProperty('email')}>邮箱</InputItem>

async-validator如果能和email校验一样,提供一个type="phone" 的选项,避免去写validator._mobileRe这个正则表达式,这样也挺好的。

问题中的PS,是antd-mobile的InputItem组件维护手机号时会多加两个空格(如: “130 000 000”),在配合async-validator使用的时候,就需要用到transform属性了。

总的来说就不如email一样来得更加方便快捷。

zhenzong avatar Dec 28 '16 14:12 zhenzong

同上,希望支持自定义

nickolboy avatar Aug 07 '19 02:08 nickolboy