vue-validator獲取表單已變動數據

時間 2019-11-08

原文原文鏈接

vue-validator支持字段驗證結果和全局屬性'modified'，
全局結果
modified: 只要存在與初始值不一樣的字段就返回 true,不然返回 false。
字段驗證結果
modified: 字段值與初始值不一樣時返回 true,不然返回 false。javascript

應用這個屬性能夠獲取到data中發生了變動的數據，從而在提交數據的時候只提交發生了變動的數據。
在2.0.0版本中，只要增長 v-validate:fieldname 就能夠在validator中監視到這個字段。前幾天升級到2.1.3以後，發現若是不寫具體驗證規則，validator就再也不監視該字段了。
如今提供一個比較簡單的解決方案，就是增長一個返回true的空驗證規則css

<!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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。