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

<input v-model="formData.username" :rules="formRules.username" placeholder="请输入用户名" />
<input v-model="formData.password" :rules="formRules.password" placeholder="请输入密码" />
<button form-type="submit" @click="formSubmit">提交</button>

<script><br>'@/uni_modules/uni-validate/index.js'에서 uniValidate 가져오기</script>

export 기본 {
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) {
      // 表单验证通过，执行表单提交操作
      console.log('表单验证通过')
    } else {
      // 表单验证不通过，弹出提示
      uni.showToast({
        title: '请填写必填项',
        icon: 'none'
      })
    }
  })
}

}
}

요약: 단일 검증 플러그인을 도입하고 양식 검증 규칙 객체를 결합함으로써 양식 검증 및 데이터 검증 기능을 유니앱에서 쉽게 구현할 수 있습니다. 위의 코드 예제를 통해 uniapp 프로젝트에서 양식 유효성 검사 및 데이터 유효성 검사 기능을 신속하게 적용하고 유연하게 조정할 수 있습니다.

위 내용은 uniapp에서 양식 검증 및 데이터 검증을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!