[TOC]
github
https://github.com/kazupon/vue-validator/tree/2.x/docs/zh-cn
安装
CDN
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="//cdn.bootcss.com/vue/1.0.28-csp/vue.js"></script>
<script src="//cdn.bootcss.com/vue-validator/2.1.6/vue-validator.js"></script>
入门
var vue = new Vue({
el: '#app'
})
- validator元素
把表单放在该元素下面即可 - v-validate 指令
该指令用来指定验证条件
<div id="app">
<validator name="validation1">
<form novalidate>
<div class="username-field">
<label for="username">用户名:</label>
<input id="username" type="text" v-validate:username="['required']">
</div>
<div class="comment-field">
<label for="comment">内容:</label>
<input id="comment" type="text" v-validate:comment="{ maxlength: 256 }">
</div>
<div class="errors">
<p v-if="$validation1.username.required">用户名必填</p>
<p v-if="$validation1.comment.maxlength">最大不能超过256长度</p>
</div>
<input type="submit" value="send" v-if="$validation1.valid">
</form>
</validator>
</div>
ps
验证器名称不要与 Vue.js 中的自带属性重复，如 $event
验证结果结构
验证结果保存在如下结构中
{
// 顶级验证属性
valid: true,
invalid: false,
touched: false,
undefined: true,
dirty: false,
pristine: true,
modified: false,
errors: [{
field: 'field1', validator: 'required', message: 'required field1'
}, ... {
field: 'fieldX', validator: 'customValidator', message: 'invalid fieldX'
}],
// field1 validation
field1: {
required: false, // build-in validator, return `false` or `true`
email: true, // custom validator
url: 'invalid url format', // custom validator, if specify the error message in validation rule, set it
...
customValidator1: false, // custom validator
// field validation properties
valid: false,
invalid: true,
touched: false,
undefined: true,
dirty: false,
pristine: true,
modified: false,
errors: [{
validator: 'required', message: 'required field1'
}]
},
...
// fieldX validation
fieldX: {
min: false, // validator
...
customValidator: true,
// fieldX validation properties
valid: false,
invalid: true,
touched: true,
undefined: false,
dirty: true,
pristine: false,
modified: true,
errors: [{
validator: 'customValidator', message: 'invalid fieldX'
}]
},
}
全局结果可以直接从验证结果中获取到，字段验证结果保存在以字段名命名的键下
字段验证结果
valid: 字段有效时返回 true,否则返回 false
invalid: valid相反结果
touched: 字段获得过焦点时返回 true,否则返回 false
untouched: touched 相反结果
modified: 字段值与初始值不同时返回 true,否则返回 false
dirty: 字段值改变过至少一次时返回 true,否则返回 false
pristine: dirty 相反结果
errors: 字段无效时返回存有错误信息的数据，否则返回 undefined
全局结果
valid: 所有字段都有效时返回 true,否则返回 false。
invalid: 只要存在无效字段就返回 true,否则返回 false。
touched: 只要存在获得过焦点的字段就返回 true,否则返回 false。
untouched: touched 的逆。
modified: 只要存在与初始值不同的字段就返回 true,否则返回 false。
dirty: 只要存在值改变过至少一次的字段就返回 true,否则返回 false。
pristine: 所有字段都没有发生过变化时返回 true,否则返回 false。
errors: 有无效字段时返回所有无效字段的错误信息，否则返回 undefined。
