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

How to install Elasticsearch7.6 cluster in docker and set password

Table of contents Some basic configuration About ...

Import csv file into mysql using navicat

This article shares the specific code for importi...

javascript realizes 10-second countdown for payment

This article shares the specific code of javascri...

How to query whether the mysql table is locked

Specific method: (Recommended tutorial: MySQL dat...

HTML table tag tutorial (7): background color attribute BGCOLOR

The background color of the table can be set thro...

Explanation of building graph database neo4j in Linux environment

Neo4j (one of the Nosql) is a high-performance gr...

The big role of HTML meta

There are two meta attributes: name and http-equiv...

Detailed explanation of MySQL alter ignore syntax

When I was at work today, the business side asked...

jQuery achieves the effect of advertisement scrolling up and down

This article shares the specific code of jQuery t...

JavaScript static scope and dynamic scope explained with examples

Table of contents Preface Static scope vs. dynami...

Building a KVM virtualization platform on CentOS7 (three ways)

KVM stands for Kernel-based Virtual Machine, whic...

40 web page designs with super large fonts

Today's web designs tend to display very larg...