vant + vee-validate 验证

1、安装

npm install vee-validate --save复制代码

2、引用 在mian.js中

引入时须要引入国际化vue-i18n，用来配置中文提示

npm install vue-i18n --save复制代码

import Vue from 'vue'
import VeeValidate ,{ Validator } 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      
    }  
});
复制代码

3、自定义校验规则

    为了更好的使用，在src/utils目录下建立了validator.js，在mian 中引入validator.js，将以前mian中的代码移入validator.js中。

//自定义valitate
const dictionary = {   
 zh_CN: {      
    messages:{          
        required:function(field){
             return '请输入'+field          
        }      
    },      
    attributes: {
        name:'姓名',
        mobile:'手机号'//新增手机号属性
    }  
  }      
}  
Validator.localize(dictionary);

/**自定义手机验证 */
 Validator.extend("mobile", {
    getMessage: field => `请输入正确的手机号码`,
    validate: value => value.length === 11 && /^(((13[0-9]{1})|(14[57]{1})|(15[012356789]{1})|(17[03678]{1})|(18[0-9]{1})|(19[89]{1})|(16[6]{1}))+\d{8})$/.test(value) 
});复制代码

4、页面调用

errors.first('field') -- 获取关于当前field的第一个错误信息
collect('field') -- 获取关于当前field的全部错误信息(list)
has('field') -- 当前filed是否有错误(true/false)
all() -- 当前表单全部错误(list)
any() -- 当前表单是否有任何错误(true/false复制代码

//提交
this.$validator.validateAll().then(result => {
        if (result) {
           .....
        }
})复制代码

效果以下：

enmmm  结束  撒花✿✿ヽ(°▽°)ノ✿