在 VeeValidate 和 VueJs 中使用正则表达式进行多重验证

Question

我在最新的 VueJs 应用程序中使用 VeeValidate 应用多重验证，但这不起作用。此正则表达式仅允许字母、数字、space 和一些特殊字符。然而，VeeValidate 总是 returns false.

                                     <ValidationProvider name="Address"
                                            :rules="{
                                                     required: true,
                                                     max:25, 
                                                     regex:'/[a-zA-Z0-9\s_@./#&:;+-]*$/'}"
                                            v-slot="validationContext">
                            <b-form-group id="lbl-city" label="*Address:">

                                <b-form-input id="txt-customer-address"
                                              v-model="formData.address"
                                              placeholder="Enter Address"
                                              :state="getValidationState(validationContext)"
                                              aria-describedby="input-3-feedback">
                                </b-form-input>
                                <b-form-invalid-feedback id="input-3-feedback">
                                    {{ validationContext.errors[0] }}
                                </b-form-invalid-feedback>
                            </b-form-group>
                        </ValidationProvider>

有什么建议吗？

Answer 1

您需要应用正则表达式分隔符而不是字符串。因此，在您的情况下，您可以像这样从正则表达式中删除“'”

<ValidationProvider name="Address"
   :rules="{
      required: true,
      max:25, 
      regex:/[a-zA-Z0-9\s_@./#&:;+-]*$/
   }"
   v-slot="validationContext"
>
    ...
</ValidationProvider>

Answer 2

我发现了问题。

[1] 正则表达式错误，最初缺少 ^ 符号 [2] 正则表达式中的 \s 允许 space 所以我最后在我的正则表达式

中添加了 space

所以最终的正则表达式是正则表达式：/^([a-zA-Z0-9_@;: ])*$/,

现在，它只接受字母，数字，Space 和后面的字符@;;_

在 VeeValidate 和 VueJs 中使用正则表达式进行多重验证

using multiple validation with regex in VeeValidate and VueJs

vue.js

vee-validate