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官网

评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值