url 检查的 ValidationProvider 规则

Question

在@vue/cli 4.0.5 应用程序中，我需要向 ValidationProvider 规则添加附加 URL 检查。我的代码：

<ValidationProvider
    name="website"
    rules="{ required : true, url: {require_protocol: true} }"
    v-slot="{ errors }"
>

但出现此控制台错误：

No such validator '{ required ' exists.

与rules:

    rules="required : true, url: {require_protocol: true}"

错误是：

No such validator 'required ' exists.

哪种格式有效？

    "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
    };
};
...

与 samples/provided link 相比，我没有看到错误语法我在要求声明之前声明了 ValidationObserver、ValidationProvider。哪里出错了？

谢谢！

Answer 1

在this example中他们使用竖线字符（|）来分隔字符串规则：

<ValidationProvider rules="required|confirmed:confirm" v-slot="{ errors }">
...

然而，如果你想像现在这样传递一个对象（这可能是最好的，因为它比那个例子更复杂）那么你需要绑定 rules prop:

<ValidationProvider
  v-bind:rules="{ required : true, ... }"
  ...
>

<!-- Or shorthand binding syntax with : -->
:rules="{ required : true, ... }"

解释您当前看到的错误：

No such validator '{ required ' exists.

那是因为，如果不绑定 rules 属性，您传递的是原始字符串而不是对象。所以它将 { required 解释为验证器的名称，而这显然不是有效的验证器名称。

加法

据此GitHub issue:

Now VeeValidate requires you to import the rules yourself. So you can either >import them rule by rule:

import { required, email } from 'vee-validate/dist/rules';

or you can import all rules once using:
import {
 ValidationProvider,
 ValidationObserver
} from 'vee-validate/dist/vee-validate.full';

url 检查的 ValidationProvider 规则

ValidationProvider rule for url checks

vue.js

vee-validate