vee 验证正则表达式不起作用答案

【问题标题】：vee-validate regex not workingvee 验证正则表达式不起作用
【发布时间】：2018-11-29 23:49:52
【问题描述】：

我需要使用 vee-validate 验证美国电话号码 XXX-XXX-XXXX 和 basic regex: (?:\d{3}-)\d{3}-\d{4}。正则表达式工作正常by itself，但不适用于 vee-validate，我不确定为什么。

标记

<!DOCTYPE html>
<html>
   <head>
      <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/vee-validate@latest/dist/vee-validate.js"></script>
   </head>
   <body>
      <div id="app">
         <form action='#' method='POST'>

            <input v-validate="'required|regex:^(?:\(\d{3}\)|\d{3}-)\d{3}-\d{4}$'" :class="{'input': true, 'is-danger': errors.has('phone_primary') }" class="input is-info" type="text" name='phone_primary' value="$phone_primary" placeholder="404-555-1212" size="15">
            <span v-show="errors.has('phone_primary')" class="help is-danger">{{ errors.first('phone_primary') }}</span>

            <button class="button is-link" name='submitform' value='go'>Submit</button>
         </form>
      </div>
      <script>
         Vue.use(VeeValidate);
         new Vue({
           el: '#app',
           template: '#app',
           data: {
              phone_primary: null
           }
         });
      </script>

    </body>
</html>

Fiddle

我做错了什么，正则表达式没有按预期工作？

【问题讨论】：

标签： regex vee-validate

【解决方案1】：

v-validate 指令接受一个字符串值，它是一个由管道分隔的验证列表 (|)。由于管道也在正则表达式模式中使用（作为交替运算符），因此字符串命令无效。作为一种解决方法，传递一个对象而不是字符串值。

此外，vee-validate 中的正则表达式需要 正则表达式分隔符，/ 字符围绕模式。

所以，你可以使用

v-validate="{ required: true, regex:/^(?:\(\d{3}\)|\d{3}-)\d{3}-\d{4}$/ }"

见the updated fiddle。

注意正则表达式不匹配空字符串，因此空输入无效。

【讨论】：

留下空白字段时无法触发验证错误。
Perfect 现在效果很好。在我的所有输入中使用花括号而不是单引号是否有好处？目前使用后者。
@acoder 我认为问题出在| char: 上，因为您在正则表达式模式中使用它（作为交替运算符）并且纯字符串命令刚刚失效。在 PHP Laravel 中观察到类似的问题，解决方法是相同的：只需使用一组选项。 v-validate 指令接受一个字符串值，它是一个由管道分隔的验证列表 (|)。由于管道也在正则表达式模式中使用（作为交替运算符），因此字符串命令无效。我在答案中添加了更多细节。

【解决方案2】：

我在使用内置的 v-validate 规则处理复杂的正则表达式时遇到了问题。我有一个正则表达式，用于检查密码字段是否同时包含字母和数字。正则表达式是： /^(?=.[0-9])(?=.[a-zA-Z])([a-zA-Z0-9]+)$ /g

我花了很长时间尝试使用内置的 regex: 参数来完成这项工作，但没有成功，所以最后我编写了自己的扩展程序。所以在我的挂载中：

this.$validator.extend('complex_password', {
   validate(value, args) {
   return Util.isComplexPassword(value);
   }
})

然后在我的 utils 库中添加了一个函数：

 isComplexPassword(value) {
    
        tester = /^(?=.*[0-9])(?=.*[a-zA-Z])([a-zA-Z0-9]+)$/g
        isMatch = !tester.test(String(value))
    
        return !isMatch
    },

最后，将它连接到我的字段验证中：
v-validate="'required|min:8|complex_password'"

【讨论】：