using multiple validation with regex in VeeValidate and VueJs

Question

I am applying multiple validation using VeeValidate in a latest VueJs application but that is not working. This regex is to allow only alphabet,number,space and a few special characters. However, VeeValidate always 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>

any suggestion?

M.Sharma · Accepted Answer · 2020-02-04 09:51:13Z

2

I found the problem.

[1] Regex was wrong and initially missing ^ symbol [2] \s in regex was allowing space so I added space at last in my regex

So the final regex is regex:/^([a-zA-Z0-9_@;: ])*$/,

Now, It only accept Alphabet,Number,Space and following characters @;;_

answered Feb 4, 2020 at 9:51

M.Sharma

2896 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Troy Kessler · Accepted Answer · 2020-02-04 09:11:55Z

1

You need to apply regex delimeters instead of a string. So in your case you can just remove the "'" from your regex like this

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

answered Feb 4, 2020 at 9:11

Troy Kessler

3871 silver badge8 bronze badges

2 Comments

M.Sharma Over a year ago

I made changes as per your suggestion but it now does not working correctly. If i enter myadd GG :~![@#$%^&;}{ , it accepts but actually this should be rejcted

M.Sharma Over a year ago

I found the problem and will post my answer.

Collectives™ on Stack Overflow

using multiple validation with regex in VeeValidate and VueJs

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related