tem
<el-form-item label="晚餐:">
<template slot-scope="scope">
<div class="table_td_cell" :class="{ res_border: text3 !== '' }">
<el-input
type="textarea"
v-model="ruleForm.dinnerContent"
@input="changeValue3"
></el-input>
</div>
<div class="res_text">
{{ text3 }}
</div>
</template>
</el-form-item>
css
res_border样式:
.res_text {//红色验证文字“菜品名称重复，请检查后重新填写”,“不能超过500个字符”
color: #f56c6c;
font-size: 12px;
line-height: normal;
}
.res_border >>> .el-textarea__inner {//红色边框
border: 1px #f56c6c solid;
}
text3=' '
changeValue3(val) {
let arr3 = val.split(",");//此处将输入的内容 根据逗号区分 到数组中的参数
if (val.length > 500) {
this.text3 = "不能超过500个字符";
} else {
this.text3 = "";
let nary3 = arr3.sort();
for (var i = 0; i < nary3.length - 1; i++) {//循环数组 判断每一项是否与前一项相同
if (nary3[i] == nary3[i + 1]) {
this.text3 = "菜品名称重复，请检查后重新填写";
return;
}
}
}
},
字段重复验证
不能超过500个字符
