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