• iView框架Form表单验证失效(验证状态无法及时更新)


    背景:近期在使用vue+iView框架开发前台的时候,遇到了Form表单验证失效的问题,特地记录下来,以供参考(为了更直观地看到变化,代码做了精简):

    问题描述:使用iView框架原生的Form表单非空校验时,空值可以触发表单非空提示,但是输入正常值后,非空提示未能消失(如图):



    但是随便修改一些代码,触发热更新后,输入框的校验功能又能正常使用了(如图):



    分析:起初我认为是热更新的问题,随后针对iView官方文档琢磨了许久,才发现是表单model取值的问题,虽然Form表单和内置Input输入框的model关系已经按照要求进行了递进,但是model所取的comp是通过上级组件props传下来的,也就是不在自身定义的data中(如下):
    <Form :model="comp.data[0]" :rules="ruleValidate" ref="nameForm">
        <FormItem prop="name" label="Name" :label-width="150">
            <Input v-model="comp.data[0].name" placeholder="请输入姓名" />
        </FormItem>
    </Form>
    <script>
        export default {
    	props: ["comp"],
    	data() {
    	    return {	
    		ruleValidate: {
    		    name: [{
    		        required: true,
    		        message: "请输入姓名",
    		        trigger: 'blur'
    		    }]
    	        }
                };
            }
        }
    </script>
    

    如果Form的model使用data中定义的字段,则可以正常使用Form表单的验证功能(如下):
    <template>
        <Form :model="formValidate" :rules="ruleValidate" ref="nameForm">
            <FormItem prop="name" label="Name" :label-width="150">
                <Input v-model="formValidate.name" placeholder="请输入姓名" />
            </FormItem>
        </Form>
    </template>
    <script>
        export default {
    	props: ["comp"],
    	data() {
    	    return {	
    		ruleValidate: {
    		    name: [{
    		        required: true,
    		        message: "请输入姓名",
    		        trigger: 'blur'
    		    }]
    	        }
                };
            }
        }
    </script>
    

    总结:使用iView框架的原生表单校验功能,Form的model取值需要是本页面data中自定义的,不能取自上级组件的props

    文末附上全部代码:

    错误代码示例:
    <template>
        <Form :model="comp.data[0]" :rules="ruleValidate" ref="nameForm">
            <FormItem prop="name" label="Name" :label-width="150">
                <Input v-model="comp.data[0].name" placeholder="请输入姓名" />
            </FormItem>
        </Form>
    </template>
    <script>
        export default {
    	props: ["comp"],
    	data() {
    	    return {	
    		ruleValidate: {
    		    name: [{
    		        required: true,
    		        message: "请输入姓名",
    		        trigger: 'blur'
    		    }]
    	        }
                };
            }
        }
    </script>
    <style>
    </style>
    

    正确代码示例:
    <template>
        <Form :model="formValidate" :rules="ruleValidate" ref="nameForm">
            <FormItem prop="name" label="Name" :label-width="150">
                <Input v-model="formValidate.name" placeholder="请输入姓名" />
            </FormItem>
        </Form>
    </template>
    <script>
        export default {
    	props: ["comp"],
    	data() {
    	    return {	
    		ruleValidate: {
    		    name: [{
    		        required: true,
    		        message: "请输入姓名",
    		        trigger: 'blur'
    		    }]
    	        }
                };
            }
        }
    </script>
    <style>
    </style>
    
  • 相关阅读:
    第十周阅读内容
    第十周学习小结
    第九周阅读内容
    第九周学习小结
    第八周学习小结
    ..总结
    .总结
    总结.
    周总结
    总结
  • 原文地址:https://www.cnblogs.com/huangch/p/15593548.html
Copyright © 2020-2023  润新知