如何在Vuejs中实现邮箱与密码输入字段的数据校验功能

核心问题原因 #

你当前代码的异常是由条件判断误用赋值运算符导致的：
原代码if (this.email = "test" && this.password = "test")中使用的=是赋值操作，执行时会直接将email、password两个字段强制赋值为test，整个判断表达式的返回值永远为真，所以不管输入框有没有内容，点击登录都会直接触发跳转。

修复内容 #

1. 将条件中的赋值运算符=替换为全等比较运算符===，实现真实的输入值校验
2. 新增错误提示相关逻辑，校验不通过时弹出提示，不执行跳转
3. 保留原校验通过后跳转到/Instructions的逻辑

完整修复后代码 #

Script部分 #

export default {
  data: () => ({
    email: "",
    password: "",
    // 新增错误提示相关变量
    showError: false,
    errorMsg: ""
  }),
  methods: {
    validate() {
      // 替换为全等比较判断
      if (this.email === "test" && this.password === "test") {
        this.$router.push('/Instructions');
      } else {
        // 校验不通过弹出错误提示，不跳转
        this.errorMsg = "邮箱或密码输入错误，请重试";
        this.showError = true;
        // 3秒后自动关闭提示
        setTimeout(() => {
          this.showError = false;
        }, 3000)
      }
    },
  },
};

Template部分 #

<template>
  <v-container>
    <!-- 新增错误提示组件 -->
    <v-snackbar v-model="showError" color="error" timeout="3000" top>
      {{ errorMsg }}
    </v-snackbar>
    <div style="text-align: center;margin-bottom: 15px;">
      <img src="../assets/images/LogoGirmiti.png" />
    </div>
    <v-form>
      <v-row>
        <v-col offset-md="4">
          <v-text-field
            v-model="email"
            type="email"
            placeholder="E-mail"
            rounded
            filled
            required
            style="width:400px;"
          ></v-text-field>
        </v-col>
      </v-row>
      <v-row>
        <v-col offset-md="4">
          <v-text-field
            v-model="password"
            type="password"
            placeholder="Password"
            required
            rounded
            filled
            style="width:400px;"
          ></v-text-field>
        </v-col>
       
      </v-row>
      <v-row>
        <v-col style="text-align: center">
          <v-btn color="success" class="mr-4" @click="validate"> Login </v-btn>
        </v-col>
      </v-row>
    </v-form>

  </v-container>
</template>

内容的提问来源于stack exchange，提问作者T dhanunjay