regexvuejs3vee-validate

Error: No such validator 'regex' exists. while using regex in @vee-validate/rules


I`m using

"@vee-validate/rules": "^4.9.6",
"vee-validate": "^4.9.6",
"vue": "^3.2.37"

for validating fields in my app.

I need to write a regular expression to regulate the car number in my country. I tried to do it according to the documentation (https://vee-validate.logaretm.com/v4/guide/global-validators#regex)

<Field
    :name="`${props.Id}.Driver.CarNumber`"
    :rules="{ required: true, regex: /^[а-щьюяєіїґА-ЩЬЮЯЄІЇҐ]{2,3}\d{6}$/ }"
    v-slot="{ errors }"
    v-model.trim="participant.Driver.CarNumber"
>
    <input type="text"
        :id="`${props.Id}.Driver.CarNumber`"
        :class="{ 'is-invalid': errors[0] }"
        v-maska:[propsCarNumberMaskComputed]
        v-model.trim="participant.Driver!.CarNumber"
        placeholder="AAA804723"
    >
    <label :class="{'label-on-border': true, 'control-label': requiredMark }">Driver CarNumber</label>
    <ErrorMessage :name="`${props.Id}.Driver.CarNumber`" /> 
</Field>

but I got the following error:

Uncaught (in promise) Error: No such validator 'regex' exists.
    at _test (vee-validate.js?v=a46838b9:751:11)
    at _validate (vee-validate.js?v=a46838b9:683:26)
    at validate (vee-validate.js?v=a46838b9:636:24)
    at validateCurrentValue (vee-validate.js?v=a46838b9:1402:14)
    at meta.valid (vee-validate.js?v=a46838b9:1425:12)
    at runLatest (vee-validate.js?v=a46838b9:421:21)
    at vee-validate.js?v=a46838b9:1445:7
    at chunk-ZV5R4Z6I.js?v=32b264a4:4011:154
    at callWithErrorHandling (chunk-ZV5R4Z6I.js?v=32b264a4:1553:18)
    at callWithAsyncErrorHandling (chunk-ZV5R4Z6I.js?v=32b264a4:1561:17)
    at hook.__weh.hook.__weh (chunk-ZV5R4Z6I.js?v=32b264a4:3993:19)
    at flushPostFlushCbs (chunk-ZV5R4Z6I.js?v=32b264a4:1719:41)
    at render2 (chunk-ZV5R4Z6I.js?v=32b264a4:7574:5)
    at mount (chunk-ZV5R4Z6I.js?v=32b264a4:5114:13)
    at app.mount (chunk-ZV5R4Z6I.js?v=32b264a4:10315:19)
    at main.js:28:5

What can be the problem?


Solution

  • The issue has been mentioned on their official github issue thread. In order to solve this you have to first import the scripts and define global validation rules

    For Vue3

    import { defineRule } from 'vee-validate';
    import { required, regex } from '@vee-validate/rules';
    
    defineRule('required', required);
    defineRule('regex', regex);
    

    For Vue2

    import { extend } from 'vee-validate';
    import { required, regex } from 'vee-validate/dist/rules';
    
    extend('required', required);
    extend('regex', regex);