element表单提交跳转到未输入的input框element表单提交跳转到未输入的input框重点

106 阅读 0 评论 70 点赞

我是靠谱客的博主失眠雪糕，最近开发中收集的这篇文章主要介绍element表单提交跳转到未输入的input框element表单提交跳转到未输入的input框重点，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

element表单提交跳转到未输入的input框

这里我直接引用element表单提供的源码

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="活动名称" prop="name">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item>
  <el-form-item label="活动区域" prop="region">
    <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
      <el-option label="区域一" value="shanghai"></el-option>
      <el-option label="区域二" value="beijing"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="活动时间" required>
    <el-col :span="11">
      <el-form-item prop="date1">
        <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>
      </el-form-item>
    </el-col>
    <el-col class="line" :span="2">-</el-col>
    <el-col :span="11">
      <el-form-item prop="date2">
        <el-time-picker placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>
      </el-form-item>
    </el-col>
  </el-form-item>
  <el-form-item label="即时配送" prop="delivery">
    <el-switch v-model="ruleForm.delivery"></el-switch>
  </el-form-item>
  <el-form-item label="活动性质" prop="type">
    <el-checkbox-group v-model="ruleForm.type">
      <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
      <el-checkbox label="地推活动" name="type"></el-checkbox>
      <el-checkbox label="线下主题活动" name="type"></el-checkbox>
      <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
    </el-checkbox-group>
  </el-form-item>
  <el-form-item label="特殊资源" prop="resource">
    <el-radio-group v-model="ruleForm.resource">
      <el-radio label="线上品牌商赞助"></el-radio>
      <el-radio label="线下场地免费"></el-radio>
    </el-radio-group>
  </el-form-item>
  <el-form-item label="活动形式" prop="desc">
    <el-input type="textarea" v-model="ruleForm.desc"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
    <el-button @click="resetForm('ruleForm')">重置</el-button>
  </el-form-item>
</el-form>

其它的rules的方法都是element提供的我这儿就直接忽略了

重点

onSubmit (formName) {
      this.$refs[formName].validate((valid, object) => {
        if (valid) {
          //这里面是全部的条件校验成功之后进入的
          alert('submit!')
        } else {
          let split = []
          for (let i in object) {
          	//这里的object打印出来是一个对象   里面包含的就是未输入的input框绑定的变量
          	//我把他用for in  遍历出来存入到我定义的spilt里面
            split.push(i)
          }
          //  我的需求是跳转到未填的第一项  所以我把第一项的变量名取了出来  
          //  还需要在上面的需要跳转的input或者其他  给一个  ref=‘变量名’
          let dom = split[0]
          this.$refs[dom].$el.scrollIntoView({
            block: 'start', //值有start,center,end，nearest，当前显示在视图区域中间
            behavior: 'smooth' //值有auto、instant,smooth，缓动动画（当前是慢速的）
          })
          console.log('error submit!!')
          return false
        }
      })
    }