How to use regEx in Vue3 CompositionAPI whth Vuelidate?

Question

How to check a form for a regex rule by using Vuelidate. It is clear from the guide that you need to use "helpers", however, when checking for the validity of a regular expression, Vuelidate always answers true. My code:

    <template>
    <div class="form-wrapper">
        <h1 class="form-title">Зарегистрируйтесь</h1>
        <form action="" class="form">
            <div class="form-item">
                <input type="text"
                class="form-item-input"
                placeholder="Введите отображаемый логин на сайте"
                v-model="userName"
                @click="console.log(v$.userName.regular.$response)"
                @blur="v$.userName.$touch"
                :class="{
                            alert: (!v$.userName.required.$response && v$.userName.$dirty)
                        }"
                >
            </div>
            <button class="form-item-submit" type="submit">Войти</button>
        </form>
    </div>
</template>

<script lang="ts">
    import { useVuelidate } from '@vuelidate/core';
    import { required, helpers } from '@vuelidate/validators';
    const regular = helpers.regex(/^.*(?=.*[a-zA-Z])(?=.*\d)(?=.*[!#$%&? "]).*$/)
    export default {
        setup() {
            return {
                v$: useVuelidate()
            }
        },
        data() {
            return {
                userName: '',
            }
        },
        validations() {
            return {
                userName: { required, regular }
            }
        }
    }
</script>

<style scoped>

</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.5.4/vue.global.min.js"></script>

Reynicke · Accepted Answer · 2025-03-27 08:00:23Z

0

Your code seems fine to me and matches the documentation. In order to offer a solution:

You don't have to use the vuelidate regex helper. You can also use your own validation functions like this:

function bic(value: string) {
  if (!value) return true;

  const pattern = new RegExp('^$|([a-zA-Z]{4}[a-zA-Z]{2}[a-zA-Z0-9]{2}([a-zA-Z0-9]{3})?)');
  return pattern.test(value);
}

answered Mar 27 at 8:00

Reynicke

1,5882 gold badges14 silver badges24 bronze badges

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

Collectives™ on Stack Overflow

How to use regEx in Vue3 CompositionAPI whth Vuelidate?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related