SoFunction
Updated on 2025-04-04

Detailed explanation of the Vue3 form component el-form verification rule rules attribute example

Preface

Using the form component using the Element UI (now called Element Plus)el-formhour,rulesAttributes are used to define verification rules for form items. These rules can help you ensure that the data entered by users meets the expected format and requirements.

Basic usage

rulesis an object where each key corresponds to the field name of a form item, and the value is one or more verification rules. Common verification rules include required, data type, minimum length, maximum length, custom verification, etc.

Sample code

Here is an example containing multiple verification rules:

<template>
  <el-form :model="formData" :rules="rules" ref="form">
    <el-form-item label="username" prop="username">
      <el-input v-model=""></el-input>
    </el-form-item>
    <el-form-item label="Mail" prop="email">
      <el-input v-model=""></el-input>
    </el-form-item>
    <el-form-item label="password" prop="password">
      <el-input type="password" v-model=""></el-input>
    </el-form-item>
    <el-button type="primary" @click="submitForm">submit</el-button>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        username: '',
        email: '',
        password: ''
      },
      rules: {
        username: [
          { required: true, message: 'Username cannot be empty', trigger: 'blur' },
          { min: 3, max: 15, message: 'The username should be between 3 and 15 characters', trigger: 'blur' }
        ],
        email: [
          { required: true, message: 'The email cannot be empty', trigger: 'blur' },
          { type: 'email', message: 'Please enter a valid email address', trigger: 'blur' }
        ],
        password: [
          { required: true, message: 'Password cannot be empty', trigger: 'blur' },
          { min: 6, max: 20, message: 'The password should be between 6 and 20 characters', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    submitForm() {
      this.$((valid) => {
        if (valid) {
          ('Form submission successful');
        } else {
          ('Form verification failed');
          return false;
        }
      });
    }
  }
};
</script>

Detailed explanation of verification rules

  • required: Indicates whether this field is required.
  • message: Error message displayed when the verification fails.
  • trigger: The timing of triggering verification, common values ​​include'blur'and'change'。
  • type: Specify the verification data type, such as'string'、'number'、'email'、'url'wait.
  • min and max: Specify the length or range of string values, only intypefor'string'or'number'Valid when  .
  • Custom check function: Can be passedvalidatorProperties define a custom check function.

Custom verification function example

Sometimes the built-in verification rules cannot meet the needs, so you can use a custom verification function:

rules: {
  password: [
    { required: true, message: 'Password cannot be empty', trigger: 'blur' },
    { min: 6, max: 20, message: 'The password should be between 6 and 20 characters', trigger: 'blur' },
    { validator: validatePasswordStrength, trigger: 'blur' }
  ]
}

function validatePasswordStrength(rule, value, callback) {
  if (!/\d/.test(value)) {
    callback(new Error('The password must contain at least one number'));
  } else if (!/[a-zA-Z]/.test(value)) {
    callback(new Error('The password must contain at least one letter'));
  } else {
    callback();
  }
}

In this example,validatePasswordStrengthThe function is used as a custom check function to ensure that the password contains at least one number and one letter.

Attachment: More custom verification

For example: to confirm the password again, define a const constant in data and introduce it in rules

1. Add rules to form form and add prop=''

<el-form ref="form" :model="form" :rules="rules" size="small" label-width="88px">
	<el-form-item label="Confirm Password" prop="confirmPass">
        <el-input v-model="" type="password" auto-complete="on" style="width: 370px;" />
    </el-form-item>
...
</el-form>

2. Define a const constant in data

data(){
	// Define rules (rule, value, callback)	const confirmPass = (rule, value, callback) => {
      if (value) {
        if ( !== value) {
          callback(new Error('The passwords entered twice are inconsistent'))
        } else {
          callback()
        }
      } else {
        callback(new Error('Please enter your password again'))
      }
    }
 ...
}

3. Introduce custom rules confirmPass in rules

rules:{
	oldPass: [
       { required: true, message: 'Please enter the old password', trigger: 'blur' }
     ],
     newPass: [
       { required: true, message: 'Please enter a new password', trigger: 'blur' },
       { min: 6, max: 20, message: 'Length from 6 to 20 characters', trigger: 'blur' }
     ],
	confirmPass: [
       { required: true, validator: confirmPass, trigger: 'blur' }
   ]
...
}

Summarize

Through reasonable configurationel-formInrulesAttributes can implement complex form verification logic, improving the ease of form and data reliability. Selecting the appropriate verification rules and triggering times based on specific needs is the key to achieving high-quality forms.

This is the article about the rules attributes of the Vue3 form component el-form verification rules. For more information about the Vue3 el-form verification rules attributes, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!