Validating MAC Addresses with Vue and Vuetify

I have been searching for a guide on how to validate MAC addresses with Vue and Vuetify and came up empty. So, I decided to put together something myself to fill that gap.

In this post, I’ll walk through how to set up a validation rule in Vue that makes sure your MAC addresses are not just any random string, but actually follow the correct format, such as:

• XX:XX:XX:XX:XX:XX e.g. 00:1A:2B:3C:4D:5E
• XX-XX-XX-XX-XX-XX e.g. 00-1A-2B-3C-4D-5E

The validation rule uses a regular expression (regex) to check if the input value is a valid MAC address.

rules: {
    macAddress: value => {
      const pattern = /^([0-9A-Fa-f]{2}[:-]){5}([0-9A-Fa-f]{2})$/
      return pattern.test(value) || 'Invalid MAC address.'
    },
},

This rule checks if the input value is a valid MAC address. The pattern used is /^([0-9A-Fa-f]{2}[:-]){5}([0-9A-Fa-f]{2})$/, which matches the following format: either XX:XX:XX:XX:XX:XX or XX-XX-XX-XX-XX-XX, where X is a hexadecimal digit. If the input does not match this format, the validation will fail, displaying the error message 'Invalid MAC address.'.

To enforce the format to use : as the separator, you can modify the pattern to the following. Notice the minor change from [:-] to ::

rules: {
    macAddress: value => {
      const pattern = /^([0-9A-Fa-f]{2}:){5}([0-9A-Fa-f]{2})$/
      return pattern.test(value) || 'Invalid MAC address. Please use the format XX:XX:XX:XX:XX:XX'
    },
},

This updated pattern ensures that the MAC address is in the format XX:XX:XX:XX:XX:XX.

I have created a Vuetify example that demonstrates this validation rule in action. The code snippet is hosted on Vuetify Playground. The example is interactive and can be tested by entering different MAC addresses in the input field.

You can find the code snippet below:

<template>
  <v-form>
    <v-container>
      <v-row>
        <!-- MAC Address Input -->
        <v-col cols="12" sm="6">
          <v-text-field
            v-model="macAddress"
            :rules="[rules.required, rules.macAddress_all]"
            label="MAC Address in `XX:XX:XX:XX:XX:XX` or `XX-XX-XX-XX-XX-XX`"
          ></v-text-field>
        </v-col>

        <!-- MAC Address Input ":" as separator only -->
        <v-col cols="12" sm="6">
          <v-text-field
            v-model="macAddress"
            :rules="[rules.required, rules.macAddress_colon_only]"
            label="MAC Address in `XX:XX:XX:XX:XX:XX` only"
          ></v-text-field>
        </v-col>
      </v-row>
    </v-container>
  </v-form>
</template>

<script>
  export default {
    data() {
      return {
        macAddress: '00-B0-D0-63-C2-26',
        rules: {
          required: value => !!value || 'Required.',
          macAddress_all: value => {
            const pattern = /^([0-9A-Fa-f]{2}[:-]){5}([0-9A-Fa-f]{2})$/
            return pattern.test(value) || 'Invalid MAC address.'
          },
          macAddress_colon_only: value => {
            const pattern = /^([0-9A-Fa-f]{2}:){5}([0-9A-Fa-f]{2})$/
            return pattern.test(value) || 'Invalid MAC address.'
          },
        },
      }
    },
  }
</script>