Error when validating password with regex value?

Question

Password validation is not working when validating with 1 upper case and 1 lower case 1 number 1special character.

methods: {
    validateBeforeSubmit() {
      this.$validator.localize('en', dict)
      this.$validator.validateAll()
      .then(function(response){
        
      })
      .catch(function(e){
        
      })
    }
  }

<form class="center-container" @submit.prevent="validateBeforeSubmit()">
<input
:type="passwordFieldType"
v-model="user.password"
v-model.trim="$v.user.password.$model"
id="password"
 name="password"
class="input-section-three-login"
:class="{'is-invalid': validationStatus($v.user.password) }"                  
placeholder="Enter new password"
v-on:keypress="isPassword($event)" ref="password"
v-validate="{ required: true, min: 10, regex: /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).*$/ }"/>


 <input
:type="passwordFieldTypetwo"
v-model="user.confirmPassword"
id="confirmPassword"
name="confirmPassword"
class="input-section-three-login"
:class="{
 'is-invalid': submitted && $v.user.confirmPassword.$error,
}"
 placeholder="Confirm password"
:maxlength="maxconfirmpassword"
v-on:keypress="isconfirmPassword($event)"
:disabled="user.password.length < 8"
v-validate="'confirmPassword'" data-vv-as="password"/>
                
                
 <button  class="register-button-screen2"v-on:click="registerMe"
:disabled="user.confirmPassword != user.password   "
:class="(isDisabled) ? '' : 'selected'">Register</button>
                    
                    
                    
<div class="alert alert-danger" v-show="errors.any()">
<div v-if="errors.has('password')">
{{ errors.first('password') }}
</div>
<div v-if="errors.has('password_confirmation')">
{{ errors.first('password_confirmation') }}
</div>
</div>
</form>

Password validation is not working when validating with 1 upper case and 1 lower case 1 number 1special character.

Answer 1

You can't really use regex for this kind of validation because the characters could be in any order.

Instead, you should create a custom validation rule to perform each check on the input string:

import { Validator } from 'vee-validate'

Validator.extend('password', {
  getMessage: (field) =>
    'The ' + field + ' value must contain 1 uppercase, 1 lowercase, 1 number, and 1 special character.',
  validate: value => {
    return (
      /[A-Z]/.test(value) &&
      /[a-z]/.test(value) &&
      /\d/.test(value) &&
      /[!@#$%^&*()_\-+=`~<>?\\/;,.'"\][{}]/.test(value)
    )
  }
})

Usage:

<input v-validate="{ password: true }">

demo