1.安装vee-validate

cnpm install vee-validate --save

2.安装vue-i18n

cnpm install vue-i18n  --save

3.main.js中引入

import VeeValidate from 'vee-validate';
import zh_CN from 'vee-validate/dist/locale/zh_CN'
import VueI18n from 'vue-i18n';
Vue.use(VueI18n)
const i18n = new VueI18n({
  locale: 'zh_CN',
})
Vue.use(VeeValidate, {
  i18n,
  i18nRootKey: 'validation',
  dictionary: {
    zh_CN
  }
});

4.页面中使用

<input type="text" placeholder="邮箱" v-validate ="'required|email'" name="email"/>
<span class="errortip" v-show="errors.has('email')">{{ errors.first('email')}}</span>

5.设置自定义正则表达式规则

<input type="text" placeholder="手机号" v-validate="{ required: true, regex: /^(((13[0-9]{1})|(15[0-35-9]{1})|(17[0-9]{1})|(18[0-9]{1}))+\d{8})$/ }" name="phone"/>
<span class="errortip" v-show="errors.has('phone')">{{ errors.first('phone') }}</span>

6.表单提交验证

this.$validator.validateAll().then((msg)=>{
    if(msg){
      alert('验证成功!');
    }else{
      this.$message({
        message: '填写不完整!',
        type: 'warning'
      });
    }
})

内置规则列表:

规则 格式 描述
1.after after:{target},{inclusion?}
2.alpha alpha 字母
3.alpha_dash alpha_dash 字母,数字,中划线,下划线
4.alpha_num alpha_num 字母,数字
5.alpha_spaces alpha_spaces 字母,空格
6.before before:{target},{inclusion?}
7.between between:{min},{max} <input v-validate="’required|between: 1,10’" name="demo" type="text" placeholder="1-10">
8.confirmed confirmed:{target} <input v-validate="’required|confirmed:123’" name="password" type="text" placeholder="输入的内容要和123相同">
9.credit_card credit_card 信用卡
10.date_between date_between:{min,max},{inclusion?}
11.date_format date_format:{format} <input type="text" v-validate="’date_format:MM/DD/YYYY’" name="" placeholder="输入的日期格式要是MM/DD/YYYY">
12.decimal decimal:{decimals?} <input type="text" v-validate="’decimal:2’" name="" placeholder="输入的数字的小数点个数是2">
13.digits digits:{length} <input type="text" v-validate="’digits:2’" placeholder="数字长度是两位">
14.dimensions dimensions:{width},{height}
15.email email 邮箱
16.ext ext:[extensions]
17.image image
18.in in:[list]
19.ip ip
19.is is:{value} <input v-validate="{ is: confirmation }" type="text" name="password">
<input v-model="confirmation" type="text" name="password_confirmation">
20.max max:{length} <input type="text" v-validate="’max:10’" name="" placeholder="字符串最大长度是10,空格也计算在内">
21.max_value max_value:{value} <input type="text" v-validate="’max_value:100’" placeholder="输入的数字最大为100">
22.mimes mimes:[list]
23.min min:{length} <input type="text" v-validate="’min:5’" name="demo" placeholder="输入的字符长度最小为5位">
24.min_value min_value:{value} <input type="text" v-validate="’min_value:5’" name="demo" placeholder="输入的数字最小为5">
25.not_in not_in:[list]
26.numeric numeric 数字
27.regex regex:{pattern}
28.required required:{invalidateFalse?}
29.size size:{kb}
30.url url:{require_protocol?}

.
参考文章:
http://vee-validate.logaretm.com/examples.html
https://github.com/baianat/vee-validate
https://segmentfault.com/a/1190000011296437

作者 铁血 汉子 2017年12月25日
2018/04/27/06:21:17am 2017/12/25/11:57:32
0 1033