ant-design-vue手机号格式表单验证(可以空但是非空就要符合格式)

ant-design-vue手机号格式表单验证(可以空但是非空就要符合格式)

需求:

对表单中的一个input组件进行表单验证,该input非必填可以为空,但是如果不为空则要进行手机号格式验证

input组件代码

<a-form-item :label="`手机号码`">
	<a-input
    	name="mobilephone"
        v-decorator="['mobilephone',{rules: [{validator: mobilephoneValidate}]}]" placeholder="手机号码"/>
</a-form-item>

验证方法

  /**
   *手机号码格式验证
   * @param str
   * @returns {boolean}
   */
  testMobilephone: function (str) {
    const regex = /^1[3456789]\d{9}$/
    if (!regex.test(str)) {
      return false
    } else {
      return true
    }
  },

调用验证方法验证

	mobilephoneValidate (rule, value, callback) {
	  // 主要就是添加一个对undefined和空串的判断
      if (typeof (value) === 'undefined' || value === '') {
        callback()
      } else {
        if (!this.testMobilephone(value)) {
         callback(new Error('请输入正确手机格式'))
        }
        callback()
      }
    }
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值