如何在 Vuejs 中添加检查电子邮件和密码字段数据的方法?

Question

< script >
export default {
data: () => ({
email: "",
password: "",
}),
methods: {
validate() {
if (this.email = "test" && this.password = "test") {
this.$router.push('/Instructions');
} else {
this.$router.push('/');
}

},
},
}; <
/script>

<template>
<v-container>
<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>

如何使用一些数据验证电子邮件和密码字段。 例如，在电子邮件字段中输入"测试"和密码"测试"后，只有用户应该转到下一页。 否则给出一些错误消息。

我不知道下面的代码有什么问题，无需在字段中输入任何数据，然后单击按钮，我就可以重定向到下一个屏幕。

Answer 1

我认为您正在使用Vuetify，不是吗？您可以将"rules"属性用于v-text-field标记。

规则可以定义为返回booleans的条件数组。请参阅：此处的规则文档。