VUE의 양식 및 검증을 처리하는 방법?

V- 모델을 사용하여 양식 데이터를 바인딩하여 양방향 응답을 달성합니다. 2. 계산 된 속성 및 표시 오류 메시지를 통해 기본 확인을 수동으로 구현합니다. 3. 복잡한 형태의 경우, veevalidate를 사용하여 검증 규칙을 YUP와 함께 정의하여 유지 보수 가능성을 향상시키는 것이 좋습니다. 4. 사용자 경험을 최적화하려면 제출 또는 초점이 맞지 않는 경우 검증, 반복 제출을 비활성화하고 양식 재설정 및로드 상태를 표시하며 궁극적으로 양식 데이터 및 사용자 상호 작용 유창성의 무결성을 보장해야합니다.

vue.js의 양식 및 검증 처리는 일반적인 작업이며,이를 수행하는 것은 사용자 경험과 데이터 무결성을 향상시킵니다. 외부 라이브러리가 있거나없는 VUE 3 (Composition API)을 사용하여 효과적으로 관리하는 방법은 다음과 같습니다.

1. V- 모델을 사용한 기본 양식 처리

v-model 사용하여 형태 입력을 반응성 데이터에 바인딩하십시오. 이렇게하면 양식 상태가 구성 요소의 데이터와 동기화됩니다.

 <스크립트 설정>
&#39;vue&#39;에서 {ref} 가져 오기

const form = ref ({{
  이름: &#39;&#39;,
  이메일 : &#39;&#39;,
  비밀번호: &#39;&#39;
})

const handlesubmit = () => {
  Console.log ( &#39;양식 제출 :&#39;, form.value)
  // 제출 로직 추가 (예 : API 호출)
}
</스크립트>

<emplate>
  <form @admper.prevent = "handlesubmit">
    <입력 v-model = "form.name"type = "text"자리 표시 자 = "이름"uredght />
    <입력 v-model = "form.email"type = "email"placeholder = "email"필수 />
    <입력 v-model = "form.password"type = "pacception"placeholder = "password"필수 />
    <버튼 유형 = "제출"> 제출 </button>
  </form>
</템플릿>

• @submit.prevent 페이지가 다시로드되는 것을 중지합니다.
• v-model 양방향 바인딩을 제공합니다.

2. 간단한 인라인 검증 (라이브러리 없음)

계산 된 속성 또는 함수를 사용하여 기본 유효성 검사를 수동으로 구현할 수 있습니다.

 <스크립트 설정>
&#39;vue&#39;에서 가져 오기 {ref, calculated}

const form = ref ({{
  이름: &#39;&#39;,
  이메일 : &#39;&#39;,
  비밀번호: &#39;&#39;
})

const errors = computed (() => {
  const errs = {}
  if (! form.value.name) errs.name = &#39;이름이 필요하다&#39;
  if (! form.value.email) {
    errs.email = &#39;이메일이 필요합니다&#39;
  } else if (!/^\ s @\ s \. \ s $/. test (form.value.email)) {
    errs.email = &#39;이메일은 유효하지 않습니다&#39;
  }
  if (! form.value.password || form.value.password.length <6) {
    errs.password = &#39;암호는 6 자 이상이어야합니다&#39;
  }
  반환 오류
})

const isvalid = computed (() => object.keys (errors.value) .length === 0)

const handlesubmit = () => {
  if (isvalid.value) {
    console.log ( &#39;양식은 유효합니다 :&#39;, form.value)
    // 논리를 제출합니다
  } 또 다른 {
    console.log ( &#39;양식은 오류가 있습니다 :&#39;, errors.value)
  }
}
</스크립트>

<emplate>
  <form @admper.prevent = "handlesubmit">
    <입력 v-model = "form.name"type = "text"placeholder = "name" />
    <div v-if = "errors.name"class = "error"> {{errors.name}} </div>

    <입력 v-model = "form.email"type = "email"placeholder = "email" />
    <div v-if = "errors.email"class = "error"> {{errors.email}} </div>

    <입력 v-model = "form.password"type = "password"placeholder = "password" />
    <div v-if = "errors.password"class = "error"> {{errors.password}} </div>

    <버튼 유형 = "제출": disabled = "! isvalid"> 제출 </button>
  </form>
</템플릿>

<스타일>
.Error {
  색상 : 빨간색;
  글꼴 크기 : 0.8EM;
}
</스타일>

이 접근법은 작은 형태에 적합하며 완전히 제어 할 수 있습니다.

3. 유효성 검사 라이브러리 사용 (더 큰 앱에 권장)

복잡한 형태의 경우 스키마 기반 유효성 검사를 위해 yup 와 함께 Veevalidate 와 같은 라이브러리를 사용하십시오.

종속성 설치 :

 npm 설치 yup @vee-validate/rules @vee-validate/form @vee-validate/yup

Veevalidate yup의 예 :

 <스크립트 설정>
&#39;vee-validate&#39;에서 {useform} 가져 오기
&#39;yup&#39;에서 yup로 가져 오기 *

// 스키마 정의
const schema = yup.object ({
  이름 : yup.string (). 필수 ( &#39;이름이 필요하다&#39;),
  이메일 : yup.string (). email ( &#39;invalid email&#39;). 필수 ( &#39;이메일 필요&#39;),
  비밀번호 : yup.string (). min (6, &#39;min 6 문자&#39;). 필수 ( &#39;비밀번호가 필요합니다&#39;)
})

// 양식을 사용합니다
const {definefield, handlesubmit, errors} = useform ({
  ValidationSchema : 스키마
})

const [name, nameattrs] = definefield ( &#39;name&#39;)
const [email, emailattrs] = definefield ( &#39;이메일&#39;)
const [password, passwordattrs] = definefield ( &#39;password&#39;)

const onsubmit = handlesubmit ((값) => {
  Console.log ( &#39;유효한 양식 데이터&#39;, 값)
})
</스크립트>

<emplate>
  <form @admper = "onsubmit">
    <입력 v-model = "name"v-bind = "nameattrs"type = "text"placeholder = "name" />
    <div v-if = "errors.name"class = "error"> {{errors.name}} </div>

    <입력 v-model = "email"v-bind = "emailattrs"type = "email"placeholder = "email" />
    <div v-if = "errors.email"class = "error"> {{errors.email}} </div>

    <입력 v-model = "password"v-bind = "passwordattrs"type = "plactom"자리 표시 자 = "비밀번호" />
    <div v-if = "errors.password"class = "error"> {{errors.password}} </div>

    <버튼 유형 = "제출"> 제출 </button>
  </form>
</템플릿>

이익:

• 재사용 가능한 검증 스키마
• 내장 규칙 (이메일, 최소, 최대 등)
• 비동기 검증 지원
• 더 나은 오류 처리 및 UX

4. 더 나은 양식 UX를위한 팁

• 모든 키 스트로크가 아닌 블러 또는 제출에 오류가 표시됩니다 .
• 양식이 유효하지 않거나 제출 될 때 제출 버튼을 비활성화하십시오 .
• 성공적인 제출 후 양식 재설정 :

   form.value = {이름 : '', 이메일 : '', 암호 : ''}

• 비동기 제출 중에 로딩 상태를 사용하십시오.
• 명확한 오류 메시지를 제공합니다.

---

기본적으로 v-model 및 작은 형태의 수동 점검으로 간단하게 시작하십시오. 복잡성이 커지면 유지 가능하고 확장 가능한 검증을 위해 Veevalidate yup 로 전환하십시오. 설정하는 것은 어렵지 않고 도로를 따라 많은 시간을 절약합니다.

위 내용은 VUE의 양식 및 검증을 처리하는 방법?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!