当本机脚本表单中的字段为空时，如何显示错误消息

Question

当用户将电子邮件和密码字段留空时，我试图添加一条错误消息，但它不起作用，不确定问题在哪里。我试图在脚本文件中添加一些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>

Answer 1

您需要在data()中添加userM，否则Vue不知道它应该是被动的。

您还需要一个标签来在中显示消息<Label :text="userM" class="UserM" />应该起作用。在这里，它是基于您的代码工作的：https://play.nativescript.org/?template=play-vue&id=N7NbOk

Answer 2

您可以使用alert查看给用户的错误消息：

onRegisterTap: function() {
            if (!this.email) {
                alert("error: empty email")
                return
            }
            if (!this.password) {
                alert("error: empty password ")
                return
            }
}