input 失去焦点时，验证表单名称是否为唯一值

xiaoming_0208

已于 2023-02-22 14:01:19 修改

阅读量294

点赞数

分类专栏：前端文章标签：前端 javascript html

于 2023-01-17 11:04:01 首次发布

本文链接：https://blog.csdn.net/xiaoming4965/article/details/128713301

版权

前端专栏收录该内容

33 篇文章 0 订阅

订阅专栏

html部分

 <el-form-item label="表名:" prop="tableName">

     <el-input  prop="tableName" 
                v-model="formInline.tableName" 
                clearable  //后面清空符号
                >        
     </el-input>

 </el-form-item>

script部分

 data() {

    // 表单验证

            var checkValueNameIfExist = (rule, value, callback) => {

                      if (value) {

                        this.validateHas(value); //验证方法

                      }

                        callback();

              };
//验证

 rules: {

  //验证规则中添加 validator: checkValueNameIfExist    失去焦点验证 trigger: "blur"

        tableName: [

          { trigger: "blur",   validator: checkValueNameIfExist },

        ], 
      
      },
}

// methods 方法中
 // head表单重名验证  验证tableName是否唯一

    validateHas(value) {

      //从后台接口获取数据，把tableName传过去，如果result不为空则存在

      getOnlyTable(this.formInline.tableName) //接口调取

        .then((res) => {

          if (res.result === -1 && this.$route.query.flag === "add") {  //新增时验证

            this.$message.error("名称已存在");

          }

        })

        .catch((err) => {

          console.log(err);

        });

  },