Vee-validate的regex规则匹配UUID时始终报错，该如何排查解决

核心原因 #

Vee-validate 解析字符串格式的rules属性时，不会自动识别包裹正则的/定界符，会把/当成正则匹配内容的一部分，同时规则参数会按特殊字符做分隔处理，你写的带/的正则会被错误解析，导致合法UUID始终匹配失败。

解决方案 #

推荐使用绑定对象形式的规则，直接传入正则对象，完全避免解析问题，修改后的代码如下：

<form @submit.prevent="performSearch">
    <div class="msg-box">
        <validation-provider v-slot="{ errors }" :rules="{ regex: /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i }">
            <input v-model="appliance...." name="id" class="search-param" placeholder="Full ..." />
            <span class="has-text-danger has-text-weight-bold is-size-8 msg">{{ errors[0] ? 'Pleas...' : '' }}</span>
        </validation-provider>
    </div>
    <button type="submit" class="button is-info">
        Filter
    </button>
    <button @click.prevent="clearSearch()" class="button is-light">Reset</button>
</form>

改动点只有两处：

• 给rules属性加上v-bind绑定前缀（即:）
• 把规则值改成对象格式，直接传入正则对象，无需额外处理定界符和修饰符

如果一定要用字符串格式的规则，需要去掉正则的/定界符，同时把大小写修饰符i转换成兼容大小写的字符范围，写法如下：

<validation-provider v-slot="{ errors }" rules="regex:^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}$">

内容的提问来源于stack exchange，提问作者eeelya