js-手机号码验证

之前做表单时遇到需要进行手机号码的验证的情况。起初的我在<a-input>里面写了type="number"加限制位数就草草了事了,自测的时候发现不对劲,我输入小数点竟然也能输入通过,最后我查了下资料并将其更改过来,过程如下

首先我使用的ant-design-vue的a-input结合v-decorator,利用设置rules里面的required属性来将其定义为必填选项。在后面加上个验证函数。

<template>
    ...
    <a-form-item>
        <a-input
            allowClear
            placeholder="请输入联系方式"
            v-decorator="[
              'phone',
              {
                rules: [
                    { required: true, message: '联系方式不能为空' },
                    {validator: check}
                ],
              },
            ]"
          ></a-input>
    </a-form-item>
</template>

之后的js中写入以下函数:

check(rule, value, callback) {
      if (!value || value === '') {
        callback()
      } 
        else {
        const regex = /^1[3456789]\d{9}$/;//使用此正则即可
        if (!regex.test(value)) callback(new Error('请输入正确手机格式'))
        else callback()
      }
    }

这样就大功告成啦!

  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值