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

最新推荐文章于 2025-05-10 17:32:20 发布

原创最新推荐文章于 2025-05-10 17:32:20 发布 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue #vue+iview #ruleValidate #手机号校验 #车牌号校验

本文介绍如何在iview中使用ruleValidate方法进行前端表单验证，包括员工编号、车牌号、手机号的校验规则，以及针对不同类型的车牌号码（燃油车和新能源车）的定制验证。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在前端项目开发中经常会用到正则的校验，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('车牌号输入不合法'))
        }
      }
    }