uniapp에서 양식 검증 및 데이터 검증을 구현하는 방법

uniapp에서 양식 유효성 검사 및 데이터 유효성 검사를 구현하는 방법

요약: uniapp 개발에서는 양식 유효성 검사와 데이터 유효성 검사가 필수적인 부분입니다. 이 글에서는 uniapp에서 폼 유효성 검사와 데이터 검증을 구현하는 방법을 자세히 소개하고 구체적인 코드 예제를 제공합니다.

1. uni-validate 플러그인 소개

Uni-validate는 uniapp에서 공식 제공하는 폼 검증 플러그인으로, 간편하게 폼 검증과 데이터 검증을 구현할 수 있습니다. 먼저, uniapp 프로젝트의 루트 디렉터리에 있는 package.json 파일의 종속성에 uni-validate 플러그인의 소개 코드를 추가합니다:

"종속성": {
...
"uni-validate": "^1.0.0 "
}

그런 다음 프로젝트 루트 디렉터리에서 npm install 명령을 실행하여 플러그인을 설치합니다.

npm install uni-validate --save

두 번째, uni-validate 플러그 도입 및 사용 -페이지에

양식 검증을 사용해야 하는 경우 데이터 검증 페이지에서 먼저 uni-validate 플러그인을 도입하세요:

import uniValidate from '@/uni_modules/uni-validate/index.js'

그런 다음 페이지 데이터에 양식 유효성 검사 규칙 개체를 만듭니다. 예:

data() {
return {

formRules: {
  username: [
    { required: true, message: '用户名不能为空', trigger: 'blur' },
    ...
  ],
  password: [
    { required: true, message: '密码不能为空', trigger: 'blur' },
    ...
  ],
  ...
},
formData: {
  username: '',
  password: '',
  ...
},

}
},

다음으로 페이지의 메서드에 양식 유효성 검사 메서드를 추가합니다.

메서드: {
// 양식 제출
formSubmit() {

this.$refs['form'].validate(valid => {
  if (valid) {
    // 表单验证通过，执行表单提交操作
    ...
  } else {
    // 表单验证不通过，弹出提示
    uni.showToast({
      title: '请填写必填项',
      icon: 'none'
    })
  }
})

}
}

마지막으로 페이지 템플릿에서 양식 유효성 검사가 필요한 입력 구성 요소에 해당 유효성 검사 규칙을 추가합니다. 예:

양식에서 제출 버튼 구성 요소에 클릭 이벤트를 추가합니다:

제출

3. 코드 예제

다음은 전체 예제 코드입니다. uni-validate 플러그인을 사용하여 uniapp에서 양식 유효성 검사 및 데이터 확인을 구현하는 방법을 보여줍니다.

// index.vue