Cara menggunakan vue dan Element-plus untuk pengesahan borang dan pemprosesan data

Cara menggunakan Vue dan Element Plus untuk pengesahan borang dan pemprosesan data

Pengenalan:
Dalam pembangunan web, pengesahan borang dan pemprosesan data adalah sangat penting. Vue ialah rangka kerja JavaScript yang popular, dan Element Plus ialah pustaka komponen UI berasaskan Vue Gabungan mereka dapat memudahkan proses pengesahan borang dan pemprosesan data dengan berkesan. Artikel ini akan memperkenalkan cara menggunakan Vue dan Element Plus untuk melaksanakan pengesahan borang dan pemprosesan data serta memberikan contoh kod yang berkaitan.

1. Pemasangan dan penggunaan Element Plus

Untuk menggunakan Element Plus, anda perlu memasangnya terlebih dahulu. Element Plus boleh dipasang melalui npm atau yarn Operasi khusus adalah seperti berikut:

1. Buka terminal dan tukar ke direktori akar projek
2. Lakukan arahan berikut untuk memasang Element Plus:

npm i element-plus -S

atau

rree

Selepas pemasangan selesai, anda masih perlu Memperkenalkan gaya Element Plus dan perpustakaan komponen ke dalam fail kemasukan projek Vue (biasanya main.js):

yarn add element-plus

2.1 Pengesahan Borang

Element Plus menyediakan satu siri peraturan pengesahan borang, termasuk diperlukan, min, maks, e-mel dll. Pengesahan borang boleh dilakukan dengan menambahkan peraturan pengesahan pada kawalan borang, dan Element Plus secara automatik akan menjana gesaan ralat yang sepadan berdasarkan kandungan peraturan pengesahan.

Berikut ialah contoh yang menunjukkan cara menggunakan ciri pengesahan borang Element Plus dalam borang:

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

<el-form :model="form" :rules="rules" ref="form">
  <el-form-item label="用户名" prop="username">
    <el-input v-model="form.username"></el-input>
  </el-form-item>
  <el-form-item label="密码" prop="password">
    <el-input type="password" v-model="form.password"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm">提交</el-button>
    <el-button @click="resetForm">重置</el-button>
  </el-form-item>
</el-form>

Dalam kod di atas, kami mula-mula mencipta objek reaktif menggunakan fungsi refborang , digunakan untuk mengikat data borang. Kemudian, kami menentukan peraturan pengesahan untuk borang dengan mentakrifkan peraturan. ref函数创建了一个响应式对象form，用于绑定表单的数据。然后，我们通过定义rules来指定表单的验证规则。

在表单中的每一个需要验证的输入项（如用户名和密码）都需要通过prop属性来关联到对应的验证规则。然后，在提交表单时，我们可以通过调用validate方法来进行表单的验证，并根据验证的结果执行相关的操作。

2.2 数据处理

在表单验证通过后，我们通常需要将表单的数据进行处理或发送给服务器。在Vue中，可以通过使用methods来定义相关的处理函数，并在需要的时候调用这些函数。

下面是一个示例，展示了如何对表单数据进行处理：

import { ref } from 'vue'
import { ElMessage } from 'element-plus'

export default {
  setup() {
    const form = ref({
      username: '',
      password: ''
    })

    const rules = ref({
      username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { min: 3, max: 6, message: '用户名长度在3到6个字符之间', trigger: 'blur' }
      ],
      password: [
        { required: true, message: '请输入密码', trigger: 'blur' }
      ]
    })

    const submitForm = () => {
      ref.value.validate(valid => {
        if (valid) {
          // 表单验证通过，可以进行数据处理
          // 在这里可以发送网络请求，或者进行其他操作

          ElMessage.success('提交成功')
        } else {
          ElMessage.error('表单验证失败')
          return false
        }
      })
    }

    const resetForm = () => {
      ref.value.resetFields()
    }

    return {
      form,
      rules,
      submitForm,
      resetForm
    }
  }
}

在上面的示例中，我们通过解构赋值将form.value中的username和password

Setiap item input dalam borang yang perlu disahkan (seperti nama pengguna dan kata laluan) perlu dikaitkan dengan peraturan pengesahan yang sepadan melalui atribut prop. Kemudian, apabila menyerahkan borang, kami boleh mengesahkan borang dengan memanggil kaedah sahkan dan melaksanakan operasi berkaitan berdasarkan hasil pengesahan.

2.2 Pemprosesan Data

🎜Selepas borang disahkan, biasanya kami perlu memproses atau menghantar data borang ke pelayan. Dalam Vue, anda boleh menggunakan kaedah untuk mentakrifkan fungsi pemprosesan yang berkaitan dan memanggil fungsi ini apabila diperlukan. 🎜🎜Berikut ialah contoh yang menunjukkan cara memproses data borang: 🎜

import { ref } from 'vue'
import { ElMessage } from 'element-plus'

export default {
  setup() {
    const form = ref({
      username: '',
      password: ''
    })

    const submitForm = () => {
      // 省略了表单验证的代码...

      // 处理表单数据
      const { username, password } = form.value
      // 在这里可以对表单数据进行格式化或者其他操作
      // ...

      // 发送数据给服务器
      // ...

      ElMessage.success('提交成功')
    }

    return {
      form,
      submitForm
    }
  }
}

🎜Dalam contoh di atas, kami menggunakan tugasan memusnahkan kepada nama pengguna dalam form.value dan kata laluan diekstrak, yang kemudiannya boleh diproses atau dihantar ke pelayan. Malah, kami boleh melakukan sebarang operasi pemprosesan data yang diperlukan dalam fungsi ini. 🎜🎜Kesimpulan: 🎜Gabungan Vue dan Element Plus dengan mudah boleh melaksanakan pengesahan borang dan pemprosesan data, yang sangat praktikal apabila membangunkan aplikasi web. Dengan menambahkan peraturan pengesahan pada kawalan borang, kami boleh mengesahkan apabila pengguna menyerahkan borang dan melaksanakan operasi yang sepadan berdasarkan hasil pengesahan. Pada masa yang sama, kami boleh memproses lagi data borang dalam fungsi pemprosesan data atau menghantarnya ke pelayan. Gabungan ciri ini membolehkan kami mengendalikan pengesahan borang dan pemprosesan data dengan lebih cekap. 🎜

Atas ialah kandungan terperinci Cara menggunakan vue dan Element-plus untuk pengesahan borang dan pemprosesan data. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!