本人用的是elementui+vue的校验方法
rules: {
componentPN: [
{validator:validatorcomponentPN,trigger:'blur' }
],
componentFC: [
{validator:validatorcomponentFC,trigger:'blur' }
],
descriptionCN: [
{required:true,validator:validatorDesCN,message:'中文描述不能为空',trigger:'blur' }
],
descriptionEN: [
{required:true,validator:validatorDesEN,message:'英文描述不能为空',trigger:'blur' }
],
announceDate: [
{required:true,message:'发布日期不能为空',trigger:'blur' },
{validator:validatorAnnounceDate,trigger: ['blur','change'] }
],
ratedPower: [
{required:true,validator:validatorRatedPower,trigger:'blur' }
]
}
下面校验的回调函数
// 校验componentPN
const validatorcomponentPN = (rule, value, callback) => {
if (value.trim() ==='') {
if (value ==='' &&/^[A-Za-z0-9]{1,32}$/.test(this.ruleform.componentFC)) {
callback()
this.forbidden =false
console.log('PN输入正确')
return
}else {
this.forbidden =true
return callback(new Error('请输入PN或者FC'))
}
}else if (!/^[A-Za-z0-9]{1,32}$/.test(value)) {
this.forbidden =true
return callback(new Error('首位不可包含空格且长度为1~32个字符'))
}else {
callback()
this.forbidden =false
console.log('PN输入正确')
}
}
// 校验componentFC
const validatorcomponentFC = (rule, value, callback) => {
if (value.trim() ==='') {
if (value.trim() ==='' &&/^[A-Za-z0-9]{1,32}$/.test(this.ruleform.componentPN)) {
callback()
this.forbidden =false
console.log('PN输入正确')
return
}else {
this.forbidden =false
return callback(new Error('请输入PN或者FC'))
}
}else if (!/^[A-Za-z0-9]{1,32}$/.test(value)) {
this.forbidden =false
return callback(new Error('首位不可包含空格且长度为1~32个字符'))
}else {
callback()
this.forbidden =false
console.log('FC输入正确')
}
}
// 校验中文描述
const validatorDesCN = (rule, value, callback) => {
if (value.trim() ==='') {
this.forbidden =true
return callback(new Error('请输入中文描述'))
// 中文、英文、数字但不包括下划线等符号，100以内的字符
}else if (!/^[\u4E00-\u9FA5A-Za-z0-9]{1,100}$/.test(value)) {
this.forbidden =true
return callback(new Error('首位不可包含空格且不可超过100个字符'))
}else {
callback()
this.forbidden =false
console.log('中文描述输入正确')
}
}
// 校验英文描述
const validatorDesEN = (rule, value, callback) => {
if (value.trim() ==='') {
this.forbidden =true
return callback(new Error('请输入英文描述'))
// 英文和数字
}else if (!/^[A-Za-z0-9]{1,100}$/.test(value)) {
this.forbidden =true
return callback(new Error('首位不可包含空格且不可超过100个字符'))
}else {
callback()
this.forbidden =false
console.log('英文描述输入正确')
}
}
// 校验发布日期
const validatorAnnounceDate = (rule, value, callback) => {
if (value ==='') {
this.forbidden =true
return callback(new Error('请选择发布日期'))
}else if (!(value)) {
this.forbidden =true
return callback(new Error('发布日期不能为空'))
}else {
callback()
this.forbidden =false
console.log('发布日期选择正确')
}
}
// 校验额定功率
const validatorRatedPower = (rule, value, callback) => {
if (value.trim() ==='') {
this.forbidden =true
return callback(new Error('请输入额定功率'))
}else if (!/^[0-9]*[1-9][0-9]*$/.test(value)) {
this.forbidden =true
return callback(new Error('只能输入正整数'))
}else {
callback()
this.forbidden =false
console.log('额定功率输入正确')
}
}