SoFunction
Updated on 2025-04-05

vue2.0 + ele's loop form and verification field method

About vue2.0 + ele form loop and verification of corresponding fields! ! ! ! !

html code

<el-form ref="ruleForm" :inline="true" :model="form" label-width="140px" :rules="rules"
  ="fullScreenLoading" element-loading-text="Loading desperately...">
  <div v-for="(item, index) in " @click="handleindex(index)">
   <el-form-item label="account" prop="tel">
   <el-input v-model="" ></el-input>
   </el-form-item>
   <el-form-item label="Name" prop="nickname" v-show="">
   <el-input v-model=""></el-input>
   </el-form-item>
  </div>
  <el-form-item label="age" prop="age">
   <el-input v-model=""></el-input>
  </el-form-item>

  <el-form-item>
   <el-button type="primary" @click="submitForm('ruleForm')">submit</el-button>
   <el-button @click="onCancel">Cancel</el-button>
  </el-form-item>
 </el-form>   

script code

//Introduce interfaceimport {
  fetchdata, 
} from 'src/api/login'

export default {
 var checkTel = (rule, value, callback) => {
   //The key is to judge the loop. Only by doing this can you make a judgment on every item in the loop    for (let i = 0; i < ; i++) {
      value = [i].tel;
      var vdt = (value, { //You need to add it in another file       'required': {msg: 'Please fill in the account'}
      });
      if (!) {
       callback(new Error());
      } else {
       callback();
      }
    }
   };
 var checkNickname = (rule, value, callback) => {
  for (let i = 0; i < ; i++) {
  //First determine whether there is a name. If nickname is false, then don't verify it   if ([i].isNickname) {
    value = [i].nickname;
    var vdt = (value, { //You need to add it in another file     'required': {msg: 'Please fill in your name'}
    });
    if (!) {
     callback(new Error());
    } else {
     callback();
    }
   }
   else {
    callback();
   }
  }
 };
 //Because this is not in the loop, the value corresponding to the value is only one, so you can use it directly  var checkAge = (rule, value, callback) => {
    var vdt = (value, {'required': {msg: 'Please fill in the age'}});
    if (!) {
     callback(new Error());
    } else {
     callback();
    }
   };
  return {
   form: {
     xh:[{
      tel,
      nickname,
      isnickname:false, //A initial value is attached, which will not be displayed by default.     }],
     age:'',
     id:'1',
   },
   rules: {
    tel: [{required: true, validator:checkTel,trigger: 'blur',}], 
    nickname: [{required: true, validator:checkNickname,trigger: 'blur',}], 
    age: [{required: true, validator:checkAge,trigger: 'blur',}], 
   },
  },
  },
 created() {
  ();
 },
 methods: {
  getData() {
     = true;
    fetchdata().then(response => { //Request the corresponding interface here    if( == true) {
       = false;
       = ; //Return data to form
    }else{
       = false;
      return false;
    }
  }
 }
}

This article is just the experience summarized by the author during development, and I hope it can be helpful.

The above vue2.0 + ele loop form and verification field method are all the content I share with you. I hope you can give you a reference and I hope you can support me more.