对input表单输入框检验重复值,如对如下图参数名进行校验重复值
el-form-item添加属性:rules="rules.paramname"
1.写一个rules
rules: {
paramname: [
{ required: true, validator: this.validateTitle, trigger: 'blur' }
],
},
2.Method里面添加如下方法
rule:指的是表单中rules属性
value:指的表单输入框中输入的值文章来源:https://www.toymoban.com/news/detail-504799.html
callback:回调函数(再次调用校验函数)文章来源地址https://www.toymoban.com/news/detail-504799.html
//参数名称校验
validateTitle (rule, value, callback) {
if (typeof value === 'undefined'||value.length == 0) {
// callback(new Error('请输入参数'))
this.$message({
message:'【参数名】不可以为空',
type: 'warning'
})
} else {
try {
let x = 0;
for(let i = 0; i < this.myform.userList.length; i++ ){
if (this.myform.userList[i].name == value){
x=x+1;
}
if(x == 2){
throw new Error("type-check-error");
}
}
callback()
return true
} catch (e) {
if (e.message == "type-check-error") {
this.$message({
message:'【参数名:'+value+'】已存在',
type: 'warning'
})
return false
}
}
}
},
到了这里,关于vue自定义rules,对input表单输入框校验重复值的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!