Elemetn form control --- automatically locate the position of the field when it is submitted without passing the verification field

Preface

Recently in use element A problem was found in the form component in the framework , When there are many form field items , When the user clicks submit , If the required fields at the top of the form are not filled in , The verification prompt information will only be displayed below this field item , But for users who have scrolled to the bottom Click to submit , The page is quite unresponsive , The user experience is very bad , So when we click Submit , The form does not need to be positioned to the verification position automatically .

Before optimization ：

After optimization ：

Realize the idea ：

1. First, we need to add a parameter to the submission event object ;
2. When the verification fails, collect the prompt information of all failed field items , It through push Method is added to the defined array （str）;
3. adopt this.$refs[Object.keys(object)[0]] Get the prompt that the first field fails the verification ;
4. utilize Object.prototype.toString.call() Methods to judge this.$refs[Object.keys(object)[0]] Whether the type of is in the string form of the object ;
5. Finally through scrollIntoView Method to scroll to the first field item that does not pass the verification .

The code is also very simple , as follows ：

methods: {
    
  //  Event method 
  submitForm(formName) {
    
    this.$refs[formName].validate((valid, object) => {
    
      if (valid) {
    
        // Verification is done by executing logic 
      } else {
    
        let str = [];
        for (let key in object) {
    
          object[key].map((item) => {
    
            str.push(item.message);
          });
          let dom = this.$refs[Object.keys(object)[0]];
          if (Object.prototype.toString.call(dom) !== "[object Object]") {
    
            dom = dom[0];
            break;// End the statement and jump out of the statement , Proceed to the next statement execution 
          }
          //  Location code 
          dom.$el.scrollIntoView({
    
            block: "center",
            behavior: "smooth",
          });
        }
        //  The page prompt fails to check the field item , And separated by commas 
        this.$message.error(str.join(","));
      }
    });
  },
},

Be careful ： Required fields el-form-item Need to add ref , It is mainly used to locate （ref Recommended values and prop The same name ）.