1. script中代码
<script>
/**
* @Description 验证名称是否已经存在
* @Author m**b
* @Date 2021/5/19 5:19 下午
* @param field
* @param value
* @param callback
* @param message
* @return
*/
function validateFields(field,value,callback,message){
//去后台查询名称是否存在
let _this = this;
axios.get(`${api.projectManage}/checkValue/`+value, {})
.then(function (res) {
if (res.data.code == 10010) {
callback()
}else {
callback(new Error(message || "该名称已存在!"));
}
})
.catch(function (res) {
Vue.prototype.$message({
type: 'error',
message: res.data.msg
});
});
};
var data = {
dialogVisible: false,//dialog显示
//默认展示第几页
currentPage: 1,
//复制的项目所在页
copyProjectPage: 1,
//是否正在加载开关
loading: true,
//数据总数
total: 0,
//默认选择每页展示多少条
pageSize: 5,
//表格内容
tableData: [],
// 非单个禁用
single: true,
//搜索框
formInline: {
projectProgress: 1
},
//必填项
rules: {
Name: [
{required: true, message: '不能为空', trigger: 'blur'},
{pattern: /^[0-9a-zA-Z\u4E00-\u9FA5]{1,32}$/, message: '项目名称不能含有特殊字符!' },
{validator:(field,value,callback) =>validateFields(field,value,callback,''), required:true, trigger: 'blur'}
]
}
}
//VUE内容实现
var vue = new Vue({
el: '#app',
data: data,
//初始加载
created() {
},
methods: {
}
})
</script>
2.html中代码
<el-form-item label="名称" prop="Name" style="padding: 8px 0px;">
<el-input v-model="form.Name" show-word-limit maxlength="32" clearable>
</el-input>
</el-form-item>