elementui步骤条实现部分验证，单个elform

最新推荐文章于 2025-09-08 16:58:05 发布

原创

最新推荐文章于 2025-09-08 16:58:05 发布 · 1.9k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #html #es6

本文介绍如何在Vue.js应用中利用Element UI的步骤条组件el-steps和表单组件el-form实现部分验证。每个步骤完成时，通过validateField方法单独验证当前步骤的字段，只有验证通过才能进入下一流程。详细阐述了实现这一功能的思路和具体代码实现。

需求：整个表单是一个单页面，页面上要加入el-steps步骤条，当前步骤填写完成后，点击下一步则进行当前步骤的验证，验证成功才能进入下一个步骤的填写，因为整个el-form是在el-steps外部，只能使用el的部分验证validateField
在这里插入图片描述

思路，在下一步按钮方法上，添加当前步骤需要验证的字段名参数arr，通过循环校验当前字段，判断是否进入下一步
arr内容如下：

  data() {
    return {
		arr:['field133','field134'],
	}
}

valid方法如下：

  methods: {
   
   
	    valid(arr){
   
   
	   	//定义flag
	      let ok=1
	      for(let i in arr){
   
   
		        this.$refs.elForm.validateField(arr[i],err=>{
   
   if(err) ok=0 }) //校验当前字段，如果没有通过验证，则ok=0
		        if(ok===0)break   //如果ok为0，则说明有字段没有通过验证，终止循环
		       }
		  if(ok===1){
   
   this.active131++} //循环结束，如果当前步骤的字段都通过验证，则进入下一步
	    }
    }

页面代码：

 <el-form ref="elForm" :model="formData" :rules="rules" size="medium" :disabled="formDisable"
    label-width="100px">
		<el-steps :active="active131" finish-status=finish>