----好記性不如爛筆頭，掌握知識的最好方法莫過于把他記錄下來
vee-validate
vee-validate 一個輕量級的 vue表單驗證插件。
使用教程：
- 1 安裝：
npm install vee-validate --save
- 2 使用 中文提示(按照教程搗鼓了，不行，自己摸索的寫法。)
main.js 添加
import Vue from 'vue'
import VeeValidate, {Validator} from 'vee-validate';
import zh from 'vee-validate/dist/locale/zh_CN';
Validator.addLocale(zh);
const config = {
locale: 'zh_CN'
};
Vue.use(VeeValidate,config);
- 3使用
第一個例子：
<div class="column is-12">
<label class="label" for="email">Email</label>
<p :class="{ 'control': true }">
<input v-validate="'required|email'" :class="{'input': true, 'is-danger': errors.has('email') }" name="email" type="text" placeholder="Email">
<span v-show="errors.has('email')" class="help is-danger">{{ errors.first('email') }}</span>
</p>
</div>
簡化寫，只看有用代碼：
<p>
<input v-validate="'required|email'" name="email" type="text" placeholder="Email">
<span v-show="errors.has('email')" >{{ errors.first('email') }}</span>
</p>
關(guān)于 提示：errors
==>errors.has('email')
==>errors.first('email')
這是什么玩意兒。莫急
直接輸出 {{errors}}就可以看到，驗證的時候返回的是個json數(shù)據(jù)
{
"errors": [
{
"field": "email",
"msg": " email 必須是有效的郵箱.",
"rule": "email",
"scope": "__global__"
}
]
}
解釋如下：
errors.first('field') -- 獲取關(guān)于當(dāng)前field的第一個錯誤信息
collect('field') -- 獲取關(guān)于當(dāng)前field的所有錯誤信息(list)
has('field') -- 當(dāng)前filed是否有錯誤(true/false)
all() -- 當(dāng)前表單所有錯誤(list)
any() -- 當(dāng)前表單是否有任何錯誤(true/false)
tip：關(guān)于樣式，在項目中可以根據(jù)需求選擇，是使用自己的或者是現(xiàn)成的樣式庫（作者使用的是 Font Awesome）。
4 ok前方高能。最關(guān)心的莫過于自定義規(guī)則，或者修改規(guī)則
①：怎么修改默認(rèn)的屬性
這個是默認(rèn)的，怎么自定義。。。
就是將 email 字段改為 郵箱或者隨意字段。
方法一：
const dictionary = {
zh_CN: {
messages: {
email: () => '這個郵箱有毒'
},
attributes:{
email:'--郵箱--'
}
}
};
Validator.updateDictionary(dictionary);
方法二：
官方給出的自定義組件demo，前提是你定義了 custom-input
<div class="columns is-multiline">
<div class="column is-12">
<custom-input v-validate="'required|email'" data-vv-value-path="innerValue" data-vv-name="custom" label="Email" :has-error="errors.has('custom')">
</custom-input>
<span v-show="errors.has('custom')" class="help is-danger">{{ errors.first('custom') }}</span>
<button @click="validate" type="button" class="button is-primary">Validate All</button>
</div>
</div>
但是你可以忽略,有現(xiàn)成的input干嘛不用
<div >
<input v-validate="'required|email'" data-vv-name="丫" label="Email" :has-error="errors.has('丫')" />
<span v-show="errors.has('丫')" class="help is-danger">{{ errors.first('丫') }}</span>
</div>
ok，看效果
②增加自己的規(guī)則
添加手機號驗證
Validator.extend('phone', {
messages: {
zh_CN:field => field + '必須是11位手機號碼',
},
validate: value => {
return value.length == 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/.test(value)
}
});
<input v-validate="'required|phone'" name="phone" type="text" placeholder="Mobile">
<span v-show="errors.has('phone')" >{{ errors.first('phone') }}</span>
③當(dāng)使用 required 規(guī)則驗證時，輸入為空時提示：xxx是必須的，真是要瘋了。
如何修改：就一句話搞定
required:(field)=> "請輸入"+field
其實就是覆蓋他的規(guī)則，完整版：
const dictionary = {
zh_CN: {
messages:{
//email: () => '這個郵箱有毒',
....
required:(field)=> "請輸入"+field
},
attributes: {
......
}
}
};
Validator.updateDictionary(dictionary);
看效果：
④官方提供了好多現(xiàn)成的規(guī)則 Rules
使用方法，
v-validate="'required|max:6|email'"
實現(xiàn)功能：
①required：為空時提示
②max:最多可以輸入6個字符
③email:郵箱驗證
當(dāng)當(dāng)當(dāng)?，F(xiàn)在使用到的基本用法。
待完善。
推薦閱讀：
還是看官方文檔吧 雖然英語這硬傷
文檔：http://vee-validate.logaretm.com/localization.html
官方例子：http://vee-validate.logaretm.com/examples.html
