項(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è)問(wèn)題computed property fields already taken，我的第一篇文章講到了，如果不巧你也遇到了，請(qǐng)移步 解決方案 。
為什么選擇這個(gè)？
- 因?yàn)楣P者PHP出身，
Laravel忠實(shí)粉絲。vee-validate的語(yǔ)法借鑒于laravel的validate組件。 - 比起vue-validate而言，它更加迷你、實(shí)用。（這個(gè)是在網(wǎng)上說(shuō)的，筆者沒(méi)有親自去使用，列位看官可以親自去實(shí)踐）
讓我們來(lái)進(jìn)行實(shí)戰(zhàn)吧
在這里，基本的使用筆者就不再說(shuō)明，這里只是說(shuō)幾點(diǎn)，筆者在項(xiàng)目中使用的到的幾點(diǎn)。
本地化實(shí)戰(zhàn)
-
提示信息本地化
在沒(méi)有進(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開(kāi)始時(shí)間，而在本地化后，他不會(huì)自動(dòng)解析為開(kāi)始時(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: '開(kāi)始時(shí)間'
}
},};
// 組件的字典進(jìn)行更新
Validator.updateDictionary(dictionary);
在我們完成上面代碼后，它的顯示就是這樣的:
開(kāi)始時(shí)間 是必填選項(xiàng)
顯然，這才是我們需要的。
自定義規(guī)則實(shí)戰(zhàn)
在vee-validate組件中只有20多條驗(yàn)證規(guī)則，不過(guò)也好，太過(guò)臃腫會(huì)導(dǎo)致文件過(guò)大。那么這種情況下，我們很可能會(huì)自己寫驗(yàn)證規(guī)則，來(lái)實(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>
