如何使用 vuelidate 验证复选框?
How to validate checkbox using vuelidate?
我使用 nuxt 创建了一个注册表单,并且在表单中有一个复选框。
我应该如何为复选框添加验证?
我正在使用 vuelidate plugin。
<div>
<div class="form-group">
<input
v-model="$v.form.contact.$model"
:class="status($v.form.contact)"
name="contact"
type="contact"
class="form-control"
placeholder="Contact"
@keyup.enter="register"
/>
<p class="errors">
<span
v-if="$v.form.contact.$error"
class="text-danger"
>
<span
v-if="
!$v.form.contact.minLength ||
!$v.form.contact.numeric
"
class="text-danger"
>
Not a valid contact
</span>
</span>
</p>
</div>
</div>
<div>
<input
name="acceptTerms"
type="checkbox"
value=""
/> I agree to the
<a href="/terms-of-use"> Terms & Conditions </a>
<p class="errors"></p>
</div>
下面是验证代码
validations: {
form: {
firstName: {
required,
minLength: minLength(2),
maxLength: maxLength(15),
},
acceptTerms: {
required,
},
},
},
validations: {
form: {
firstName: {
required,
minLength: minLength(2),
maxLength: maxLength(15),
},
acceptTerms: {
required,
sameAs: sameAs(() => true), // add this line in validation
},
},
},
并在表单中添加错误信息
<p class="errors">
<span
v-if="$v.form.acceptTerms.$error"
class="text-danger"
>
<span
v-if="!$v.form.acceptTerms.sameAs"
class="text-danger"
>
Please accept terms and conditions
</span>
</span>
</p>
我使用 nuxt 创建了一个注册表单,并且在表单中有一个复选框。
我应该如何为复选框添加验证?
我正在使用 vuelidate plugin。
<div>
<div class="form-group">
<input
v-model="$v.form.contact.$model"
:class="status($v.form.contact)"
name="contact"
type="contact"
class="form-control"
placeholder="Contact"
@keyup.enter="register"
/>
<p class="errors">
<span
v-if="$v.form.contact.$error"
class="text-danger"
>
<span
v-if="
!$v.form.contact.minLength ||
!$v.form.contact.numeric
"
class="text-danger"
>
Not a valid contact
</span>
</span>
</p>
</div>
</div>
<div>
<input
name="acceptTerms"
type="checkbox"
value=""
/> I agree to the
<a href="/terms-of-use"> Terms & Conditions </a>
<p class="errors"></p>
</div>
下面是验证代码
validations: {
form: {
firstName: {
required,
minLength: minLength(2),
maxLength: maxLength(15),
},
acceptTerms: {
required,
},
},
},
validations: {
form: {
firstName: {
required,
minLength: minLength(2),
maxLength: maxLength(15),
},
acceptTerms: {
required,
sameAs: sameAs(() => true), // add this line in validation
},
},
},
并在表单中添加错误信息
<p class="errors">
<span
v-if="$v.form.acceptTerms.$error"
class="text-danger"
>
<span
v-if="!$v.form.acceptTerms.sameAs"
class="text-danger"
>
Please accept terms and conditions
</span>
</span>
</p>