时间戳

首页 > 解决方案 > vee 验证正则表达式不起作用

regex - vee 验证正则表达式不起作用

问题描述

我需要使用 vee-validate 和这个基本的正则表达式来验证美国电话号码 XXX-XXX-XXXX : (?:\d{3}-)\d{3}-\d{4}。正则表达式本身可以正常工作，但不适用于 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>

小提琴

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

标签： regexvee-validate

解决方案

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

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

所以，你可以使用

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

请参阅更新的小提琴。

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

推荐阅读