我今天开始使用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"
});