Rumah > hujung hadapan web > uni-app > teks badan

Cara melaksanakan pengesahan borang dan pengesahan data dalam uniapp

WBOY
Lepaskan: 2023-10-20 17:02:08
asal
1418 orang telah melayarinya

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: '',
  ...
},
Salin selepas log masuk

}

},#🎜 🎜#

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'
    })
  }
})
Salin selepas log masuk

}
}# 🎜🎜#
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:

#🎜 🎜#

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>
Salin selepas log masuk
#🎜🎜 #

eksport lalai {
data() {

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

},
kaedah: {

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

}
}# 🎜🎜#

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!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!