vue+iview项目正则校验的使用

最新推荐文章于 2023-04-30 14:50:07 发布

Zxiuping

最新推荐文章于 2023-04-30 14:50:07 发布

阅读量1.3k

点赞数 1

文章标签： vue vue+iview ruleValidate 手机号校验车牌号校验

本文链接：https://blog.csdn.net/Zxiuping/article/details/121496715

版权

在前端项目开发中经常会用到正则的校验，iview中有ruleValidate方法的使用

在data中定义

ruleValidate: {
        staff_no: [
          { required: true, message: '员工编号不能为空', trigger: 'blur' }
        ],
        car_number: [
          { required: true, message: '车牌号不能为空', trigger: 'blur' },
          { validator: validateCarNumber, trigger: 'blur' }
        ],
        car_license: [
          { required: true, message: '车证编号不能为空', trigger: 'blur' }
        ],
        car_owner: [
          { required: true, message: '车主姓名不能为空', trigger: 'blur' }
        ],
        parking_spaceid: [
          { required: true, message: '车位编号不能为空', trigger: 'blur' }
        ],
        phone_number: [
          { required: true, message: '手机号不能为空', trigger: 'blur' },
          { validator: validatePhone, trigger: 'blur' }
        ]
      }

在方法中使用

confirm (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          parkingCarManagementUpdate(this.formValidate).then(data => {
            this.isShow = false
            this.$emit('getListFunc')
            this.$Message.success('更改成功！')
            this.$refs[name].resetFields()
          }).catch(e => {
          })
        } else {
          this.$Message.error('Fail!')
        }
      })

这样的话就实现了校验，有时候需要实现手机号校验

const validatePhone = (rule, value, callback) => {
      let phone = value.replace(/\s/g, '')
      // let regs = /^((13[0-9])|(17[0-1,6-8])|(15[^4,\\D])|(18[0-9]))\d{8}$/
      let regs = /^(1)\d{10}$/
      if (value.length !== 0) {
        if (!regs.test(phone)) {
          callback(new Error('手机号输入不合法'))
        } else {
          callback()
        }
      }
    }

方法写在data里

车牌号校验，分为燃油车和新能源车

const validateCarNumber = (rule, value, callback) => {
      let xreg = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}(([0-9]{5}[DF]$)|([DF][A-HJ-NP-Z0-9][0-9]{4}$))/
      let creg = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳]{1}$/
      let number = value.replace(/\s/g, '')
      if (value.length !== 0) {
        if (value.length === 7) {
          if (!creg.test(number)) {
            callback(new Error('车牌号输入不合法'))
          } else {
            callback()
          }
        } else if (value.length === 8) {
          if (!xreg.test(number)) {
            callback(new Error('车牌号输入不合法'))
          } else {
            callback()
          }
        } else {
          callback(new Error('车牌号输入不合法'))
        }
      }
    }