如何解决如何将VeeValidator3错误添加到Bootstrap-Vue验证程序中
我需要将Bootstrap-Vue输入表单控件与veevalidate集成在一起。 veevalidate工作正常,但是当发生错误时,我需要将错误行为显示在文本字段中。现在,我可以看到该字段下方的错误,但是绿色轮廓仍然保留在文本字段周围,并带有复选标记。
<validation-provider rules="odd" v-slot="{ errors }">
<b-form-group
id="fieldset-1"
label="Last Name"
label-for="last-name"
:valid-Feedback="errors[0]"
>
<b-form-input id="last-name" v-model="lastName" trim></b-form-input>
<span class="text-danger" v-show="errors[0]">{{ errors[0] }}</span>
</b-form-group>
</validation-provider>
extend('odd',{
validate: value => {
return value % 2 !== 0;
},message: 'This field must be an odd number'
});
解决方法
您的b-form-group
验证倒退了。如果您想让Bootstrap-Vue在该字段中指出错误,请使用use the state
and invalid-feedback
props和passed
flag that VeeValidate provides,
<validation-provider rules="odd" v-slot="{ errors,passed }">
<b-form-group
id="fieldset-1"
label="Last Name"
label-for="last-name"
:invalid-feedback="errors[0]"
:state="passed"
>
<b-form-input id="last-name" v-model="lastName" trim></b-form-input>
</b-form-group>
</validation-provider>
这样,当字段验证失败时,输入将显示为无效,并且Bootstrap-Vue将自行处理显示错误,而不必使用自定义<span>
。
我认为有另一种方法可以解决这个问题:
SELECT *
from TABLE_2 T2
LEFT OUTER JOIN (SELECT REC_ID,MIN(REV_ID)
FROM TABLE_1
GROUP BY REC_ID) T1 on T1.REC_ID = T2.REC_ID;
您的方法中还应该有一个名为 <validation-provider name="Email"
:rules="{ required: true,email: true }"
v-slot="validationContext">
<b-form-group label="Email"
:invalid-feedback="validationContext.errors[0]">
<b-form-input type="email"
v-model="email"
:state="getValidationState(validationContext)" />
</b-form-group>
</validation-provider>
的方法:
getValidationState
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。