項(xiàng)目地址
寫在前面
筆者在寫項(xiàng)目時(shí)，使用了vue-cli構(gòu)建工具螟凭，默認(rèn)使用了vue-router，筆者在項(xiàng)目中也使用到了其他組件，element-ui龄减、vuex、vee-validate班眯。
vee-validate組件與其他組件使用時(shí)希停，可能會(huì)出現(xiàn)一個(gè)問題computed property fields already taken，我的第一篇文章講到了署隘，如果不巧你也遇到了宠能，請(qǐng)移步 解決方案 。
為什么選擇這個(gè)磁餐？
- 因?yàn)楣P者PHP出身违崇，
Laravel忠實(shí)粉絲。vee-validate的語法借鑒于laravel的validate組件诊霹。 - 比起vue-validate而言羞延，它更加迷你、實(shí)用脾还。（這個(gè)是在網(wǎng)上說的伴箩，筆者沒有親自去使用，列位看官可以親自去實(shí)踐）
讓我們來進(jìn)行實(shí)戰(zhàn)吧
在這里鄙漏，基本的使用筆者就不再說明嗤谚，這里只是說幾點(diǎn)棺蛛，筆者在項(xiàng)目中使用的到的幾點(diǎn)。
本地化實(shí)戰(zhàn)
-
提示信息本地化
在沒有進(jìn)行本地化之前呵恢，你的提示信息是這樣的：
image.png
在使用之后鞠值，你的效果是這樣的:
aaa
可以看到，本地化的提示信息是多么舒服渗钉，這是在生產(chǎn)環(huán)境我們需要的提示信息彤恶。
其實(shí)在官方文檔中，已經(jīng)給我們提供了本地化的代碼鳄橘，如下所示：
// 加載vee-validate下面本地化文件zh_CN（中文提示信息）声离，默認(rèn)是加載en（英文提示信息）
import zh_CN from 'vee-validate/dist/locale/zh_CN';
import VeeValidate, { Validator } from 'vee-validate';
// 添加一個(gè)本地化文件
Validator.addLocale(zh_CN);
// 讓Vue使用VeeValidate插件，并且使用本地化文件zh_CN
Vue.use(VeeValidate, {
locale: 'zh_CN'
});
這樣做了瘫怜，基本上就可以了术徊。
- 屬性本地化
在項(xiàng)目中，我們可能需要業(yè)務(wù)需要去定義字段鲸湃，而這些字段可能是默認(rèn)字段不存在的赠涮，比如beigin_time開始時(shí)間，而在本地化后暗挑，他不會(huì)自動(dòng)解析為開始時(shí)間,那么它的報(bào)錯(cuò)信息就是這樣的
begin_time 是必填選項(xiàng)
這樣顯然是不友好的笋除，這就需要我們自己手動(dòng)進(jìn)行更改，如何更改呢炸裆？手冊(cè)也給了我們相關(guān)demo垃它。
import { Validator } from 'vee-validate';
const dictionary = {
zh_CN: {
attributes: {
begin_time: '開始時(shí)間'
}
},};
// 組件的字典進(jìn)行更新
Validator.updateDictionary(dictionary);
在我們完成上面代碼后，它的顯示就是這樣的:
開始時(shí)間 是必填選項(xiàng)
顯然烹看，這才是我們需要的国拇。
自定義規(guī)則實(shí)戰(zhàn)
在vee-validate組件中只有20多條驗(yàn)證規(guī)則，不過也好惯殊，太過臃腫會(huì)導(dǎo)致文件過大酱吝。那么這種情況下，我們很可能會(huì)自己寫驗(yàn)證規(guī)則靠胜，來實(shí)現(xiàn)我們要的驗(yàn)證掉瞳。幸運(yùn)的是，官方手冊(cè)也給我們提供了相關(guān)方法浪漠。以下是筆者寫的一個(gè)demo：
# validate/dictionary.js
export const isMobile = {
messages: {
zh_CN: '手機(jī) 格式錯(cuò)誤',
},
validate: (value, args) => {
return value.length === 11 && /^1[3-8]{1}\d{9}$/.test(value);
}
};
# main.js
import * as rules from './validate/rules';
Validator.extend('mobile', rules.isMobile);// 添加手機(jī)號(hào)驗(yàn)證規(guī)則
這時(shí)，我們就可以為在表單中進(jìn)行驗(yàn)證了霎褐。
我的HTML文件是這樣的
<div class="login-container">
<el-form autoComplete="on" v-model="loginForm" label-position="left" label-width="0px"
class="card-box login-form">
<el-form-item>
<el-input v-validate="'required|mobile'" v-model="loginForm.tel"
:class="{'input': true, 'is-danger': errorsBag.has('tel') }" name="tel" type="text"
placeholder="Account"></el-input>
<span v-show="errorsBag.has('tel')" class="el-form-item__error">{{ errorsBag.first('tel') }}</span>
</el-form-item>
<el-form-item>
<el-input v-validate="'required|min:6'" v-model="loginForm.password"
:class="{'input': true, 'is-danger': errorsBag.has('password') }" name="password" type="password"
placeholder="Password"></el-input>
<span v-show="errorsBag.has('password')" class="el-form-item__error">{{ errorsBag.first('password') }}</span>
</el-form-item>
<el-form-item>
<el-button type="primary" style="width:100%;">
登錄
</el-button>
</el-form-item>
</el-form>
</div>
