Cara melaksanakan pengesahan borang dan pengesahan data dalam uniapp

Cara melaksanakan pengesahan borang dan pengesahan data dalam uniapp

Abstrak: Dalam pembangunan uniapp, pengesahan borang dan pengesahan data adalah penting Kurang bahagian. Artikel ini akan memperkenalkan secara terperinci cara melaksanakan pengesahan borang dan pengesahan data dalam uniapp dan memberikan contoh kod khusus.

1. Memperkenalkan pemalam uni-validate

uni-validate ialah pemalam pengesahan borang yang disediakan secara rasmi oleh uniapp, yang boleh melaksanakan pengesahan borang dan pengesahan data dengan mudah . Mula-mula, tambahkan kod pengenalan pemalam uni-validate dalam kebergantungan fail package.json dalam direktori akar projek uniapp:

"dependencies": {
. ..#🎜🎜 # "uni-validate": "^1.0.0"
}

Kemudian laksanakan arahan pemasangan npm dalam direktori akar projek untuk memasang pemalam: # 🎜🎜#

npm pasang uni -validate --save

2 Perkenalkan dan gunakan pemalam uni-validate dalam halaman

Di halaman yang memerlukan. untuk menggunakan pengesahan borang dan pengesahan data, mula-mula perkenalkan pemalam uni-validate:

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

Kemudian buat a bentuk objek peraturan pengesahan dalam data halaman, contohnya:

data() {

return {

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

}

},#🎜 🎜#

Seterusnya, dalam kaedah halaman Tambah kaedah pengesahan borang:

kaedah: {

// Penyerahan borang

borangSubmit() {#🎜🎜 #

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

}
}# 🎜🎜#
Akhir sekali, dalam templat halaman, tambahkan peraturan pengesahan yang sepadan pada komponen input yang memerlukan pengesahan borang, contohnya:

Tambah acara klik pada komponen butang penyerahan borang:

#🎜 🎜#Submit

3 Contoh Kod

Berikut adalah lengkap contoh kod yang menunjukkan cara menggunakan pemalam uni-validate untuk melaksanakannya dalam fungsi pengesahan Borang dan pengesahan data 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>

#🎜🎜 #

eksport lalai {
data() {

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

},
kaedah: {

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

}
}# 🎜🎜#

Ringkasan: Dengan memperkenalkan pemalam uni-sah dan menggabungkannya objek peraturan pengesahan, pengesahan borang dan fungsi pengesahan data boleh dilaksanakan dengan mudah dalam uniapp. Melalui contoh kod di atas, anda boleh menggunakan dan melaraskan fungsi pengesahan borang dan pengesahan data dengan cepat dalam projek uniapp anda dengan cepat.

Atas ialah kandungan terperinci Cara melaksanakan pengesahan borang dan pengesahan data dalam uniapp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!