Vue 2.0 폼 검사 구성 요소 vee-vaidate 사용 에 대한 자세 한 설명

vee-validate 사용 강좌
본 고 는 일정한 Vue 2.0 기반 을 가 진 학생 들 이 참고 하고 프로젝트 의 실제 상황 에 따라 사용 하 며 Vue 의 사용 에 대해 불필요 한 해석 을 하지 않 습 니 다.본인 도 공부 하면 서 사용 합 니 다.잘못된 점 이 있 으 면 비판 하고 지적 해 주세요*
설치 하 다

npm install vee-validate@next --save

메모:@next,아니면 Vue 1.0 버 전

bower install vee-validate#2.0.0-beta.13 --save

인용

import Vue from 'vue';
import VeeValidate from 'vee-validate';
Vue.use(VeeValidate);

구성 요소 설정:

import VeeValidate, { Validator } from 'vee-validate';
import messages from 'assets/js/zh_CN';
Validator.updateDictionary({
  zh_CN: {
    messages
  }
});
const config = {
  errorBagName: 'errors', // change if property conflicts.
  delay: 0,
  locale: 'zh_CN',
  messages: null,
  strict: true
};
Vue.use(VeeValidate,config);

assets/js/zh_CN 은 언어 팩 을 저장 하 는 디 렉 터 리 를 대표 합 니 다.node 에서modules/vee-vaidate/dist/locale 디 렉 터 리 아래 항목 을 복사 합 니 다.
Validator 는 더 많은 응용 프로그램 이 있 습 니 다.다음 에 말씀 드 리 겠 습 니 다.
config 다른 매개 변수,delay 는 몇 ms 를 입력 한 후에 검 사 를 합 니 다.messages 는 사용자 정의 검사 정 보 를 대표 합 니 다.strict=true 는 규칙 이 설정 되 어 있 지 않 은 폼 을 검사 하지 않 습 니 다.errorBagName 은 고급 응용 프로그램 에 속 하고 사용자 정의 errors 는 연 구 를 기다 리 고 있 습 니 다.
3.기초 사용

<div class="column is-12">
  <label class="label" for="email">Email</label>
  <p class="control">
    <input v-validate data-rules="required|email" :class="{'input': true, 'is-danger': errors.has('email') }" name="email" type="text" placeholder="Email">
    <span v-show="errors.has('email')" class="help is-danger">{{ errors.first('email') }}</span>
  </p>
</div>

알림:오류 메시지 의 이름 은 보통 폼 의 name 속성 입 니 다.Vue 인 스 턴 스 를 통 해 전달 되 지 않 는 한.
알림:좋 은 습관 을 들 여 각 field 에name속성 을 추가 합 니 다.name속성 이 없 으 면 값 을 연결 하지 않 으 면 vaidator 가 올 바른 검 사 를 하지 않 을 수 있 습 니 다.
errors 에 대하 여:
위의 코드 는errors.has,errors.first,errors구성 요소 에 내 장 된 데이터 모델 로 오류 정 보 를 저장 하고 처리 하 는 데 사용 되 며 다음 과 같은 방법 을 사용 할 수 있 습 니 다.

errors.first('field')-현재 field 에 대한 첫 번 째 오류 정보 얻 기

collect('field')-현재 field 에 대한 모든 오류 정보 가 져 오기(list)

has('field')-현재 filed 에 오류 가 있 는 지(true/false)

all() -현재 폼 의 모든 오류(list)

any() -현재 폼 에 오류 가 있 는 지(true/false)

add(String field, String msg) -오류 추가

clear() -오류 제거

count() -오류 수량

remove(String field)-지정 한 filed 의 모든 오류 제거

Validator 에 대하 여
Validator 는$validator구성 요소 에 의 해 Vue 인 스 턴 스 에 자동 으로 주 입 됩 니 다.또한 폼 이 합 법 적 인지 수 동 으로 검사 하여 대상 에 게 전달 하 는 방식 으로 지정 한 field 를 옮 겨 다 닐 수 있 습 니 다.

import { Validator } from 'vee-validate';
const validator = new Validator({
  email: 'required|email',
  name: 'required|alpha|min:3',
}); 
// or Validator.create({ ... });

당신 도 vaidator 를 구성 한 후에 대상 인 자 를 설정 할 수 있 습 니 다.

import { Validator } from 'vee-validate';
const validator = new Validator();

validator.attach('email', 'required|email'); // attach field.
validator.attach('name', 'required|alpha', 'Full Name'); // attach field with display name for error generation.

validator.detach('email'); // you can also detach fields.

마지막 으로 field 에 직접 값 을 전달 할 수 있 습 니 다.검 사 를 통과 할 수 있 는 지 테스트 할 수 있 습 니 다.이렇게:

validator.validate('email', '[email protected]'); // true
validator.validate('email', 'foo@bar'); // false
//        :
validator.validateAll({
  email: '[email protected]',
  name: 'John Snow'
});
//          ，   false

4.내 장 된 검사 규칙

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]-접미사 명

이미지-이미지

in:[list]-배열 list 에 포 함 된 값

ip-ipv 4 주소

max:{length}-최대 길이 length 문자

mimes:[list]-파일 형식

min-max 반대

mot_in-in 반대로

numeric-숫자 만 허용

regex:{pattern}-값 은 정규 pattern

에 부합 해 야 합 니 다.

required-설명 하지 않 음

size:{kb}-파일 크기 를 초과 하지 않 음

url:{domain?} - (도 메 인 이름 지정)url

5.사용자 정의 검사 규칙
1.직접 정의

const validator = (value, args) => {
  // Return a Boolean or a Promise.
}
//      ，        Promise，        

2.대상 형식

const validator = {
  getMessage(field, args) { //               
    // Returns a message.
  },
  validate(value, args) {
    // Returns a Boolean or a Promise.
  }
};

3.지정 한 언어 에 추 가 된 오류 메시지

const validator = {
  messages: {
    en: (field, args) => {
      //       
    },
    cn: (field, args) => {
      //       
    }
  },
  validate(value, args) {
    // Returns a Boolean or a Promise.
  }
};

규칙 을 만 든 후 extend 방법 으로 Validator 에 추가 합 니 다.

import { Validator } from 'vee-validate';
const isMobile = {
  messages: {
    en:(field, args) => field + '   11     ',
  },
  validate: (value, args) => {
    return value.length == 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/.test(value)
  }
}
Validator.extend('mobile', isMobile);

//    

Validator.extend('mobile', {
  messages: {
   en:field => field + '   11     ',
  },
  validate: value => {
   return value.length == 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/.test(value)
  }
});

그리고 모 바 일 을 내 장 된 규칙 으로 사용 할 수 있 습 니 다.

<input v-validate data-rules="required|mobile" :class="{'input': true, 'is-danger': errors.has('mobile') }" name="mobile" type="text" placeholder="Mobile">
<span v-show="errors.has('mobile')" class="help is-danger">{{ errors.first('mobile') }}</span>

4.내 장 된 규칙 의 오류 정 보 를 사용자 정의 합 니 다.

import { Validator } from 'vee-validate';

const dictionary = {
  en: {
    messages: {
      alpha: () => 'Some English Message'
    }
  },
  cn: {
    messages: {
      alpha: () => ' alpha           '
    }
  }
};

Validator.updateDictionary(dictionary);

잠시 여기까지 소 개 했 으 니 이미 손 에 넣 었 을 것 이 니 시간 이 있 으 면 다시 번역 하 세 요.
다른 문제 나 고급 응용 은 공식 문서Vee-Validate를 참고 하 십시오.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.