Basic Steps – In three steps 1. Define validation rules. In data(), define rule 2 by format. Apply rules (three configurations) by setting rules to the Form property to pass in validation rules, model to the Form property to pass in Form data, prop to the form-item property (the prop property needs to specify the data name in the Form object), The value is set to the name of the field to be verified 3. Manual pocket verification

Step 1- Define form validation rules In Data, add definition rules.

data(){
  return {
    rules: {
       // Field name 1: indicates the attribute to be validated
       // Value: indicates the list of validation rules. It's an array, and each item in the array represents a rule.
       // Multiple rules in the array are executed in orderThe field name1: [{validate rule1}, //{required:true, message: 'Please enter verification code ',trigger:'blur'}{validation rule2}, / / {pattern: / ^ \ d {6} $/, message: please enter a valid verification code, the trigger: 'blur'}The field name]2: [{validate rule1}, {validate rules2},]}}}Copy the code
// Attribute names in rules must be the same as those in form data items.Copy the code

Step 2- Configuration in the template

<el-form label-width="80px" :model="form" :rules="rules">
  <el-form-item label="Mobile phone Number" prop="mobile">
    <el-input v-model="form.mobile"></el-input>
  </el-form-item>
  <el-form-item label="Password" prop="code">
    <el-input v-model="form.code"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="onSubmit">Immediately create</el-button>
    <el-button @click="onCancel">cancel</el-button>
  </el-form-item>
  </el-form>
Copy the code

Step 3- Manual pocket verification

Element - UI form component.validate (valid= >{
      if(valid) {
          // It passes the validation
        } else {
          // Verification failed}})Copy the code

The validate method comes with the form component and is used to validate the form content. You need to add a reference to the form component in the template and the ref is basically used to get the form component to manually trigger validation and do manual pocket validation when you make a submission

login () {
    alert('I'm ready to log in.')
    },
  submit () {
    this.$refs.form.validate(valid= > {
    // Valid is the result of form validation. If true, it passed
    if (valid) {
      // Now that you've passed the validation, you can proceed
      this.login()
      }
    })
  }

Copy the code