项目：前端：vue3+elemen-plus  后端：spring-boot mybatis-plus

一、登录按钮根据判断决定是否禁用

登陆按钮对登陆页面的 “用户名和密码”判断后决定是否禁用（validator为密码校验的方法）

:disabled="param.username === '' || param.password === '' || param.captcha === '' || validator(param.password)"

二、完整代码

若用户名、密码为空或者密码未校验成功，不可以点击登录按钮

<template>
<div>

     
     <div class="login-btn">
          <el-button type="primary"
                     :disabled="param.username === '' 
                             || param.password === '' 
                             || validator(param.password)"
                     @click="submitForm()">登录
          </el-button>

     </div>
</div>
</template>

<script>
export default {
  data() {
    return {
      param: {
        username: "",
        password: ""
        },
      rules: {
        username: [
          {required: true, message: "请输入用户名", trigger: "blur"}
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur',},
          {
            trigger: 'blur', validator:(rules,value,callback)=> this.validator(value)? callback(new Error("")):callback(),
            message: '密码以字母开头，由8-16位字母和数字组合'
          }
        ]
      }
    };
  },
  methods: {
      //登录
    submitForm() {
       //调用check方法
      const safeguard = this.check()
      if(!safeguard)
        return;

      fetchPost(urlConfig.loginUrl, this.param).then(res => {
        if (res.success) {
          this.$message.success("登录成功");
          localStorage.setItem("ms_username", this.param.username);
          this.$router.push("/table");
        } else {
          this.$message.error(res.message);
          return false;
        }
      })
    },
    
    //判断用户名 密码 验证码是否为空
    check(){
      //定义
      const username = this.param.username,password = this.param.password,captcha = this.param.captcha;
      //判断
      return username !== '' && password !== '' && !this.validator(password);
    },

    // 密码校验
    validator(password){
      const passwordReg = new RegExp('^[a-zA-Z][a-zA-Z0-9]{7,15}$');
      return !passwordReg.test(password);
    }

  }
};
</script>

<style>
</style>

注：

1、登录按钮绑定@click事件，调用登陆方法；在登陆方法中调用check方法（注2），将封装好的数据用axios调用后台接口路径传给后端；

2、check方法：再次判断用户名、密码是否为空，是防止暴力破解（去掉登录按钮那里的“:disabled”达到登录的目的）

3、^[a-zA-Z][a-zA-Z0-9]{7,15}$ 密码正则校验（字母开头，由8-16位字母和数字组合）