어떻게 Vue에서 폼을 신속하게 검증합니까?
그럼 우리 갑시다!
이 문서에서는 다음을 다룹니다.
양식 유효성 검사란?
확인은 규정의 요구에 대한 확인이다.
간단하게 말하면 이것은 사용자가 표를 작성할 때 반드시 따라야 하는 설명이다.예기치 않은 데이터 또는 악성 데이터의 공격으로부터 애플리케이션을 보호합니다.즉, 사용자가 입력한 문자가 아닌 유효한 전자메일을 보내거나, 이름이 아닌 유효한 전화번호를 보내도록 하는 등이다.
양식 유효성 검사 유형
검증의 유형부터 시작합시다.단 두 가지:
클라이언트 인증
클라이언트 검증의 주제를 계속 토론하는데 세 가지 유형이 있는데 그것이 바로 실시간 검증, 초점 분실 검증과 폼 제출 검증이다.
즉시: 사용자가 데이터를 입력할 때 터치합니다.입력한 문자마다 검사를 터치합니다.
초점 잃기: 이 필드가 초점을 잃으면, 예를 들어 사용자가 다른 필드를 선택하면 검증을 터치합니다.
폼을 제출할 때: 데이터가 서버에 전송될 때, 단추를 누르면 검증을 터치합니다.
Vee validate를 통해 양식을 어떻게 검증합니까?
지금까지 Vue에서 가장 좋은 폼 검증 절차는 Vee-Validate라고 생각합니다.
그것은 자신을 여러 가지 기능을 가진 프레임워크로 자리잡았다.
그래서 코드를 작성하는 것으로 천천히 전환합시다.다음과 같이 하십시오.
1단계: 클론example project.
git clone https://github.com/denisoed/how-to-validate-form-in-vue.git두 번째 단계: 코드를 보고 우리가 토론하고자 하는 내용을 부분적으로 이해한다.세 번째 단계: 그리고 내가 거기에 쓴 모든 것을 알려줄게.
Nuxt를 사용하는 방법을 보여 드리겠습니다.js를 예로 들다.만약 당신이 아직 익숙하지 않다면, 나는 당신이 나의 previous article 를 읽는 것을 건의합니다.
기억하는 바와 같이 Nuxt의 모든 플러그인은js는 프로젝트 루트 디렉터리의/plugins 폴더에 저장해야 합니다.폴더로 이동하여 vee validate 파일을 엽니다.js.
import Vue from 'vue';
import {
ValidationObserver,
ValidationProvider,
extend,
configure
} from 'vee-validate';
import {
required,
email,
confirmed
} from 'vee-validate/dist/rules';
extend('required', required);
extend('email', email);
extend('confirmed', {
...confirmed,
message: 'Passwords Don`t Match.'
});
configure({
classes: {
invalid: 'is-invalid'
}
});
Vue.component('ValidationObserver', ValidationObserver);
Vue.component('ValidationProvider', ValidationProvider);
유효성 검사 프로그램 사용자 정의 양식
사실 자신의 규칙을 추가하는 것은 어렵지 않다.핸드폰에 인증서를 작성해 봅시다. "아이폰 필드는 숫자와 대시만 포함해야 합니다."숫자와 대시를 제외한 문자를 입력하면
extend('phone', {
validate: value => {
if (!value) return true
const regex = /^[0-9\s- +]*$/g
return Boolean(value.match(regex))
},
message: 'The Phone field must contain only numbers and dashes.'
});
사용자 정의 인증서를 추가하려면 extend 함수를 사용해야 합니다.첫 번째 매개 변수는 규칙의 이름이 될 것입니다. 우리의 예에서 그것은 전화이고, 두 번째 매개 변수는 두 가지 방법을 가진 대상이 될 것입니다.
검증기: 사용자가 입력한 값을 처리합니다.
메시지: 오류가 발생했을 때 준비된 메시지를 반환하는 방법입니다.
이 코드를 vee validate의 아무 곳에나 삽입합니다.js 파일, 현재 새로운 규칙은 전 세계에서 사용할 수 있으며, 모든 구성 요소에서 사용할 수 있습니다.
우리의 새로운 검증기를 시험하다
검사할 때가 됐어.색인을 엽니다.페이지 폴더에 vu 파일을 만들고 이 매개 변수로 새 필드를 만듭니다. 변수 아이폰을 데이터에 추가하는 것을 잊지 마십시오.
<!-- Phone -->
<ValidationProvider name="Phone" rules="required|phone" v-slot="{ errors }">
<input v-model="phone" type="text" placeholder="Phone">
<span class="error">{{ errors[0] }}</span>
</ValidationProvider>
다음 명령을 사용하여 프로젝트를 실행합니다.
npm i && npm run dev부팅 후 휴대전화의 필드는 필드 목록에 나타나야 한다.이것은 우리의 로고입니다. (제목 텍스트를 보기 위해 멈추기)
문자를 입력하려고 하면 오류 메시지가 표시됩니다.숫자를 입력하면 메시지가 사라집니다.
우리의 습관 규칙은 유효하다!
따라서 원하는 인증서를 작성할 수 있지만, 내장된 인증서가 25 pieces 개 이상인 것을 잊지 마십시오.
ValidationObserver 및 ValidationProvider 구성 요소
ValidationProvider 구성 요소의 포장은ValidationObserver입니다.모든 필드의 상태를 추적하고 오류가 발생하면 해당 상태를 되돌려줍니다.예를 들어 모든 필드가 유효하면 인자 invalid는false를 되돌려주고, 한 필드가 유효하지 않으면 인자 invalid는true를 되돌려줍니다.
ValidationObserver 구성 요소의 모든 매개 변수와 속성을 열거하고 설명하지 않습니다. 이 링크에서 더 자세한 내용을 읽을 수 있습니다.ValidationProvider에 대해서도 이렇게 말할 수 있습니다.읽기here.
오류 메시지 현지화
질문이 있을 수 있습니다. 오류 메시지를 어떻게 다른 언어로 번역합니까?
우선 필요한 지역을vee validate로 가져오는 것이 좋습니다.js 설정 파일
import en from 'vee-validate/dist/locale/en.json';
import ru from 'vee-validate/dist/locale/ru.json';
localize({ en, ru });이제 색인을 봅시다.vu 파일입니다. 변경 사항을 추가합니다.오류 정보를 다른 언어로 변환하는 새로운 기능이 필요합니다.이를 위해 우리는 같은 현지화 방법을 도입했다
...
<script>
import { localize } from 'vee-validate';
export default {
...
switchLocale() {
this.locale = this.locale === 'en' ? 'ru' : 'en';
// switch the locale.
localize(this.locale);
}
<button
class="switch-local"
@click="switchLocale"
>
Switch Locale
</button>
이제 맞춤형 휴대전화 검증기를 위해 메시지를 번역해 봅시다.
V형차로 돌아가.js 파일을 설정하고 다음과 같이 현지화 방법의 코드를 변경합니다.
localize({
en: {
messages: {
...en.messages,
phone: 'The Phone field must contain only numbers and dashes.'
}
},
ru: {
messages: {
...ru.messages,
phone: 'Поле Phone должно содержать только цифры и тире.'
}
}
});
extend('phone', {
validate: value => {
if (!value) return true
const regex = /^[0-9\s- +]*$/g
return Boolean(value.match(regex))
}
});
결론
나는 우리가 여기까지 할 수 있다고 생각한다.내가 보여준 요점은 응용 프로그램이나 사이트에서 기본적인 검증 단계를 구축하기에 충분하다.
자세한 내용은 official documentation를 참조하십시오.
감사합니다!
이전 릴리즈maddevs.io/blog
Reference
이 문제에 관하여(어떻게 Vue에서 폼을 신속하게 검증합니까?), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/maddevs/how-to-quickly-validate-forms-in-vue-lo3텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
