這是Vue的一個(gè)插件采郎。js允許您以一種簡單而強(qiáng)大的方式驗(yàn)證輸入字段夕凝，并顯示錯(cuò)誤。
官方文檔veeValidate
vue表單驗(yàn)證.png
安裝
npm
npm install vee-validate --save
cdn
<script src="path/to/vue.js"></script>
<script src="path/to/vee-validate.js"></script>
<script>
Vue.use(VeeValidate); // good to go.
</script>
或者你可以用ES6
import Vue from 'vue';
import VeeValidate from 'vee-validate';
Vue.use(VeeValidate);
中文的配置
我在網(wǎng)上搜了各種方法均無效
對了，如果cnpm install vee-validate --save沒有出現(xiàn)語言包，可以試試這個(gè)
cnpm install vee-validate@^2.0.0-rc.26 --save
必須加上版本號(hào)瀑志，這樣才node_modules的文件下有個(gè)veeValidate文件夾，里面有個(gè)dist文件污秆，不帶版本號(hào)出現(xiàn)不了那個(gè)locale文件
語言包.png
我搜尋了幾篇帖子使用vee-validate表單插件是如何設(shè)置中文提示劈猪？這篇是最靠譜的
首先安裝i18n
cnpm install --save vue-i18n
然后在main.js里面引入
import VeeValidate from 'vee-validate';
import {Validator} from 'vee-validate';
import zh_CN from 'vee-validate/dist/locale/zh_CN' //加載語言包應(yīng)該寫成這個(gè)樣子
import VueI18n from 'vue-i18n';
Vue.use(VueI18n)
const i18n = new VueI18n({
locale: 'zh_CN',
})
Vue.use(VeeValidate, {
i18n,
i18nRootKey: 'validation',
dictionary: {
zh_CN
}
});
在模板里面使用
<div class="g-form-line">
<span class="g-form-label">郵箱</span>
<div class="g-form-input">
<input v-validate ="'required|email'" type="text" id="email" name="myEmail" :class="{'input': true, 'is-danger': errors.has('email') }">
</div>
<span v-show="errors.has('myEmail')" class="help is-danger">{{ errors.first('myEmail')}}</span>
</div>
這樣子中文就可以出現(xiàn)了
自定義消息
const dict = {
messages:{
required:()=>'這個(gè)是必須的'
}
}
const validator = new Validator({});
validator.localize('zh_CN',dict);
自定義規(guī)則
Validator.extend('username', {
getMessage: field => '以字母或者下劃線開頭，可包含字母數(shù)字下劃線',
validate: value => {
return /^[a-zA-Z0-9_-]{4,10}$/.test(value)
}
});
Validator.extend('phonenumber', {
getMessage: field => field + '必須是11位手機(jī)號(hào)碼',
validate: value => {
return value.length == 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/.test(value)
}
});
Validator.extend('password', {
getMessage: field => field + '最少6位混狠，包括至少1字母岸霹、特殊字符、數(shù)字',
validate: value => {
return /^.*(?=.{6,})(?=.*\d)(?=.*[A-Za-z])(?=.*[!@#$%^&*? ]).*$/.test(value)
}
});
在模板中使用
<div class="g-form-line">
<span class="g-form-label">用戶名</span>
<div class="g-form-input">
<input v-validate ="'required|username'" type="text" id="email" name="myUsername">
</div>
<span v-show="errors.has('myUsername')" class="help is-danger">{{ errors.first('myUsername')}}</span>
</div>
<div class="g-form-line">
<span class="g-form-label">手機(jī)號(hào)碼</span>
<div class="g-form-input">
<input v-validate ="'required|phonenumber'" type="text" id="phonenumber" name="myPnumber">
</div>
<span v-show="errors.has('myPnumber')" class="help is-danger">{{ errors.first('myPnumber')}}</span>
</div>
<div class="g-form-line">
<span class="g-form-label">郵箱</span>
<div class="g-form-input">
<input v-validate ="'required|email'" type="text" id="email" name="myEmail" :class="{'input': true, 'is-danger': errors.has('email') }">
</div>
<span v-show="errors.has('myEmail')" class="help is-danger">{{ errors.first('myEmail')}}</span>
</div>
<div class="g-form-line">
<span class="g-form-label">密碼：</span>
<div class="g-form-input" >
<input type="password" v-validate="'required|password|confirmed:pwd_confirm'" id="password" name="myPassWord" placeholder="請輸入密碼" >
</div>
<span v-show="errors.has('myPassWord')" class="help is-danger">{{ errors.first('myPassWord')}}</span>
</div>
內(nèi)置校驗(yàn)規(guī)則
after{target} - 比target要大的一個(gè)合法日期将饺，格式(DD/MM/YYYY)
alpha - 只包含英文字符
alpha_dash - 可以包含英文、數(shù)字痛黎、下劃線予弧、破折號(hào)
alpha_num - 可以包含英文和數(shù)字
before:{target} - 和after相反
between:{min},{max} - 在min和max之間的數(shù)字
confirmed:{target} - 必須和target一樣
date_between:{min,max} - 日期在min和max之間
date_format:{format} - 合法的format格式化日期
decimal:{decimals?} - 數(shù)字，而且是decimals進(jìn)制
digits:{length} - 長度為length的數(shù)字
dimensions:{width},{height} - 符合寬高規(guī)定的圖片
email - 不解釋
ext:[extensions] - 后綴名
image - 圖片
in:[list] - 包含在數(shù)組list內(nèi)的值
ip - ipv4地址
max:{length} - 最大長度為length的字符
mimes:[list] - 文件類型
min - max相反
not_in - in相反
numeric - 只允許數(shù)字
regex:{pattern} - 值必須符合正則pattern
required - 不解釋
size:{kb} - 文件大小不超過
url:{domain?} - (指定域名的)url
作者：乖乖果效36
鏈接：http://www.reibang.com/p/bd606e194392
更多詳細(xì)內(nèi)置規(guī)則可以點(diǎn)擊這里
