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  結束  撒花✿✿ヽ(°▽°)ノ✿