当本机脚本表单中的字段为空时如何显示错误消息?
How to display an error message when a field is empty in a native script form?
我试图在用户将电子邮件和密码字段留空时添加一条错误消息,但它不起作用,不确定问题出在哪里。我试图在脚本文件中添加一些 if 语句,这样用户就不能将该字段留空,但我无法显示错误消息。
<template>
<Page>
<ActionBar title="Register" />
<ScrollView>
<StackLayout id="register" class="registerform">
<Label text="Email:" class="Email" />
<TextField v-model="email" class="email"></TextField>
<Label text="Password:" class="Password" />
<TextField v-model="password" class="password"></TextField>
</TextField>
<Button text="Register" @tap="onRegisterTap" />
{{userM}}
</StackLayout>
</ScrollView>
</Page>
</template>
<script>
export default {
name: "register",
data() {
return {
email: "",
password: "",
userM: ""
};
},
methods: {
onRegisterTap: function() {
this.userM = "";
if (!this.email) {
this.userM = "error: empty email";
return;
}
if (!this.password) {
this.userM = "error: empty password ";
return;
}
else {
this.userM = " error: username or password is incorrect.";
return;
}
};
</script>
您需要在 data()
中添加 userM
,否则 Vue 不知道它应该是响应式的。
而且您还需要一个 Label 来显示消息。在您的情况下
<Label :text="userM" class="UserM" />
应该可以。这是根据您的代码工作的:https://play.nativescript.org/?template=play-vue&id=N7NbOk
您可以使用警报查看给用户的错误消息:
onRegisterTap: function() {
if (!this.email) {
alert("error: empty email")
return
}
if (!this.password) {
alert("error: empty password ")
return
}
}
我试图在用户将电子邮件和密码字段留空时添加一条错误消息,但它不起作用,不确定问题出在哪里。我试图在脚本文件中添加一些 if 语句,这样用户就不能将该字段留空,但我无法显示错误消息。
<template>
<Page>
<ActionBar title="Register" />
<ScrollView>
<StackLayout id="register" class="registerform">
<Label text="Email:" class="Email" />
<TextField v-model="email" class="email"></TextField>
<Label text="Password:" class="Password" />
<TextField v-model="password" class="password"></TextField>
</TextField>
<Button text="Register" @tap="onRegisterTap" />
{{userM}}
</StackLayout>
</ScrollView>
</Page>
</template>
<script>
export default {
name: "register",
data() {
return {
email: "",
password: "",
userM: ""
};
},
methods: {
onRegisterTap: function() {
this.userM = "";
if (!this.email) {
this.userM = "error: empty email";
return;
}
if (!this.password) {
this.userM = "error: empty password ";
return;
}
else {
this.userM = " error: username or password is incorrect.";
return;
}
};
</script>
您需要在 data()
中添加 userM
,否则 Vue 不知道它应该是响应式的。
而且您还需要一个 Label 来显示消息。在您的情况下
<Label :text="userM" class="UserM" />
应该可以。这是根据您的代码工作的:https://play.nativescript.org/?template=play-vue&id=N7NbOk
您可以使用警报查看给用户的错误消息:
onRegisterTap: function() {
if (!this.email) {
alert("error: empty email")
return
}
if (!this.password) {
alert("error: empty password ")
return
}
}