Vue ElementUI Form form validation

Vue ElementUI Form form validation

Form validation is one of the most commonly used functions in the front-end development process. Based on my personal work experience, I will summarize and explain the basic usage of the form validation function.

The following is a demo of the form

el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
  <el-form-item
    prop="email"
    label="Mailbox"
    :rules="[
      { required: true, message: 'Please enter your email address', trigger: 'blur' },
      { type: 'email', message: 'Please enter a valid email address', trigger: ['blur', 'change'] }
    ]"
  >
    <el-input v-model="dynamicValidateForm.email"></el-input>
  </el-form-item>
  <el-form-item
    v-for="(domain, index) in dynamicValidateForm.domains"
    :label="'Domain name' + index"
    :key="domain.key"
    :prop="'domains.' + index + '.value'"
    :rules="{
      required: true, message: 'Domain name cannot be empty', trigger: 'blur'
    }"
  >
    <el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">Delete</el-button>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('dynamicValidateForm')">Submit</el-button>
    <el-button @click="addDomain">Add a new domain name</el-button>
    <el-button @click="resetForm('dynamicValidateForm')">Reset</el-button>
  </el-form-item>
</el-form>
<script>
  export default {
    data() {
      return {
        dynamicValidateForm: {
          domains: [{
            value: ''
          }],
          email: ''
        }
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      removeDomain(item) {
        var index = this.dynamicValidateForm.domains.indexOf(item)
        if (index !== -1) {
          this.dynamicValidateForm.domains.splice(index, 1)
        }
      },
      addDomain() {
        this.dynamicValidateForm.domains.push({
          value: '',
          key: Date.now()
        });
      }
    }
  }
</script> 

First, explain several key attributes in the el-form tag

  • ref: unique identifier of the current form
  • model: the object bound to the form
  • rules: Field validation rules

The rules field is used to define specific validation rules for each field. For usage, please refer to the demo example at the beginning. Required indicates whether the field is required, message is the validation prompt, and trigger is a single validation trigger. You can also customize validation rules through the validator field. The validateProductName method performs empty check and length check on the product name. It should be noted that all conditional branches must be processed with callbacks, otherwise the validation may cause exceptions.

1. Reset the form

Call the form reset method this.$refs.dynamicValidateForm.resetFields() to implement it.

Of course, date controls of the datetimerange type cannot be reset using this method, and the bound fields must be reset manually.

2. Clear the verification prompt

Call the method this.$refs.dynamicValidateForm.clearValidate() to implement it.

If you only need to clear the prompt of a single control, just pass the prop attribute value corresponding to the control as a parameter.

Another way is to add the ref attribute value to the el-form-item tag corresponding to the control, and then call the clearValidate method.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:
  • vue+ElementUI closes the dialog box, clears the verification, and clears the form operation
  • ElementUI implements the el-form form reset function button
  • Vue+elementui dialog box cancel form validation reset example
  • vue+elementui (reset problem of form in dialog box)

<<:  MySQL 8.0.19 installation and configuration method graphic tutorial

>>:  How to use Docker to build enterprise-level custom images

Recommend

HTML simple web form creation example introduction

<input> is used to collect user information ...

Detailed explanation of webpage screenshot function in Vue

Recently, there is a requirement for uploading pi...

How to configure path alias for react scaffolding

The react version when writing this article is 16...

Detailed examples of replace and replace into in MySQL into_Mysql

MySQL replace and replace into are both frequentl...

Setting up VMware vSphere in VMware Workstation (Graphic Tutorial)

VMware vSphere is the industry's leading and ...

mysql having usage analysis

Usage of having The having clause allows us to fi...

How to display the border when td is empty

Previously, I summarized how to use CSS to achieve...

Steps to create a CentOS container through Docker

Table of contents Preface Create a bridge network...

Json string + Cookie + localstorage in JS

Table of contents 1.Json string 1.1Json Syntax 1....

JavaScript function syntax explained

Table of contents 1. Ordinary functions 2. Arrow ...

How to install docker on Linux system and log in to docker container through ssh

Note: I use Centos to install docker Step 1: Inst...

Detailed explanation of basic operation commands for Linux network settings

Table of contents View network configuration View...

Why do we need Map when we already have Object in JavaScript?

Table of contents 1. Don’t treat objects as Maps ...

Introduction to the use of select optgroup tag in html

Occasionally, I need to group select contents. In ...