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