vue---向后台校验用户名/手机号码/邮箱等唯一性的参数是否被注册

需求说明：

当添加（注册）或编辑用户信息时，需要在用户名/手机号码/邮箱等参数填写后立马像后台发送该填写参数是否在数据库中已存在，如果存在则返回错误信息，并在页面上显示错误提示。效果如图：

解决方法：

以校验手机号码为例：

1、在data中声明【 errorMsg1: "",】该变量用于存储表单域验证错误信息。并在el-form-item标签中加入【:error="errorMsg1"】

Form-Item Attributes

error

表单域验证错误信息, 设置该值会使表单验证状态变为error，并显示该错误信息

string

2、为该el-form-item中的el-input添加失去焦点事件【@blur="checkMobile"】

Input Events

事件名称	说明	回调参数
blur	在 Input 失去焦点时触发	(event: Event)

在输入框失去焦点时，当编辑用户信息-修改手机号码，修改的手机号码和原有的号码不相同及手机号码不为空的情况下，向后台发送检验。

 // 添加/编辑用户校验手机号码是否重复
    checkMobile() {
      this.errorMsg1 = ""; //校验前需情况错误信息
      if (
        this.userInfoForm.mobile != this.currentMobile &&
        this.userInfoForm.mobile
      ) {
        var checkForm = {
          mobile: this.userInfoForm.mobile
        };
        let param = {
          token: this.$store.state.token,
          checkUserInfoForm: checkForm
        };
        userCheck(param).then(res => {
          console.log("用户校验res", res);
          if (res.data.respCode != "00000") {
            this.errorMsg1 = res.data.respDesc; //后台返回错误信息
          }
        });
      }
    },

【this.currentMobile】从编辑用户的回显信息（后台返回的）中获得【this.currentMobile = res.data.result.mobile;】

ps:案例中的axios被封装了下，相关的请求方式,url，data,config配置写在另一个js文件中，如下

// 导入axios
import axios from "axios";
// 设置基地址-使用自定义配置新建一个 axios 实例
const http = axios.create({
  baseURL: "/"
});

// 检查用户信息是否可用
export const userCheck = param => {
  return http.post("system/user/check", param.checkUserInfoForm, {
    headers: { accessToken: param.token }
  });
};

在页面组件中导入【import { userCheck,} from "../../api/http";】即可。

3.注意：当关闭添加/编辑对话框时，【 errorMsg1】需要清空，给el-dialog添加【 @close="closeUserINfoForm"】

//关闭添加/编辑用户对话框
    closeUserINfoForm() {
      this.errorMsg1 = "";
    },

参考：element官网