Writing Custom Validation Rules in Vue.js

Introduction

Custom validation rules are essential when the built-in validation rules do not meet the specific requirements of your application. Vue.js, along with libraries like vee-validate and Vuelidate, allows you to write custom validation rules to ensure that your forms are validated according to your unique needs. This article explores how to write custom validation rules in Vue.js, providing detailed explanations and examples.

Writing Custom Validation Rules with vee-validate

vee-validate makes it easy to write custom validation rules. Custom rules can be defined using the defineRule function and can then be used in your components just like built-in rules.

Example: Defining a Custom Validation Rule

// main.js file with custom validation rule definition
import { createApp } from 'vue';
import App from './App.vue';
import { defineRule, Form, Field, ErrorMessage, configure } from 'vee-validate';

defineRule('strongPassword', (value) => {
  const regex = new RegExp('^(?=.*[a-z])(?=.*[A-Z])(?=.*\\d)[A-Za-z\\d]{8,}$');
  return regex.test(value) || 'Password must contain at least 8 characters, including uppercase, lowercase, and numbers.';
});

createApp(App)
  .component('Form', Form)
  .component('Field', Field)
  .component('ErrorMessage', ErrorMessage)
  .mount('#app');

Example: Using a Custom Validation Rule in a Form

<!-- Template section of a Vue component -->
<template>
  <Form>
    <div>
      <label>Password</label>
      <Field name="password" type="password" rules="required|strongPassword" placeholder="Enter your password">
      <ErrorMessage name="password"></ErrorMessage>
    </div>
    <button type="submit">Submit</button>
  </Form>
</template>

Explanation

In the example above, a custom validation rule called strongPassword is defined using the defineRule function. This rule checks if the password contains at least 8 characters, including uppercase, lowercase, and numbers. The rule is then used in a form by specifying it in the rules attribute of the Field component.

Writing Custom Validation Rules with Vuelidate

Vuelidate allows you to write custom validation rules by creating custom validators. Custom validators are functions that take a value and return a boolean indicating whether the value is valid or not.

Example: Defining a Custom Validation Rule

// validators.js file with custom validation rule definition
import { helpers } from '@vuelidate/validators';

export const strongPassword = helpers.withMessage('Password must contain at least 8 characters, including uppercase, lowercase, and numbers.', value => {
  const regex = new RegExp('^(?=.*[a-z])(?=.*[A-Z])(?=.*\\d)[A-Za-z\\d]{8,}$');
  return regex.test(value);
});

Example: Using a Custom Validation Rule in a Form

<!-- Template section of a Vue component -->
<template>
  <div>
    <form @submit.prevent="submitForm">
      <div>
        <label>Password</label>
        <input v-model="form.password" type="password" placeholder="Enter your password">
        <span v-if="!$v.form.password.strongPassword" class="error">Password must contain at least 8 characters, including uppercase, lowercase, and numbers</span>
      </div>
      <button type="submit">Submit</button>
    </form>
  </div>
</template>

<script>
import { required, minLength } from '@vuelidate/validators';
import { useVuelidate } from '@vuelidate/core';
import { strongPassword } from './validators';

export default {
  setup() {
    return { v: useVuelidate() };
  },
  data() {
    return {
      form: {
        password: ''
      }
    };
  },
  validations {
    form: {
      password: { required, strongPassword }
    }
  },
  methods: {
    submitForm() {
      if (this.$v.$invalid) {
        alert('Please fill the form correctly.');
      } else {
        alert('Form submitted!');
      }
    }
  }
}
</script>

Explanation

In the example above, a custom validation rule called strongPassword is defined using Vuelidate. This rule checks if the password contains at least 8 characters, including uppercase, lowercase, and numbers. The rule is then used in a form by specifying it in the validations object.

Combining Custom Validation Rules

In many scenarios, you might need to combine multiple custom validation rules to validate a single input field. Both vee-validate and Vuelidate allow you to easily combine custom rules with built-in rules.

Example: Combining Rules with vee-validate

<!-- Template section of a Vue component -->
<template>
  <Form>
    <div>
      <label>Username</label>
      <Field name="username" rules="required|alpha_num|min:5" placeholder="Enter your username">
      <ErrorMessage name="username"></ErrorMessage>
    </div>
    <button type="submit">Submit</button>
  </Form>
</template>

Example: Combining Rules with Vuelidate

<!-- Template section of a Vue component -->
<template>
  <div>
    <form @submit.prevent="submitForm">
      <div>
        <label>Username</label>
        <input v-model="form.username" placeholder="Enter your username">
        <span v-if="!$v.form.username.required" class="error">Username is required</span>
        <span v-if="!$v.form.username.alpha_num" class="error">Username must be alphanumeric</span>
        <span v-if="!$v.form.username.minLength" class="error">Username must be at least 5 characters</span>
      </div>
      <button type="submit">Submit</button>
    </form>
  </div>
</template>

<script>
import { required, alpha_num, minLength } from '@vuelidate/validators';

export default {
  setup() {
    return { v: useVuelidate() };
  },
  data() {
    return {
      form: {
        username: ''
      }
    };
  },
  validations {
    form: {
      username: { required, alpha_num, minLength: minLength(5) }
    }
  },
  methods: {
    submitForm() {
      if (this.$v.$invalid) {
        alert('Please fill the form correctly.');
      } else {
        alert('Form submitted!');
      }
    }
  }
}
</script>

Explanation

In the examples above, multiple validation rules are combined to validate a username field. vee-validate combines the built-in required, alpha_num, and min rules. Vuelidate combines the required, alpha_num, and minLength rules.

Async Custom Validation Rules

Sometimes, validation logic involves asynchronous operations, such as checking the availability of a username from a server. Both vee-validate and Vuelidate support asynchronous custom validation rules.

Example: Async Validation with vee-validate

// main.js file with async validation rule definition
import { createApp } from 'vue';
import App from './App.vue';
import { defineRule, Form, Field, ErrorMessage, configure } from 'vee-validate';

defineRule('usernameAvailable', async (value) => {
  const available = await checkUsernameAvailability(value);
  return available || 'Username is already taken.';
});

createApp(App)
  .component('Form', Form)
  .component('Field', Field)
  .component('ErrorMessage', ErrorMessage)
  .mount('#app');

// Simulated async function to check username availability
async function checkUsernameAvailability(username) {
  const takenUsernames = ['john_doe', 'jane_doe'];
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(!takenUsernames.includes(username));
    }, 1000);
  });
}

Example: Using Async Validation in a Form

<!-- Template section of a Vue component -->
<template>
  <Form>
    <div>
      <label>Username</label>
      <Field name="username" rules="required|usernameAvailable" placeholder="Enter your username">
      <ErrorMessage name="username"></ErrorMessage>
    </div>
    <button type="submit">Submit</button>
  </Form>
</template>

Explanation

In the example above, an asynchronous validation rule called usernameAvailable is defined using vee-validate. This rule checks if the username is available by simulating an asynchronous API call. The rule is then used in a form by specifying it in the rules attribute of the Field component.

Fun Facts and Little-Known Insights

• Fun Fact: Custom validation rules can be used to enforce complex business logic that goes beyond simple input validation.
• Insight: By leveraging the power of custom validation rules, you can create forms that are tailored to the specific needs of your application and ensure data integrity.
• Secret: Combining custom validation rules with Vue.js transitions can enhance the user experience by providing visual feedback during validation.

Conclusion

Writing custom validation rules in Vue.js allows you to create flexible and robust validation systems that meet the unique requirements of your application. Whether you use vee-validate or Vuelidate, custom validation rules provide the control and precision needed to ensure data integrity. The active and supportive Vue.js community, combined with the framework's comprehensive documentation, ensures that you have all the resources you need to succeed in modern web development.