element plus表单验证自动滚动到第一个验证失败字段

xhjtcflm

已于 2023-07-20 16:47:03 修改

阅读量654

点赞数 1

文章标签： vue.js elementui javascript

于 2023-07-20 16:34:56 首次发布

本文链接：https://blog.csdn.net/xhjtcflm/article/details/131833767

版权

该代码示例展示了在Vue.js应用中如何创建一个表单，包含多个输入字段，执行数据验证。当用户点击提交按钮且验证失败时，页面会自动滚动到第一个验证未通过的字段。实现这一功能的关键在于使用`validate`方法和`scrollToField`函数。

摘要由CSDN通过智能技术生成

一、首先放两张效果图：

1.点击提交按钮之前的

2.输入后部分字段，点击提交按钮：

页面自动跳转到第一个验证失败字段处。

二、代码如下

1.表单结构部分

<template>
    <el-form
          :inline="true"
          ref="siteRuleFormRef"
          :rules="siteRules"
          :model="state.siteMessageList"
          label-width="100px"
          style="max-width: 1860px"
        >
      <el-scrollbar height="600px">
          <el-form-item label="场所性质" prop="facilityLocationNature">
            <el-input v-model="state.siteMessageList.facilityLocationNature" />
          </el-form-item>
          <el-form-item label="建筑面积" prop="facilityFloorSpace">
            <el-input v-model="state.siteMessageList.facilityFloorSpace" />
          </el-form-item>
          <el-form-item label="占地面积" prop="facilityCoverArea">
            <el-input v-model="state.siteMessageList.facilityCoverArea" />
          </el-form-item>
          <el-form-item label="床位总数" prop="facilityBedsNum">
            <el-input v-model="state.siteMessageList.facilityBedsNum" />
          </el-form-item>
          <el-form-item label="全托床位数量" prop="facilityFullBedsNum">
            <el-input v-model="state.siteMessageList.facilityFullBedsNum" />
          </el-form-item>
          <el-form-item label="日托床位数量" prop="facilityDayBedsNum">
            <el-input v-model="state.siteMessageList.facilityDayBedsNum" />
          </el-form-item>
          <el-form-item label="护理型床位数" prop="facilityNursingBedsNum">
            <el-input v-model="state.siteMessageList.facilityNursingBedsNum" />
          </el-form-item>
          <el-form-item label="是否与党群中心共建" prop="facilityIsPartyCenter">
            <el-input v-model="state.siteMessageList.facilityIsPartyCenter" />
          </el-form-item>
          <el-form-item label="专用面积" prop="facilityDedicatedArea">
            <el-input v-model="state.siteMessageList.facilityDedicatedArea" />
          </el-form-item>
          <el-form-item label="共用面积" prop="facilitySharedArea">
            <el-input v-model="state.siteMessageList.facilitySharedArea" />
          </el-form-item>
          <el-form-item label="是否享受养老服务税费减免" prop="facilityIsEnjoy">
            <el-input v-model="state.siteMessageList.facilityIsEnjoy" />
          </el-form-item>
          <el-form-item label="功能室名称" prop="facilityFunctionName">
            <el-input v-model="state.siteMessageList.facilityFunctionName" />
          </el-form-item>
          <el-form-item label="功能室数量" prop="facilityFunctionNum">
            <el-input v-model="state.siteMessageList.facilityFunctionNum" />
          </el-form-item>
      </el-scrollbar>
      <div><el-button style="margin: 30px 300px;width: 400px" @click="btnClick" type="primary">提交</el-button></div>
    </el-form>
 
  

</template>

2.变量定义以及表单验证规则配置

<script setup lang="ts">
import { reactive,ref } from 'vue'
const state = reactive({
  siteMessageList:{} as any
})
const validateNum = (rule:any, value:any, callback:any) => {
  let reg = /^\d+(\.{0,1}\d+){0,1}$/
  if (value == '' || value == undefined || value == null) {
    callback()
  } else {
    if (!reg.test(value) && value != '') {
      callback(new Error('请输入大于0的数字'))
    } else {
      callback()
    }
  }
}
const positiveInteger = (rule:any, value:any, callback:any) => {
  let zzInteger = /^(0|[1-9]\d*)$/
  if (value == '' || value == undefined || value == null) {
    callback()
  } else {
    if (!zzInteger.test(value) && value != '') {
      callback(new Error('请输入大于或等于0的整数'))
    } else {
      callback()
    }
  }
}
const siteRules = reactive({
  facilityFloorSpace: [
    { required: true, message: '请输入建筑面积', trigger: 'blur' },
    {
      validator: validateNum,
      trigger: 'blur'
    }
  ],
  facilityCoverArea: [
    { required: true, message: '请输入占地面积', trigger: 'blur' },
    {
      validator: validateNum,
      trigger: 'blur'
    }
  ],
  facilityDedicatedArea: [
    //专用面积
    { required: true, message: '请输入占地面积', trigger: 'blur' },
    {
      validator: validateNum,
      trigger: 'blur'
    }
  ],
  facilitySharedArea: [
    //共用面积
    { required: true, message: '请输入占地面积', trigger: 'blur' },
    {
      validator: validateNum,
      trigger: 'blur'
    }
  ],
  facilityBedsNum: [
    //床位总数
    { required: true, message: '请输入大于或等于0的整数', trigger: 'blur' },
    {
      validator: positiveInteger,
      trigger: 'blur'
    }
  ],
  facilityFullBedsNum: [
    //全托床位数量
    { required: true, message: '请输入大于或等于0的整数', trigger: 'blur' },
    {
      validator: positiveInteger,
      trigger: 'blur'
    }
  ],
  facilityDayBedsNum: [
    //日托床位数量
    { required: true, message: '请输入大于或等于0的整数', trigger: 'blur' },
    {
      validator: positiveInteger,
      trigger: 'blur'
    }
  ],
  facilityNursingBedsNum: [
    //护理型床位数
    { required: true, message: '请输入大于或等于0的整数', trigger: 'blur' },
    {
      validator: positiveInteger,
      trigger: 'blur'
    }
  ],
  facilityFunctionNum: [
    //功能室数量
    { required: true, message: '请输入大于或等于0的整数', trigger: 'blur' },
    {
      validator: positiveInteger,
      trigger: 'blur'
    }
  ], //1111
  facilityLocationNature: [{ required: true, message: '请选择场所性质', trigger: 'change' }],
  facilityIsPartyCenter: [
    { required: true, message: '请选择是否与党群中心共建', trigger: 'change' }
  ],
  facilityIsEnjoy: [
    { required: true, message: '请选择是否享受养老服务税费减免', trigger: 'change' }
  ],
  facilityFunctionName: [{ required: true, message: '请输入功能室名称', trigger: 'blur' }]
})
const siteRuleFormRef = ref()
const btnClick = async() =>{
await siteRuleFormRef.value.validate((v:any,error:any) => {
    if(v){
      console.log('校验通过了')
    }else{
      console.log(error,'error===>')
      Object.keys(error).forEach((key,i)=>{
        if(i==0){
          const firstFiled = error[key][0].field
          siteRuleFormRef.value.scrollToField(firstFiled)
        }
      })
    }
  })
}
</script>

3.从以上代码中单独抽出核心部分（自动跳转到第一个验证失败字段处）

实现方法：通过表单验证提供的 scrollToField 方法

//这里是点击提交按钮时触发的回调函数
const btnClick = async() =>{
    await siteRuleFormRef.value.validate((v:any,error:any) => {
        if(v){
          console.log('校验通过了')
        }else{
          Object.keys(error).forEach((key,i)=>{
            if(i==0){
              const firstFiled = error[key][0].field
              siteRuleFormRef.value.scrollToField(firstFiled)
            }
          })
        }
    })
}