在 @vue/cli 4.0.5 应用程序中,我需要向ValidationProvider
规则添加附加 URL 检查。我的代码:
<ValidationProvider
name="website"
rules="{ required : true, url: {require_protocol: true} }"
v-slot="{ errors }"
>
但是得到这个控制台错误:
不存在这样的验证器"{必需"。
带rules
:
rules="required : true, url: {require_protocol: true}"
错误是:
不存在这样的"必需"验证器。
哪种格式有效?
"vee-validate": "^3.1.0",
"vue": "^2.6.10",
修改后的块:
有规则:
:rules="{ required : true, url: {require_protocol: true} }"
我收到下一个错误:
vee-validate.esm.js?7bb1:708 Uncaught (in promise) Error: No such validator 'url' exists.
我希望所有方法都必须是可访问的,就像我在导入部分中所做的那样:
...
import {ValidationObserver, ValidationProvider, extend} from 'vee-validate'
import * as rules from 'vee-validate/dist/rules';
Object.keys(rules).forEach(rule => {
extend(rule, rules[rule]);
});
import {localize} from 'vee-validate';
怎么了?
修改后的块 #2 :
在 vue 文件中
<ValidationProvider
name="website"
:rules="{ required : true }"
v-slot="{ errors }"
>
...
import { ValidationObserver, ValidationProvider } from 'vee-validate'
import { required, email } from 'vee-validate/dist/rules' // MY PHP STORM shows this line in gray color as nonused elements
我仍然收到错误:
vee-validate.esm.js?7bb1:708 Uncaught (in promise) Error: No such validator 'required' exists.
我找到了文件/node_modules/vee-validate/dist/rules.js 带有以下行:
var required = {
validate: validate$o,
params: params$h,
computesRequired: computesRequired
};
var testEmpty = function (value) {
return isEmptyArray(value) || includes([false, null, undefined], value) || !String(value).trim().length;
};
var validate$p = function (value, _a) {
var target = _a.target, values = _a.values;
var required;
if (values && values.length) {
if (!Array.isArray(values) && typeof values === 'string') {
values = [values];
}
// eslint-disable-next-line
required = values.some(function (val) { return val == String(target).trim(); });
}
else {
required = !testEmpty(target);
}
if (!required) {
return {
valid: true,
required: required
};
}
return {
valid: !testEmpty(value),
required: required
};
};
...
我没有看到与示例/提供的链接进行比较的错误语法 我在要求声明之前声明了 ValidationObserver、ValidationProvider。 错误在哪里?
谢谢!
在此示例中,他们使用管道字符 (|
( 来分隔字符串规则:
<ValidationProvider rules="required|confirmed:confirm" v-slot="{ errors }">
...
但是,如果你想像现在一样传递一个对象(这可能是最好的,因为它比那个例子更复杂(,那么你需要绑定rules
prop:
<ValidationProvider
v-bind:rules="{ required : true, ... }"
...
>
<!-- Or shorthand binding syntax with : -->
:rules="{ required : true, ... }"
要解释您当前看到的错误,请执行以下操作:
不存在这样的验证器"{必需"。
这是因为,如果不绑定rules
道具,您将传递原始字符串而不是对象。因此,它将{ required
解释为验证者的名称,而这显然不是有效的验证者名称。
加法
根据此 GitHub 问题:
现在,VeeValidate 要求您自己导入规则。因此,您可以逐条规则>导入它们:
import { required, email } from 'vee-validate/dist/rules';
或者,您可以使用以下命令导入所有规则:
import { ValidationProvider, ValidationObserver } from 'vee-validate/dist/vee-validate.full';