element-ui表单实现根据后台返回数据在指定字段下提示错误信息

今天使用element-ui表单做注册、登录功能，需要根据后台返回的数据，如返回错误提示，需在相应的字段下进行提示，比如验证码错误等。。。

element-ui的form-item有一个error属性可以进行设置错误信息，在接口返回信息后，设置error信息

有一个表单如下：

<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="密码" prop="pass">
    <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item label="确认密码" prop="checkPass">
    <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item label="验证码" prop="valid_num" :error="errorMsg">
    <el-input v-model.number="ruleForm.valid_num"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
    <el-button @click="resetForm('ruleForm')">重置</el-button>
  </el-form-item>
</el-form>

设置验证码error="errorMsg"（errorMsg在data中定义）

在后台数据返回后进行

this.erroMsg = res.data.message

发现一个问题是，点击提交后，第一次可以出现错误信息，可是随后点击后就不会出现了。

解决方式是：

先将errorMsg设置为null，在使用this.$nextTick(() => {this.erroMsg = res.data.message})

解决方法参与与下面的博客：element form表单组件重复错误提示不显示

==============================分割线==============================

前言

在我司已经经历了好几个后台项目了，登录页面一直有个小问题，如果登录出错了并且第一次提示了错误，然后再点击同一个按钮，错误提示就消失，而不是重复显示同一个错误。

后来去翻了下element的源码，发现el-form-item的error属性监听的是watch方法，也就是两次重复的错误操作，提示的错误信息一致，就不会触发 watch 方法。而我的逻辑是这样的，每次点击登录或者发送验证码，都会去重新验证表单，验证通过了才会去发登录或者验证码请求。但是Element表单组件规定一旦表单验证通过就会清除原来的错误提示信息，这样就导致了第二次点击登录或者发送验证码，原来的错误信息被清除了，而两次错误信息又一致没法触发watch方法，所以也不会重新渲染出新的错误信息出来。

感觉说得很啰嗦，不过造成的原因应该还是表达清楚了。

解决的方法

避免form validate和 error 一起使用，要么自己写 if 判断做表单为空和输入不合法的字段，使用 error 提示错误信息。要么就不要使用了 form validate 就不要使用 error
使用vue $nextTick来修复这个问题
vm.$nextTick可以将回调延迟到下次 DOM更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。我们知道错误提示不显示的根本原因是watch方法没有被触发。那如果我每次给错误赋值一个随机值，然后使用vue $nextTick在dom被更新之后将随机值改成我们需要的错误提示不就可以了。

let self = this;
self.$refs['loginForm'].validate((valid, fields) => {
  if (valid) {
    axios.post('/api/login', { email: 'xxx', code: 'xxx' }).then(res => {
      if (res.data.code === 0) {
        // 正确的处理逻辑
      } else {
        // 提示错误
        self.errors.code = Math.random();
        self.$nextTick(() => {
          this.errTips.code = '登录失败，' + (res.data.msg ? '，' + res.data.msg : '');
        });
      }
    });
  } else {
    return false;
  }
});

小静仔

发布了51 篇原创文章 · 获赞 33 · 访问量 9万+

私信关注

element-ui表单实现根据后台返回数据在指定字段下提示错误信息

解决方法参与与下面的博客：element form表单组件重复错误提示不显示

猜你喜欢