文件下载:
https://github.com/vuejs/vue-validator/tree/dev/dist
在线地址:
< 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 是由 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.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') } } })