前言

我们在使用element-plus的Form表单验证的时候，虽然已经定义过了rules,然后我们通过规则验证去判断用户是否填了必填选项，然后我们进行一定的逻辑处理，相关的的逻辑处理都是提示。但是如果必填选项太多了，老是跳提示框真的很烦，让用户体验感非常差，所以就有了另一种解法——表单跳转

正言

          <el-form-item label="店铺名称" prop="name" id="name">
            <el-input v-model="formData.name"></el-input>
          </el-form-item>
          <el-form-item label="详细地址" prop="address" id="address">
            <el-autocomplete v-model="formData.address"></el-autocomplete>
            <span>当前城市:{{ city.name }}</span>
          </el-form-item>
          <el-form-item label="联系电话" prop="phone" id="phone">
            <el-input v-model.number="formData.phone" maxlength="11"></el-input>
          </el-form-item
          
          <el-form-item class="button_submit">
            <el-button type="primary" @click="submitForm('formData')"
              >立即创建</el-button
            >
          </el-form-item>

开始定义方法（先明确我这里的表单的ref="formData"）

submitForm(formName) {
      const form=this.$refs[formName];
      const valid = form.validate();
      valid.then().catch(err=>{
        let elementId=[];
        for(let value of Object.entries(err)){
          elementId.push(form.$el.querySelector(`#${value[0]}`));
        }
        elementId[0].scrollIntoView({behavior:'smooth',block:'start'});
      })
    }

const form=this.$refs[formName]  //简单抽离

下面拿到Promise状态，如果必填选项没有填写，就好reject状态

const valid = form.validate(); //简单抽离

捕捉到的err就是规则定义中的字段，我们只需要拿到其中的字段就可以通过querySelector拿到其中的Element，然后我们使用scrollIntoView进行跳转，就可以定位到了未填写的字段了

valid.then().catch(err=>{ 
    let elementId=[];  
    for(let value of Object.entries(err)){
        elementId.push(form.$el.querySelector(`#${value[0]}`)); 
    } 
    elementId[0].scrollIntoView({behavior:'smooth',block:'start'});
})

Vue表单验证的跳转

前言

正言