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>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。