Iview的Tab栏校验不通过不跳转

前端小白۞

已于 2022-07-29 17:29:18 修改

阅读量503

点赞数

CC 4.0 BY-SA版权

分类专栏：大前端 IView 文章标签： view design javascript 前端

于 2022-07-29 17:25:48 首次发布

本文链接：https://blog.youkuaiyun.com/zzzz121380/article/details/126060458

大前端同时被 2 个专栏收录

56 篇文章

订阅专栏

IView

4 篇文章

订阅专栏

本文介绍了如何在Iview的Tab组件中集成Form表单进行校验，确保提交前必填字段不为空。展示了代码实现，包括<FormItem>的验证规则和异步处理，以及如何根据校验结果控制Tab之间的跳转。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Iview的Tab栏有校验，校验不通过不跳转

效果图

在这里插入图片描述

代码实现

<template>
    <Tabs v-model="name" @on-click="handle">
       
        <TabPane label="label1" name="basic">
          <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
            
      
            <FormItem label="Name" prop="name1">
            <Input v-model="formValidate.name1" placeholder="Enter your name1"></Input>
        </FormItem>
                <Button type="primary" @click="handleSubmit('formValidate')">Submit</Button>
                <Button @click="handleReset('formValidate')" style="margin-left: 8px">Reset</Button>

        </Form>
        </TabPane>
        <TabPane label="label2" name="search">
         这里是Tab2内容
        </TabPane>
    </Tabs>
</template>
<script>
    export default {
         data(){
         return{
           flag:true,
           name:'basic',
           temp:'basic',
             formValidate: {
                    name1: '',
                },
                ruleValidate: {
                    name1: [
                        { required: true, message: 'The name cannot be empty', trigger: 'blur' }],
                }
         }
       },
         methods:{
	       async handle(a){
	         await this.handleSubmit() //这里必须使用await
	         if(this.flag==true){
	               this.temp=a
	               this.name=this.temp
	         }else{
	              this.name=this.temp
	         }
	       },
	        handleSubmit () {
	          if(this.temp=='basic'){
	             this.$refs['formValidate'].validate((valid) => {
	                if (valid) {
	                  this.flag=true
	                  return 
	                } else {
	                  this.flag=false
	                  return 
	                 }
	              })
	          }
	        },
	        handleReset (name) {
	          this.$refs[name].resetFields();
	        }
     },
    }
  
</script>