Vee-Validate 3.0-基本示例值=> !! value对我不起作用

时间:2019-10-15 13:57:07

标签: javascript vue.js vee-validate

我今天开始使用vee验证,并且运行良好。除了必需的规则。我从文档中获取了基本示例,因此它应该正常工作吗?它什么也没显示,我想念什么? validate: value => value === "example"可以正常工作,当我开始在输入字段中输入内容时,错误弹出。

还有什么!意思?我搜索了js运算符,但找不到它。我假设它会检查该值是否为空?

Vue组件

    <template>
    <div class="wrapper fadeIn">
        <div id="formContent">
            <form>
                <ValidationProvider rules="required" v-slot="{ errors }">
                    <input
                        v-model="form.username"
                        type="text"
                        id="username"
                        class="fadeIn second"
                        name="login"
                        placeholder="username"
                    />
                    <span>{{ errors[0] }}</span>
                </ValidationProvider>
                <input
                    v-model="form.email"
                    type="text"
                    id="email"
                    class="fadeIn second"
                    name="login"
                    placeholder="email"
                />
                <input
                    v-model="form.password"
                    type="password"
                    id="password"
                    class="fadeIn third"
                    name="login"
                    placeholder="password"
                />
                <input
                    v-model="form.passwordConfirmation"
                    type="password"
                    id="confirm"
                    class="fadeIn third"
                    name="login"
                    placeholder="confirm password"
                />
                <input
                    @click.prevent="register"
                    type="submit"
                    class="fadeIn fourth"
                    value="Register"
                />
            </form>

            <div id="formFooter">
                <router-link to="/" class="underlineHover">Forgot Password?</router-link>
                <router-link to="/" class="underlineHover">Log In</router-link>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "register",
    data() {
        return {
            form: {
                username: "",
                email: "",
                password: "",
                passwordConfirmation: ""
            },
            logginError: ""
        };
    },
    methods: {
        register() {
            this.$store
                .dispatch("tryRegister", this.form)
                .then(response => {
                    this.$router.push({ path: "/" });
                })
                .catch(error => {
                    this.logginError = error;
                });
        }
    }
};
</script>

<style lang="scss" scoped>
@import "~@/popup.scss";
</style>

规则

extend("required", {
    validate: value => !!value,
    message: "This field is required"
});

0 个答案:

没有答案