用于 url 检查的 ValidationProvider 规则

Posted 2023-02-22

【中文标题】用于 url 检查的 ValidationProvider 规则

【英文标题】：ValidationProvider rule for url checks

【发布时间】：2020-04-12 06:04:28

【问题描述】：

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

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

但是得到了这个控制台错误：

不存在这样的验证器“ required ”。

与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。 哪里出错了？

谢谢！

【问题讨论】：

您是否尝试过在导入规则的地方添加Vue.component('ValidationProvider', ValidationProvider) 和Vue.component('ValidationObserver', ValidationObserver)，然后在实际文件中删除这些导入？

【参考方案1】：

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

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

但是，如果您想像现在一样传递一个对象（这可能是最好的，因为它比该示例更复杂），那么您需要绑定 rules 属性：

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

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

解释您当前看到的错误：

不存在这样的验证器“ required ”。

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

添加

据此GitHub issue：

现在 VeeValidate 要求您自己导入规则。所以你可以>按规则导入它们：

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

或者您可以使用以下命令导入所有规则：

import 
 ValidationProvider,
 ValidationObserver
 from 'vee-validate/dist/vee-validate.full';

【讨论】：

谢谢！请看 MODIFIED BLOCK

如果您不打算使用所有规则，那么导入每个规则可能不是一个好主意。相反，为什么不只是 import required, confirmed, url, ...etc from 'vee-validate' 来获取您需要的规则？

我试图离开 1 行：从 'vee-validate' 导入 ValidationObserver, ValidationProvider, required, confirm, url 但出现错误：错误：不存在这样的验证器 'required'。语法错误？

很抱歉。我已经更新了我的答案。您不会从 vee-validate 导入（我在上一条评论中提到过）。

这还是不行！请看 MODIFIED BLOCK #2