文件下载：
https://github.com/vuejs/vue-…
在线地址：
<script src="https://cdn.jsdelivr.net/vue.validator/2.1.6/vue-validator.min.js"></script>
1.v-validate 指令
用法如下:
v-validate[:field]=”array literal | object literal | binding”
(1).可以通过 field 属性来指定字段名。（即目标的id）
(2).字面量（验证规则）
1）数组
<validator name="validation">
<form novalidate>
Zip: <input type="text" v-validate:zip="['required']"><br />
<div>
<span v-if="$validation.zip.required">Zip code is required.</span>
</div>
</form>
</validator>
因为 required 验证器不要额外的参数，这样写更简洁。
2）对象
<validator name="validation">
<form novalidate>
ID: <input type="text" v-validate:id="{ required: true, minlength: 3, maxlength: 16 }"><br />
（或者使用严苛模式对象： ID: <input type="text" v-validate:id="{ minlength: { rule: 3 }, maxlength: { rule: 16 } }"><br />）
<div>
<span v-if="$validation.id.required">ID is required</span>
<span v-if="$validation.id.minlength">Your ID is too short.</span>
<span v-if="$validation.id.maxlength">Your ID is too long.</span>
</div>
</form>
</validator>
使用对象型字面量允许你为验证器指定额外的参数。
3）绑定
new Vue({
el: '#app',
data: {
rules: {
minlength: 3,
maxlength: 16
}
}
})
<div id="app">
<validator name="validation">
<form novalidate>
ID: <input type="text" v-validate:id="rules"><br />
<div>
<span v-if="$validation.id.minlength">Your ID is too short.</span>
<span v-if="$validation.id.maxlength">Your ID is too long.</span>
</div>
</form>
</validator>
</div>
除数据属性外，也可以使用计算属性或事例方法来指定验证规则。
2.规则介绍
Build-in validators
You can be used build-in validators of below:
• required: whether the value has been specified
• pattern: whether the pattern of the regular expression
• minlength: whether the length of specified value is less than or equal minimum length
• maxlength: whether the length of specified value is less more or equal maximum length
• min: whether the specified numerical value is less than or equal minimum
• max: whether the specified numerical value is more than or equal maximum
• required: 是否是必须的
• pattern: 正则表达式
• minlength: 最小长度
• maxlength: 最大长度
• min: 最小值
• max: 最小值
3.可验证的表单元素
复选框 单选按钮 下拉列表
4.验证结果
字段验证结果
• 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。
验证结果保存在如下结构中:
{// top-level validation properties
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（id） 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'
}]
},
}
验证结果会关联到验证器元素上。在上例中，验证结果保存在 $validation1 下，$validation1 是由 validator 元素的 name 属性值加 $ 前缀组成。
支持把验证字段分组：
<validator name="validation1" :groups="['user', 'password']">
username: <input type="text" group="user" v-validate:username="['required']"><br />
password: <input type="password" group="password" v-validate:password1="{ minlength: 8, required: true }"/><br />
password (confirm): <input type="password" group="password" v-validate:password2="{ minlength: 8, required: true }"/>
<div class="user">
<span v-if="$validation1.user.invalid">Invalid yourname !!</span>
</div>
<div class="password">
<span v-if="$validation1.password.invalid">Invalid password input !!</span>
</div>
</validator>
指定错误消息
有时候你只需要输出部分错误消息，此时你可以通过 group 或 field 属性来指定这部分验证结果。
• group: 指定组的错误消息 (例如 $validation.group1.errors)
• field: 指定字段的错误消息 (例如 $validation.field1.errors)
错误消息
错误消息可以直接在验证规则中指定，同时可以在 v-show 和 v-if 中使用错误消息：
<span v-if="$validation1.password.required">{{ $validation1.password.required }}</span>
<span v-if="$validation1.password.minlength">{{ $validation1.password.minlength }}</span>
也可以在 v-for 指令中使用错误消息：
<ul>
<li v-for="error in $validation1.errors">
<p>{{error.field}}: {{error.message}}</p>
</li>
</ul>
5.自定义验证器
全局注册
可以使用 Vue.validator 方法注册自定义验证器。
提示: Vue.validator asset 继承自 Vue.js 的 asset 管理系统.
通过下例中的 email 自定义验证器详细了解 Vue.validator 的使用方法：
// Register email validator function.
Vue.validator('email', function (val) {
return /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(val)
})
new Vue({
el: '#app'
data: {
email: ''
}
})
<div id="app">
<validator name="validation1">
address: <input type="text" v-validate:address="['email']"><br />
<div>
<p v-show="$validation1.address.email">Invalid your mail address format.</p>
</div>
<validator>
</div>
局部注册
可以通过组件的 validators 选项注册只能在组件内使用的自定义验证器。
自定义验证器是通过在组件的 validators 下定义验证通过返回真不通过返回假的回调函数来实现。
下例中注册了 numeric 和 url 两个自定义验证器：
new Vue({
el: '#app',
validators: { // `numeric` and `url` custom validator is local registration
numeric: function (val/*,rule*/) {
return /^[-+]?[0-9]+$/.test(val)
},
url: function (val) {
return /^(http\:\/\/|https\:\/\/)(.{4,})$/.test(val)
}
},
data: {
email: ''
}
})
<div id="app">
<validator name="validation1">
username: <input type="text" v-validate:username="['required']"><br />
email: <input type="text" v-validate:address="['email']"><br />
age: <input type="text" v-validate:age="['numeric']"><br />
site: <input type="text" v-validate:site="['url']"><br />
<div class="errors">
<p v-if="$validation1.username.required">required username</p>
<p v-if="$validation1.address.email">invalid email address</p>
<p v-if="$validation1.age.numeric">invalid age value</p>
<p v-if="$validation1.site.url">invalid site uril format</p>
</div>
<validator>
</div>
6.延迟初始化
如果在 validator 元素上设置了 lazy 属性，那么验证器直到 $activateValidator() 被调用时才会进行初始化。这在待验证的数据需要异步加载时有用，避免了在得到数据前出现错误提示。
下例中在得到评论内容后验证器才开始工作；如果不设置 lazy 属性，在得到评论内容前会显示错误提示。
<!-- comment component -->
<div>
<h1>Preview</h1>
<p>{{comment}}</p>
<validator lazy name="validation1">
<input type="text" :value="comment" v-validate:comment="{ required: true, maxlength: 256 }"/>
<span v-if="$validation1.comment.required">Required your comment</span>
<span v-if="$validation1.comment.maxlength">Too long comment !!</span>
<button type="button" value="save" @click="onSave" v-if="valid">
</validator>
</div>
Vue.component('comment', {
props: {
id: Number,
},
data: function () {
return { comment: '' }
},
activate: function (done) {
var resource = this.$resource('/comments/:id');
resource.get({ id: this.id }, function (comment, stat, req) {
this.comment = comment.body
// activate validator
this.$activateValidator()
done()
}.bind(this)).error(function (data, stat, req) {
// handle error ...
done()
})
},
methods: {
onSave: function () {
var resource = this.$resource('/comments/:id');
resource.save({ id: this.id }, { body: this.comment }, function (data, stat, req) {
// handle success
}).error(function (data, sta, req) {
// handle error
})
}
}
})
7.自定义验证时机
默认情况下，vue-validator 会根据 validator 和 v-validate 指令自动进行验证。然而有时候我们需要关闭自动验证，在有需要时手动触发验证。
initial
当 vue-validator 完成初始编译后，会根据每一条 v-validate 指令自动进行验证。如果你不需要自动验证，可以通过 initial 属性或 v-validate 验证规则来关闭自动验证。
(1)initial
<input id="username" type="text" initial="off" v-validate:username="['required', 'exist']">
(2) v-validate 验证规则
detect-blur and detect-change
vue-validator 会在检测到表单元素(input, checkbox, select 等)上的 DOM 事件(input, blur, change)时自动验证。此时，可以使用 detect-change 和 detect-blur 属性：
<input id="username" type="text"
detect-change="off" detect-blur="off" v-validate:username="{
required: { rule: true, message: 'required you name !!' }
}" />
8.异步验证
当在需要进行服务器端验证，可以使用异步验证，如下例：
<template>
<validator name="validation">
<form novalidate>
<h1>user registration</h1>
<div class="username">
<label for="username">username:</label>
<input id="username" type="text"
detect-change="off" v-validate:username="{
required: { rule: true, message: 'required your name !!' },
exist: { rule: true, initial: 'off' }
}" />
<span v-if="checking">checking ...</span>
</div>
<div class="errors">
<validator-errors :validation="$validation"></validator-errors>
</div>
<input type="submit" value="register" :disabled="!$validation.valid" />
</form>
</validator>
</template>
function copyOwnFrom (target, source) {
Object.getOwnPropertyNames(source).forEach(function (propName) {
Object.defineProperty(target, propName, Object.getOwnPropertyDescriptor(source, propName))
})
return target
}
function ValidationError () {
copyOwnFrom(this, Error.apply(null, arguments))
}
ValidationError.prototype = Object.create(Error.prototype)
ValidationError.prototype.constructor = ValidationError
// exmpale with ES2015
export default {
validators: {
data () {
return { checking: false }
},
exist (val) {
this.vm.checking = true // spinner on
return fetch('/validations/exist', {
method: 'post',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({
username: val
})
}).then((res) => {
this.vm.checking = false // spinner off
return res.json()
}).then((json) => {
return Object.keys(json).length > 0
? Promise.reject(new ValidationError(json.message))
: Promise.resolve()
}).catch((error) => {
if (error instanceof ValidationError) {
return Promise.reject(error.message)
} else {
return Promise.reject('unexpected error')
}
})
}
}
}
异步验证接口
在异步验证时，可以使用如下两类接口：
函数
需要实现一个返回签名为 function (resolve, reject) 如同 promise 一样的函数的自定义验证器。函数参数解释如下：
• 验证结果
o 成功时: resolve
o 失败时: reject
promise
需要实现一个返回 promise 的自定义验证器。根据验证结果来 resolve 或 reject。
使用错误消息
如上例所示，在服务器端验证错误发生时，可以使用服务器端返回的错误消息。
验证器函数 context
验证器函数 context 是绑定到 Validation 对象上的。Validation 对象提供了一些属性，这些属性在实现特定的验证器时有用。
vm 属性
暴露了当前验证所在的 vue 实例。
the following ES2015 example:
new Vue({
data () { return { checking: false } },
validators: {
exist (val) {
this.vm.checking = true // spinner on
return fetch('/validations/exist', {
// ...
}).then((res) => { // done
this.vm.checking = false // spinner off
return res.json()
}).then((json) => {
return Promise.resolve()
}).catch((error) => {
return Promise.reject(error.message)
})
}
}
})
el 属性
暴露了当前验证器的目标 DOM 元素。下面展示了结合 International Telephone Input jQuery 插件使用的例子：
new Vue({
validators: {
phone: function (val) {
return $(this.el).intlTelInput('isValidNumber')
}
}
})
