[英]vee-validate different text-field values
I use vee-avlidate 3 and Nuxt.js我使用 vee-avlidate 3 和 Nuxt.js
How can I make a rule that checks 2 text-field values are different ?如何制定规则来检查 2 个文本字段值是否不同?
For example the current_password
field should be different from new_password
field.例如
current_password
字段应该不同于new_password
字段。
Password.vue密码.vue
<template>
<v-app>
<ValidationObserver ref="form" v-slot="{ invalid, validated, passes, validate }">
<form>
<ValidationProvider rules="required|min:6" v-slot="{ errors, valid }">
<v-text-field
v-model="current_password"
label="Current Password"
type="password"
:success="valid"
:error-messages="errors"
/>
</ValidationProvider>
<ValidationProvider rules="required" v-slot="{ errors, valid }">
<v-text-field
v-model="new_password"
label="New Password"
type="password"
:success="valid"
:error-messages="errors"
/>
</ValidationProvider>
</form>
</ValidationObserver>
</v-app>
</template>
<script>
import { ValidationObserver, ValidationProvider } from "vee-validate";
export default {
data() {
return {
current_password: "",
new_password: "",
};
},
components: {
ValidationObserver,
ValidationProvider
},
};
</script>
Thanks谢谢
Have a read of the documentation for cross field validation .阅读有关跨领域验证的文档。 Essentially the steps are
基本上步骤是
ValidationObserver
component.ValidationObserver
组件中。 For your code:对于您的代码:
<template>
<v-app>
<ValidationObserver ref="form" v-slot="{ invalid, validated, passes, validate }">
<form>
<ValidationProvider rules="required|min:6" v-slot="{ errors, valid }" name='password'>
<v-text-field
v-model="current_password"
label="Current Password"
type="password"
:success="valid"
:error-messages="errors"
/>
</ValidationProvider>
<ValidationProvider rules="required|distinct:@password" v-slot="{ errors, valid }" name='new password'>
<v-text-field
v-model="new_password"
label="New Password"
type="password"
:success="valid"
:error-messages="errors"
/>
</ValidationProvider>
</form>
</ValidationObserver>
</v-app>
</template>
<script>
import { ValidationObserver, ValidationProvider, Extend } from "vee-validate";
extend('distinct', {
params: ['target'],
validate(value, { target }) {
return value !== target;
},
message: 'Fields can not be the same'
});
export default {
data() {
return {
current_password: "",
new_password: "",
};
},
components: {
ValidationObserver,
ValidationProvider
},
};
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.