VUE + Element-UI 表单校验input框数据已存在

基础校验方式实现

html代码

<el-form-item label="值名称:" style="width: 80%" prop="valueName" 
                :rules="[ 
                	{ required: true, message: '值名称不能为空'},
                	{ validator: checkValueNameIfExist, trigger: 'blur'},
                	{ pattern: \^[\u4E00-\u9FA5A-Za-z0-9_]+$\g, 
                	  message: '只允许输入中文、英文、下划线' }
                ]">
          <el-input v-model="formData.valueName" style="width: 90%"></el-input>
</el-form-item>

这里的:rules绑定的值也可以统一定义data.return里面。
2.js代码，methods中添加checkValueNameIfExist校验方法

 // 校验值名称是否存在
    async checkValueNameIfExist(rule, value, callback) {
        if(value) {
            let valueName = value
            let id = this.checkId
            let res = false
            // 发送请求，查询数据库当前表单内容是否已存在
            // 这里必须等待请求结束才能执行之后的代码
            // 否则 res 一直等于 false 即校验通过
            await checkRuleElemName({valueName, id}).then((data) => {
                res = data
            })
            if (res === true) {
                callback(new Error('值名称已存在'))
            } else {
                callback()
            }
            callback()
        }
        callback()
    },

注意： 代码中的checkValueNameIfExist 方法必须加关键字await ！！！
3.查询sql：

select COUNT(ID) from table where VALUE_NAME = #{valueName} 
<if test="id != null and id != ''">
	id <![CDATA[<>]]> #{id}
</if>

sql解释：
前端新增和修改用的是同一个页面，所以需要考虑到修改的时候校验重复性。
前端实现步骤
在data.return 中添加checkId: null
新增时this.checkId = ""把checkId设置成空或者null
修改时this.checkId = this.multipleSelection.xxId把获取到的表格中指定行数据的ID赋值给checkId