Vue + Node 手机号、密码登录 前端逻辑

<div class="login-tel">
        <input
          type="text"
          v-model="userTel"
          placeholder="请输入手机号"
          pattern="[0-9]*"
        />
      </div>
      <div class="login-tel">
        <input type="text" v-model="userPwd" placeholder="请输入密码" />
      </div>
<div class="login-btn" @click="login()">登录</div>

import { Toast } from "mint-ui";
import http from "@/common/api/request.js";

data() {
    return {
      userTel: "", //用户输入的手机号
      userPwd: "", //用户输入的密码
      //验证规则是个对象
      rules: {
        //手机号验证 key
        userTel: {
          rule: /^1[23456789]\d{9}$/,
          msg: "手机号不能为空，并且是11位数字",
        },
        //密码验证 key
        userPwd: {
          rule: /^\w{6,12}$/,
          msg: "密码不能为空，并且是6-12位",
        },
      },
    };
  },
  methods: {
    //登录
    login() {
      //前端验证
      //validate函数 把手机号/密码的字符串作为实参
      if (!this.validate("userTel")) return; //如果函数返回false 则用return来终止login函数
      if (!this.validate("userPwd")) return; //如果函数返回false 则用return来终止login函数
    //发送请求，后端验证
      http
        .$axios({
          url: "/api/login",
          method: "POST",
          data: {
            userTel: this.userTel,
            userPwd: this.userPwd,
          },
        })
        .then((res) => {
          //提示信息
          Toast(res.msg);
          //登录失败 就终止
          if (!res.success) return;
          //登录成功 =》跳转页面
        });
      
    },
    //验证信息提示
    validate(key) {
      let bool = true;
      //key是“userTel”或者“userPwd”
      if (!this.rules[key].rule.test(this[key])) {
        //如果不匹配 则提示信息
        Toast(this.rules[key].msg);
        bool = false;
        return false; //如果不匹配正则 终止函数 并且返回false
      }
      return bool; //如果匹配正则 就没进入以上条件 返回true
    },
  },