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:

d477f9ce7bf77f53fbcf36bec1b69b7a
a51093cfdf79e73df1581bd23e14a5ff

<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>

ffdb25bf2f9d37a252c9d16e8e43c40c
21c97d3a051048b8e55e3c8f199a54b2
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:

9014d0033feee43b719f42bc658e5f70
ee46f57b36f712aa71e38a64fe852cca
3d2371aff8fe724e1b7407502d150d7a
188bc5ba182c1014d86fa43f3b857446
0fef7dbb813f9e81977b6ba14582c5ba3950f2ccdbe6d532f43d14c598b37daa
3d2371aff8fe724e1b7407502d150d7a
628bd69b8991308dea45bb88375f4a1a
8f4226748e5b021d2e67e8e4541dcc883950f2ccdbe6d532f43d14c598b37daa
3d2371aff8fe724e1b7407502d150d7a
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:

d477f9ce7bf77f53fbcf36bec1b69b7a

<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>

ffdb25bf2f9d37a252c9d16e8e43c40c
21c97d3a051048b8e55e3c8f199a54b2

3f1c4e4b6b16bbbd69b2ee476dc4f83a
export default {
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' }
    ]
  }
}

},
methods: {

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

}
}
2cacc6d41bbb37262a98f745aa00fbf0

以上就是使用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!