Vuetify Form Validation using Regex Expression

Question

I am trying to get my vuetify form to validate my text box on the following criteria "AB-12345678" or if user forgos the hyphen and just puts in a number with a max of 8 digits. Can regex rules account for both of these scenarios in a single expression? My code so far:

        <v-form ref="sidebarSearchForm" lazy-validation v-on:submit.prevent>
        @Html.AntiForgeryToken()
        <v-text-field label="Search"
                      single-line
                      filled
                      rounded
                      dense
                      append-icon="mdi-magnify"
                      v-model="id"
                      :rules"[v => !!v || 'ID Required!']"
                      @@click:append="searchID"
                      v-bind="{error: !validationProp,...(!validationProp && { 'error-messages': ['ID not found!'] })}"></v-text-field>
    </v-form>

regex to match both AB-12345678 and 12345678, right?

huan feng
– huan feng

2022-09-20 02:50:12 +00:00
Commented Sep 20, 2022 at 2:50 — huan feng
– huan feng, Commented Sep 20, 2022 at 2:50

Arslan Butt · Accepted Answer · 2022-09-20 12:39:58Z

1

Here is the full example: using this regex

^([a-zA-Z]{2}-\d{0,8}$|^\d{0,8}$)

AA1221212 (Not valid)
AA-111 (Valid)
AA-12345678 (Valid))
ABC-12345678 (Not valid)
12345678 (Valid)
123456789 (Not valid)
123 (Valid)

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    valid: true,
    id: '',
    idRules: [
      v => !!v || 'Field is required',
      v => /^([a-zA-Z]{2}-\d{0,8}$|^\d{0,8}$)/.test(v) || 'Expression must be valid'
    ],
   
  }),

  methods: {
    validate () {
      this.$refs.form.validate()
    },
    reset () {
      this.$refs.form.reset()
    },
    resetValidation () {
      this.$refs.form.resetValidation()
    },
  },
})

   
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
<div id="app">
  <v-app>
    <v-main>
      <v-container>
      
<v-form
      ref="form"
      v-model="valid"
      lazy-validation
    >
      <v-text-field
        v-model="id"
        :counter="10"
        :rules="idRules"
        label="Search"
        required
      ></v-text-field>
  
     
      <v-btn
        :disabled="!valid"
        color="success"
        class="mr-4"
        @click="validate"
      >
        Validate
      </v-btn>
  
      <v-btn
        color="error"
        class="mr-4"
        @click="reset"
      >
        Reset Form
      </v-btn>
  
      <v-btn
        color="warning"
        @click="resetValidation"
      >
        Reset Validation
      </v-btn>
    </v-form>
      
      </v-container>
    </v-main>
  </v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>

edited Sep 20, 2022 at 12:39

answered Sep 20, 2022 at 8:46

Arslan Butt

7951 gold badge8 silver badges21 bronze badges

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

2 Comments

Qiuzman Over a year ago

I was trying to go for AA-12345678 (full format with two character ID with hyphen then max 8 digit number) or 12345678 or 123 or 123 (any number but max 8 digits). Your regex makes sense but it doesnt account for just numbers by themselves max 8 digits.

Arslan Butt Over a year ago

Check now I update the regex

Arslan Butt · Accepted Answer · 2022-09-19 15:24:43Z

0

You can add multiple rules using regex or simple like this:

(Update the regex as per your requirement)

 <v-text-field
      v-model="id"
      :rules="idRules"
      label="Search"
      required
    ></v-text-field>


data: () => ({
        idRules: [
        v => !!v || 'Field is required',
        v => /.+@.+\..+/.test(v) || 'Expression must be valid',
      ],
  }),

answered Sep 19, 2022 at 15:24

Arslan Butt

7951 gold badge8 silver badges21 bronze badges

2 Comments

Qiuzman Over a year ago

Can you add the regex expression for this use case above and I will accept this answer. I was struggling with that aspect actually .

Arslan Butt Over a year ago

Yes I added full code for you (For a better view you can see it on the full page )

huan feng · Accepted Answer · 2022-09-20 02:59:45Z

0

If you want to match both (2 letters)-(8 digits) and (8 digits)

Try this:

^([a-zA-Z]{2}-\d{8})$|^(\d{8})$

In vue rules:

v => /^([a-zA-Z]{2}-\d{8})$|^(\d{8})$/.test(v) || 'Expression must be valid',

https://regex101.com/r/37EqR9/1

answered Sep 20, 2022 at 2:59

huan feng

8,7043 gold badges40 silver badges66 bronze badges

1 Comment

Qiuzman Over a year ago

THe first part is correct but the second option should be any number less than 999999999 in any form just a digit though. So 1234 or 00001234. That website is pretty neat though.

Collectives™ on Stack Overflow

Vuetify Form Validation using Regex Expression

3 Answers 3

2 Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related