Vuerify는 간단하고 가벼운 데이터 검증 플러그인입니다. 내장 기본 검증 규칙 및 오류 프롬프트. 사용자 정의 가능한 규칙 및 규칙 유형은 일반, 기능 또는 문자열을 지원합니다. 확인 규칙은 전 세계 또는 구성 요소 내에 등록 할 수 있습니다. 플러그인은 vm에 $ vuerify 객체를 추가하고 동시에 데이터를보고 합법성을 확인합니다. 오류가 있으면 vm. $ vuerify. $ 오류가 저장됩니다.
설치하다
npm i vuerify -S
사용
플러그인을 설치하십시오
'vue'import vuerify'vuerify'vue.use (vuerify, /* 커스텀 규칙 추가* /)에서 vue import vue
사용자 정의 규칙을 추가하십시오
테스트는 규칙적이거나 기능이 될 수 있습니다
{필수 : {test : // s+$/, 메시지 : '필수'}}구성 요소 내에 등록하십시오
{data () {username : '', password : ''}, vuerify : {username : {test : // w {4,}/, // 기능, 정기적 또는 글로벌 등록 규칙 (Strings Fill in Strings)이 될 수있는 사용자 정의 규칙 : '적어도 4 자'}, 암호 : '전역 등록 사용에 대한 규칙}}}}}}}}}}}}}API
$ vuerify에는 다음 속성이 포함되어 있습니다
pastioncriptiontypedefault 값
$ 오류 오류 메시지 데이터 확인 실패, 예를 들어, 사용자 이름이 확인되지 않으면 {username : 'inster 4 aracter'} 개체 {}을 반환합니다.
유효하지 않은 필드는 부울을 점검하지 못했습니다
유효한 부울을 확인하지 못하는 필드가 없습니다.
지정된 필드를 점검하고 배열에 전달한 다음 부울 불능 (배열)을 반환합니다.
명확한 명확한 오류 목록 기능-
v-vuerrify
이 지침은 데이터를 검증하고 양식 구성 요소가 블러 이벤트를 트리거 할 때 구성 요소의 클래스 이름을 설정합니다 (기본값은 .Vuerify-Invalid). 입력과 같은 기본 구성 요소 일 수도 있고 자체적으로 캡슐화 된 구성 요소 일 수 있습니다. 두 버전을 사용할 수 있습니다
설치하다
# vue 1.xnpm v-vuerify -s# vue 2.0npm v-vuerify-next -s
용법
'v-vuerify'// vue1.ximport vuerifydirective 'v-vuerify-next'// vue2.0vue.use (vuerifydirective)에서 'vue'import vuerifydirection의 import vue <입력 v-model = "username"v-vuerify = "<x-input. v-vuerify = " 'password'"> </x-input>
파라
verifyInValidClass
기본 클래스 이름은 vuerify invalid입니다
<input v-model = "username"v-vuerify = " 'username'"vuerify-invalid class = "error">
수정 자
조상
Vuerify가 상위 구성 요소에 등록 된 경우, 지시문이 상위 구성 요소에서 해당 $ vuerify를 얻을 수 있도록 부모를 지정해야합니다. 자세한 내용은 데모를 참조하십시오
이벤트
vuerify invalid
vuerify valid
github : https://github.com/qingwei-li/vuerrify