Vue-validator 是Vue的表單驗(yàn)證插件，供大家參考，具體內(nèi)容如下

Vue版本： 1.0.24
Vue-validator版本： 2.1.3

基本使用

<div id="app"> <validator name="validation">  <form novalidate>   <div class="username-field">    <label for="username">username:</label>    <input type="text" id="username" v-validate:username="['required']" />   </div>   <div class="comment-filed">    <label for="comment">comment:</label>    <input type="text" id="comment" v-validate:comment="{maxlength: 256}" />   </div>   <div class="errors">    <p v-if="$validation.username.required">請(qǐng)輸入你的名字</p>    <p v-if="$validation.comment.maxlength">您的評(píng)論太長(zhǎng)了</p>   </div>   <input type="submit" value="send" v-if="$validation.valid" />  </form> </validator></div><script src="https://cdn.bootcss.com/vue/1.0.24/vue.js" type="text/javascript" charset="utf-8"></script><script src="https://cdn.bootcss.com/vue-validator/2.1.3/vue-validator.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript"> new Vue({  el: '#app' });</script>

將要驗(yàn)證的表單包裹在validator自定義元素指令中，而在要驗(yàn)證的表單控件元素的 v-validate 屬性上綁定相應(yīng)的校驗(yàn)規(guī)則。

驗(yàn)證結(jié)果會(huì)保存在組建實(shí)例的 $validation 屬性下。 $validation 是由 validator 元素和 name 屬性和 $ 前綴組件

驗(yàn)證結(jié)果結(jié)構(gòu)

{ // 表單整體驗(yàn)證 "valid": false, // 字段校驗(yàn)是否通過(guò)  "invalid": true, // valid 取反 "touched": false, // 校驗(yàn)字段所在元素獲得通過(guò)焦點(diǎn)時(shí)返回true，否則返回false "untouched": true, // touched 取反 "modified": false, // 當(dāng)元素值與初始值不同時(shí)返回true，否則返回false "dirty": false, // 字段值改變過(guò)至少一次返回true，否則返回false  "pristine": true, // dirty 取反 // 字段單一驗(yàn)證 "username": {  "required": true,  "modified": false,  "pristine": true,  "dirty": false,  "untouched": true,   "touched": false,  "invalid": true,  "valid": false }, "comment": {  "maxlength": false,  "modified": false,  "pristine": true,  "dirty": false,  "untouched": true,  "touched": false,  "invalid": false,  "valid": true }}

校驗(yàn)結(jié)果由兩部分組成。表單整體校驗(yàn)結(jié)果和單個(gè)字段校驗(yàn)結(jié)果。

驗(yàn)證器語(yǔ)法

v-validate 指令語(yǔ)法：

v-validate[:field]=”array literal | object literfal | binding”

校驗(yàn)字段名field

field用來(lái)標(biāo)識(shí)校驗(yàn)字段，之后可以用該字段來(lái)引用校驗(yàn)結(jié)果

v-validate 指令用來(lái)定義校驗(yàn)規(guī)則，其值可以是數(shù)組字面量，對(duì)象字面量，組件實(shí)例數(shù)組屬性名。

數(shù)組字面量

當(dāng)校驗(yàn)器不需要額外參數(shù)時(shí)，可以使用數(shù)組字面量形式，如 required 校驗(yàn)器，只要出現(xiàn)就帶I表該校驗(yàn)器所在元素是必填項(xiàng)。