1.实现效果

 2.代码

      html

<template>
  <el-form
    :model="ruleForm"
    :rules="rules"
    ref="ruleForm"
    class="demo-ruleForm"
  >
    <el-form-item label="" prop="name"
      ><el-input
        type="text"
        autocomplete="off"
        v-model="ruleForm.name"
        prefix-icon="el-icon-user-solid"
        placeholder="请输入用户名"
      ></el-input
    ></el-form-item>
    <el-form-item label="" prop="password1"
      ><el-input
        type="password"
        autocomplete="off"
        v-model="ruleForm.password1"
        prefix-icon="el-icon-lock"
        placeholder="请输入密码"
      ></el-input
    ></el-form-item>
    <el-form-item label="" prop="password2"
      ><el-input
        type="password"
        autocomplete="off"
        v-model="ruleForm.password2"
        prefix-icon="el-icon-lock"
        placeholder="请再次输入密码"
      ></el-input
    ></el-form-item>
    <el-form-item class="btns">
      <el-button type="primary" @click="submitForm('ruleForm')">注册</el-button>
      <el-button @click="resetForm('ruleForm')">重置</el-button>
    </el-form-item>
  </el-form>
</template>

js

        验证用户名后端返回数据

<script>
//引入接口
import { userRules, register } from "./../api/login";
export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.password2 !== "") {
          this.$refs.ruleForm.validateField("password2");
        }
        callback();
      }
    };

    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.password1) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    var checkname = (rule, value, callback) => {
      if (value != "") {
          if(this.nameRules()){
            callback(new Error("用户名已存在，请重新输入"))
          }else{
            callback()
          }
      
      }
      callback();
    };

    return {
      activeName:"second",
      ruleForm: {
        name: "",
        password1: "",
        password2: "",
        email:""
      },
      rules: {
        name: [
          { required: true, message: "请输入您的名称", trigger: "blur" },
          {
            min: 2,
            max: 25,
            message: "长度在 2 到 25 个字符",
            trigger: "blur",
          },
          { validator: checkname, trigger: "blur" },
        ],
        password1: [
          { required: true, validator: validatePass, trigger: "blur" },
        ],
        password2: [
          { required: true, validator: validatePass2, trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    submitForm(formName) {
      const data = {
        name : this.ruleForm.name,
        password1:this.ruleForm.password1,
        password2:this.ruleForm.password2,
        email:this.ruleForm.email
      }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          register(data).then((res) => {
            if (res.message == "ok") {
              this.$message.success("注册成功");
              this.resetForm(formName)
            } else {
              this.$message.error("注册失败");
            }
          });
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //验证用户名是否存在
    nameRules() {
      let params = {
        name: this.ruleForm.name,
      };
      userRules(params).then((res) => {
          if(res.message == 'ok'){
            return false
          }else{
            this.$message.error("用户名已存在，请重新输入!")
            this.ruleForm.name = ""
          }
      })
    },
  }
};
</script>