iview 组件拆分后如何进行表单验证?

洛斯丁伐克
  • 41

组件拆分出去后如何进行表单验证

 父组件
 <component
        :maintainStatus="maintainStatus"
        :maintainTitle="maintainTitle"
        :maintainCodeIpt="maintainCodeIpt"  //如何进行表单验证
        :maintainNameIpt="maintainNameIpt"  //如何进行表单验证
        @confirmEvent="confirmEvent"
        @cancelEvent="cancelEvent"
    >

</component>
    
子组件:
<template>
<div>
    <Modal
            :value="maintainStatus"
            :title="maintainTitle"
            :maskClosable="false"
    >
        <Form :label-width="110" ref="formValidate" :model="formValidate" :rules="ruleValidate" :show-message="false">
            <Row>
                <Col span="24">
                    <FormItem label="编码:" prop="maintainCodeIpt" class="formItemMargin">
                        <Input type="text" v-model="formValidate.maintainCodeIpt" placeholder="请输入编码"/>
                    </FormItem>
                </Col>
            </Row>
            <Row>
                <Col span="24">
                    <FormItem label="名称:" prop="maintainNameIpt" class="formItemMargin">
                        <Input type="text" v-model="formValidate.maintainNameIpt" placeholder="请输入名称"/>
                    </FormItem>
                </Col>
            </Row>
        </Form>
        <Row slot="footer" type="flex" justify="end">
            <Col>
                <Button type="success" @click="confirmEvent">确认</Button>
                <Button class="cancelButton" @click="cancelEvent">取消</Button>
            </Col>
        </Row>
    </Modal>
</div>

</template>
<script>

export default {
    props:{
        formValidate:{
            maintainCodeIpt:{
                type:String
            },
            maintainNameIpt:{
                type:String

            }
        },
        ruleValidate:{
            maintainCodeIpt:[
                { requires:true,message:'不能为空!',trigger:'blur'}
            ],
            maintainNameIpt:[
                { requires:true,message:'不能为空!',trigger:'blur'}
            ]
        },
        maintainStatus:{
            default:false,
            type:Boolean
        },
        maintainTitle:{
            type:String,
        }
    },
    data(){
        return {

        }
    },
    methods:{
        confirmEvent(){
            this.$emit('confirmEvent')
        },
        cancelEvent(){
            this.$emit('cancelEvent')
        },
    }
}

</script>

回复
阅读 1k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏