vue-validator获取表单已变更数据

2024年4月17日 236次阅读 来源: 大麦大

vue-validator支持字段验证结果和全局属性’modified’，
全局结果
modified: 只要存在与初始值不同的字段就返回 true,否则返回 false。
字段验证结果
modified: 字段值与初始值不同时返回 true,否则返回 false。

应用这个属性可以获取到data中发生了变更的数据，从而在提交数据的时候只提交发生了变更的数据。
在2.0.0版本中，只要增加 v-validate:fieldname 就可以在validator中监视到这个字段。前几天升级到2.1.3之后，发现如果不写具体验证规则，validator就不再监视该字段了。
现在提供一个比较简单的解决方案，就是增加一个返回true的空验证规则

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <link href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
</head>

<body>
    <div id="app" style="padding:5%">
        <validator name="validation1">
            <div class="form-group">
                <input type="text" class="form-control" v-model="id" v-validate:id="['required']" placeholder="用户ID" />
            </div>
            <div class="form-group">
                <input type="text" class="form-control" v-model="UserName" v-validate:UserName="['required']" placeholder="用户姓名" />
            </div>
            <div class="form-group">
                <input type="text" class="form-control" v-model="Age" v-validate:Age="['gettrue']" placeholder="年龄" />
            </div>
            <div class="form-group">
                <input type="text" class="form-control" v-model="PayedPrice" v-validate:PayedPrice="['gettrue']" placeholder="支付金额" />
            </div>
            <div class="form-group">
                {{'modified:'+ $validation1.modified}}
            </div>
            <div class="form-group">{{'valid:'+ $validation1.valid}}</div>
            <div class="form-group">
                {{form | json}}
            </div>
            <div class="form-group">
                <a type="button" class="btn btn-primary" v-bind:class="{'disabled': !$validation1.modified || !$validation1.valid }" v-on:click="getModified">（首选项）Primary</a>
            </div>
        </validator>
    </div>

    <script src="http://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script src="http://cdn.bootcss.com/vue/1.0.17/vue.min.js"></script>
    <script src="http://cdn.bootcss.com/vue-validator/2.1.3/vue-validator.min.js"></script>
    <script type="text/javascript">
        //添加一个返回true的验证指令
        Vue.validator('gettrue',function(val/*,rule*/){return true})
        //获取所有变更的数据
        //找出已变更的数据
        function getModified($validation, $data) {
            var form = {}
            for(var prop in $data){
                if(!!$validation[prop.toLowerCase()] && $validation[prop.toLowerCase()].modified){
                    form[prop] = $data[prop]
                }
            }
            return form
        }
        //根实例
        var vm = new Vue({ 
            el:"#app", 
            data:function(){ 
                return { 
                    id:'123' ,
                    UserName:"",
                    Age:"",
                    PayedPrice:"",
                    form:{}
                }
            },
            methods:{
                getModified:function(){
                    this.$set('form',getModified(this.$validation1, this.$data))                    
                }
            },
        })

    </script>
</body>

</html>
    原文作者：大麦大
    原文地址: https://segmentfault.com/a/1190000005631487
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞