Cara menggunakan Vue dan Element-UI untuk melaksanakan logik pengesahan kompleks borang

Cara menggunakan Vue dan Element-UI untuk melaksanakan logik pengesahan kompleks borang

Pengenalan:
Dalam membangunkan aplikasi web, pengesahan borang adalah keperluan yang kerap berlaku. Pengesahan borang boleh memastikan bahawa data yang dimasukkan pengguna mematuhi format atau peraturan tertentu, dengan itu meningkatkan ketepatan data dan kestabilan aplikasi. Artikel ini akan memperkenalkan cara menggunakan Vue dan Element-UI untuk melaksanakan logik pengesahan kompleks borang dan menyediakan contoh kod yang berkaitan kepada pembaca.

1 Pengenalan kepada Element-UI
Element-UI ialah perpustakaan komponen desktop yang dibangunkan berdasarkan Vue.js Ia menyediakan satu siri komponen UI yang mudah digunakan dan cantik, seperti jadual, borang, butang, dll. Element-UI mempunyai banyak fungsi pengesahan borang terbina dalam, yang boleh melaksanakan logik pengesahan mudah dengan mudah.

2. Prinsip Asas Pengesahan Borang
Prinsip asas pengesahan borang adalah untuk mendapatkan input nilai oleh pengguna dengan memantau peristiwa perubahan elemen borang, dan kemudian mengesahkannya mengikut satu siri peraturan pratetap. Jika pengesahan lulus, status elemen borang akan ditukar kepada "Pengesahan Lulus", jika tidak mesej ralat akan dipaparkan dan status elemen borang akan ditukar kepada "Pengesahan Gagal".

3 Gunakan Element-UI untuk pengesahan borang yang ringkas
Pertama, kita perlu memperkenalkan komponen Form dan FormItem Element-UI, dan kemudian gunakan komponen ini dalam templat Vue untuk membina borang. Dalam elemen borang yang ditentukan, anda boleh menentukan peraturan pengesahan dengan menetapkan atribut peraturan, seperti yang ditunjukkan di bawah:

<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="validateForm">提交</el-button>
</el-form-item>

Objek borang dalam data menyimpan nilai setiap kotak input dalam bentuk, dan objek peraturan mentakrifkan setiap input Peraturan pengesahan bingkai.

Dalam data Vue, kita boleh mentakrifkan objek bentuk dan peraturan seperti berikut:

data() {
return {

form: {
  username: '',
  password: ''
},
rules: {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 10, message: '长度在3到10个字符', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 20, message: '长度在6到20个字符', trigger: 'blur' }
  ]
}

}
}
Dalam objek peraturan, kita boleh menentukan berbilang peraturan pengesahan, seperti yang diperlukan, Sekatan panjang , dsb. Atribut mesej mentakrifkan mesej ralat dan atribut pencetus mentakrifkan peristiwa yang dicetuskan oleh pengesahan.

Dalam kaedah Vue, kami boleh mentakrifkan kaedah validateForm untuk mengesahkan borang Kodnya adalah seperti berikut:

kaedah: {
validateForm() {

this.$refs.myForm.validate((valid) => {
  if (valid) {
    this.$message({
      type: 'success',
      message: '表单校验通过'
    })
  } else {
    this.$message.error('表单校验失败')
    return false
  }
})

}
}
Dalam kaedah validateForm.$, kami memanggil ini. refs. kaedah myForm.validate() untuk mencetuskan pengesahan borang. Keputusan pengesahan dihantar melalui fungsi panggil balik yang sah Jika pengesahan lulus, mesej kejayaan akan dipaparkan, jika tidak mesej kegagalan akan dipaparkan.

4. Laksanakan logik pengesahan yang kompleks
Kadangkala, kita perlu melaksanakan logik pengesahan yang lebih kompleks, seperti membandingkan sama ada nilai dua kotak input adalah sama, mengesahkan alamat e-mel, mengesahkan nombor telefon mudah alih, dsb. Dalam kes ini, kita boleh menggunakan peraturan pengesahan tersuai.

Pertama, dalam data Vue, kami boleh mentakrifkan peraturan pengesahan tersuai, seperti yang ditunjukkan di bawah:

data() {
return {

rules: {
  email: [
    { required: true, message: '请输入邮箱地址', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { validator: this.validatePassword, trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, message: '请再次输入密码', trigger: 'blur' },
    { validator: this.validateConfirmPassword, trigger: 'blur' }
  ]
}

}
}
Dalam objek peraturan, kami boleh menentukan peraturan Pengesahan tersuai, di mana pengesah atribut mentakrifkan fungsi pengesahan.

Kemudian, dalam kaedah Vue, kita boleh mentakrifkan fungsi pengesahan tersuai seperti berikut:

kaedah: {
validatePassword(rule, value, callback) {

if (value.length < 6 || value.length > 20) {
  callback(new Error('密码长度在6到20个字符'))
} else {
  callback()
}

},
validateConfirmPassword(rule)

reee value

}
}
Dalam fungsi pengesahan tersuai, kita boleh lulus keputusan pengesahan dengan memanggil panggilan balik fungsi panggil balik. Jika pengesahan lulus, panggil balik() dipanggil, jika tidak panggil balik(Ralat baharu('mesej ralat')) dipanggil.

Akhir sekali, gunakan peraturan pengesahan tersuai dalam templat Vue, seperti yang ditunjukkan di bawah:

dalam penyesuaian Antara peraturan pengesahan , kita boleh menggunakan atribut jenis untuk menentukan peraturan pengesahan yang telah dibina oleh Element-UI. Contohnya, peraturan e-mel boleh dilaksanakan dengan menetapkan atribut jenis kepada 'e-mel'.

Ringkasan:
Artikel ini memperkenalkan cara menggunakan Vue dan Element-UI untuk melaksanakan logik pengesahan borang yang kompleks. Melalui komponen Borang dan FormItem yang disediakan oleh Element-UI, kami boleh membina borang dengan mudah dan menentukan peraturan pengesahan dengan menetapkan atribut peraturan. Untuk logik pengesahan yang kompleks, kami boleh melaksanakannya dengan menyesuaikan peraturan pengesahan dan fungsi pengesahan. Saya harap artikel ini akan membantu semua orang memahami dan menggunakan Vue dan Element-UI untuk pengesahan borang.

Sampel kod:
Berikut ialah kod sampel lengkap:

<script><br>export default {<br> data() {</script>

return {
  form: {
    username: '',
    password: ''
  },
  rules: {
    username: [
      { required: true, message: '请输入用户名', trigger: 'blur' },
      { min: 3, max: 10, message: '长度在3到10个字符', trigger: 'blur' }
    ],
    password: [
      { required: true, message: '请输入密码', trigger: 'blur' },
      { min: 6, max: 20, message: '长度在6到20个字符', trigger: 'blur' }
    ]
  }
}

},
methods: {

validateForm() {
  this.$refs.myForm.validate((valid) => {
    if (valid) {
      this.$message({
        type: 'success',
        message: '表单校验通过'
      })
    } else {
      this.$message.error('表单校验失败')
      return false
    }
  })
}

}
}

以上就是使用Vue和Element-UI实现表单的复杂校验逻辑的一些简单介绍和代码示例。希望本文对于读者能够有所帮助，对于Vue和Element-UI有更深层次的理解和应用。谢谢阅读！

Atas ialah kandungan terperinci Cara menggunakan Vue dan Element-UI untuk melaksanakan logik pengesahan kompleks borang. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!