vueフォーム検証vee-validate

次に、vueのフォーム検証プラグインについて説明します.
一、据付

npm install vee-validate --save-dev

二、配置
vee-validateのデフォルトは英語のヒントの検証であり、中国語に構成する必要があります.次の方法を使用できます.

//validate.js
import Vue from 'vue';
import VeeValidate, {
  Validator
} from 'vee-validate';
import zh_CN from 'vee-validate/dist/locale/zh_CN';//        

const dictionary = {
  zh_CN
};
//         
const config = {
  errorBagName: 'errors2', // change if property conflicts.
  fieldsBagName: 'fields',
  delay: 0,
  locale: 'zh_CN',
  dictionary: null,
  strict: true,
  enableAutoClasses: false,
  classNames: {
    touched: 'touched', // the control has been blurred
    untouched: 'untouched', // the control hasn't been blurred
    valid: 'valid', // model is valid
    invalid: 'invalid', // model is invalid
    pristine: 'pristine', // control has not been interacted with
    dirty: 'dirty' // control has been interacted with
  },
  events: 'input|blur',
  inject: true
};

Validator.updateDictionary(dictionary);//    
Vue.use(VeeValidate, config);

これで中国語のヒントの構成が完了しました.
三、簡単に使う
次のコードは、マイクロ信号端末uiフレームワークvuxに基づいている.

<x-input label-width='4rem' placeholder="      " v-validate="'required'" name='   ' v-model="mobile">
              <i slot="label" class="iconfont icon-people">i>
            x-input>
            <span v-show="errors2.has('   ') && submitted" class="errors-tip is-danger">{{ errors2.first('   ') }}span>

v-validate="required"は必須チェックを表し、name="携帯番号"name属性は必須であり、vee-validateがチェックするフィールドが携帯電話番号であることを示すとともに、エラーメッセージにも使用される.v-show=”errors2.has(‘携帯番号’)&&submitted"submittedは、コミット時にエラー内容が表示されるなど、検証のために設定されたフラグです.errors2.first(‘携帯電話番号’)は、携帯電話番号チェックの最初のエラー内容を表示する.
四、内部検査規則

after{target} -  target         ，  (DD/MM/YYYY)
alpha -        
alpha_dash -       、  、   、   
alpha_num -          
before:{target} -  after  
between:{min},{max} -  min max     
confirmed:{target} -    target  
date_between:{min,max} -    min max  
date_format:{format} -    format     
decimal:{decimals?} -   ，   decimals  
digits:{length} -    length   
dimensions:{width},{height} -          
email -    
ext:[extensions] -    
image -   
in:[list] -      list   
ip - ipv4  
max:{length} -      length   
mimes:[list] -     
min - max  
mot_in - in  
numeric -      
regex:{pattern} -        pattern
required -    
size:{kb} -        
url:{domain?} - (     )url

具体的には公式サイトvee-validateを参照
五、カスタム検査規則
組み込みルールは、私たちが使用するのに十分ではありません.vee-validateは、次の例を参照して、検証ルールを拡張するための非常に簡単な方法を提供します.

//      
const validateRules = {
    mobile: {
      messages: {//      
        zh_CN: field => '         ',
      },
      validate: value => {//      
        return value.length == 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/.test(value)
      }
    },
    idCard: {
      messages: {
        zh_CN: field => '          ',
      },
      validate: value => {
        var reg = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$/;
        //18 
        var regs =
          /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;
        return reg.test(value) || regs.test(value);
      }
    },
    passWord: {
      messages: {
        zh_CN: field => '    8-16        ',
      },
      validate: value => {
        let reg1 = /\d+/;
        let reg2 = /[a-zA-Z]/;
        return value.length >= 8 && value.length <= 16 &&reg1.test(value) && reg2.test(value);
      }
    }
  }
  //      
Object.keys(validateRules).forEach((key) => {
  Validator.extend(key, validateRules[key]);
});

このセクションのvalidateを追加するだけです.jsでいいです.そして私たちのmainで.jsではこのvalidateをjsが導入されると、私たちの検証を開始することができます.