vue中 el-input手机号码或座机号码做验证

**
今天工作中让添加号码限制于是自己查了些资料自己写了一份
分别说明一个手机号验证以及固定电话验证
**


              
                
              
            
          
          

            
              
                
              
   

在dara>return>dataRule中添加对应代码

 export default {
    data () {
      return {
       dataRule: {
          supplierPhone: [
            { validator: this.checkPhone, trigger: 'blur' }
          ],
          supplieRtelePhone: [
            { validator: this.checkRtelePhone, trigger: 'blur' }
          ]
        }
      }

在methods中添加对应方法,方法中参数为固定参数

      checkPhone(rule, value, callback) {
        if (!value) {
          callback()                       ------------------这里也可以换成不能为空,不能为空为:return callback(new Error('不能为空'))
        } else {
          const reg = /^1[3|4|5|7|8|9][0-9]\d{8}$/
          console.log(reg.test(value))
          if (reg.test(value)) {
            callback()
          } else {
            return callback(new Error('请输入正确的手机号'))
          }
        }
      },
    checkRtelePhone(rule, value, callback) {
      if (!value) {
        callback()                ------------------这里也可以换成不能为空,不能为空为:return callback(new Error('不能为空'))
      } else {
        const reg = /^0[1|2|3|4|5|6|7|8|9][1|2|3|4|5|6|7|8|9][1|2|3|4|5|6|7|8|9]-\d{8}$/
        console.log(reg.test(value))
        if (reg.test(value)) {
          callback()
        } else {
          return callback(new Error('请输入正确的座机号'))
        }
      }
    },

你可能感兴趣的:(vue)