Verification of complex forms

Verification of complex forms

Kategori lainnya

1.0.0

Unduh

latar belakang

Saat kita melakukan sistem manajemen backend, kita sering menemukan bentuk yang sangat kompleks:

Ada terlalu banyak item formulir
Menampilkan item formulir yang berbeda di bawah berbagai tipe formulir
Item formulir tertentu menonaktifkan validasi dalam kondisi tertentu
Setiap item formulir juga akan memiliki logika kustom lainnya, seperti kotak masukan yang dapat menyisipkan variabel templat, menampilkan jumlah karakter masukan, mengunggah dan menampilkan gambar, dan teks kaya . . .
Dalam situasi rumit ini, lengkapi verifikasi dan penyerahan formulir
Anda dapat melihat contoh spesifik: Banyak fungsi sepele yang dihilangkan dalam contoh, dan hanya keseluruhan kerangka bentuk kompleks yang dipertahankan untuk menunjukkan solusinya.

Opsi 1: Dalam file `vue`

Semua tampilan dan penyembunyian item formulir, validasi, akuisisi data, pengiriman, penyesuaian, dan logika lainnya disatukan

Berdasarkan tipe formulir, gunakan v-if/v-show untuk menangani tampilan dan penyembunyian item formulir.
Dalam validasi kustom elementui , tentukan apakah item formulir divalidasi berdasarkan jenis formulir
Menurut jenis formulir, dapatkan data yang berbeda dan kirimkan ke antarmuka yang berbeda
Semua logika khusus lainnya

kekurangan

kekacauan
kekacauan
Masih berantakan
File vue dapat dengan mudah berisi 2000 baris
Ketika saya mencoba menambahkan tipe formulir baru, saya menemukan bahwa saya tidak punya jenis formulir apa pun. dari. Turun. tangan.

Opsi 2: Pisahkan komponen

Faktanya, mudah untuk memikirkan pemisahan beberapa subformulir dari tipe yang sesuai menurut tipe formulir yang berbeda . Namun saya masih menemui banyak masalah dalam praktiknya: verifikasi formulir orang tua-anak, memperoleh keseluruhan data yang dikirimkan , dll., dan merangkum serangkaian solusi:

1. Subkomponen

Semua komponen anak harus berisi dua metode validate dan getData agar komponen induk dapat dipanggil.

(1) `validate` metode

Digunakan untuk memverifikasi item formulir dari komponennya sendiri dan mengembalikan objek promise

 vaildate ( ) {
    // 返回`elementUI`表单验证的结果（为`promise`对象）
    return this . $refs [ "ruleForm" ] . validate ( ) ;
} ,

(2) metode `getData`

Menyediakan data dari komponen anak

 getData ( ) {
    // 返回子组件的form
    return this . ruleForm ;
} ,

2. Komponen induk

(1) Mode strategi

Gunakan pola strategi untuk menyimpan dan mendapatkan ref subformulir (metode yang digunakan untuk mendapatkan subformulir) dan fungsi kirim . Banyak penilaian if-else yang dihilangkan.

data: {
  // type和ref名称的映射
  typeRefMap : {
      1 : "message" ,
      2 : "mail" ,
      3 : "apppush"
  } ,
  // type和提交函数的映射。不同类型，接口可能不同
  typeSubmitMap : {
      1 : data => alert ( `短信模板创建成功${ JSON . stringify ( data ) } ` ) ,
      2 : data => alert ( `邮件模板创建成功${ JSON . stringify ( data ) } ` ) ,
      3 : data => alert ( `push模板创建成功${ JSON . stringify ( data ) } ` )
  } ,
}

(2) metode `submit`

Digunakan untuk validasi formulir komponen induk-anak, memperoleh data keseluruhan, dan memanggil fungsi pengiriman tipe saat ini untuk mengirimkan data

Karena metode validate verifikasi formulir elementUI dapat mengembalikan hasil promise , Anda dapat menggunakan karakteristik promise untuk menangani verifikasi formulir induk dan anak. Misalnya, fungsi then dapat mengembalikan objek promise lainnya, dan catch dapat memperoleh reject dan Promise.all yang then di atasnya.

Formulir anak akan diverifikasi hanya setelah formulir induk diverifikasi, dan ada urutannya.

 // 父表单验证通过才会验证子表单，存在先后顺序
submitForm ( ) {
    const templateType = this . typeRefMap [ this . indexForm . type ] ;
    this . $refs [ "indexForm" ]
    . validate ( )
    . then ( res => {
        // 父表单验证成功后，验证子表单
        return this . $refs [ templateType ] . vaildate ( ) ;
    } )
    . then ( res => {
        // 全部验证通过
        // 获取整体数据
        const reqData = {
            // 获取子组件数据
            ... this . $refs [ templateType ] . getData ( ) ,
            ... this . indexForm
        } ;
        // 获取当前表单类型的提交函数，并提交
        this . typeSubmitMap [ this . indexForm . type ] ( reqData ) ;
    } )
    . catch ( err => {
        console . log ( err ) ;
    } ) ;
} ,

Formulir induk dan formulir anak diverifikasi bersama

 submitForm1 ( ) {
  const templateType = this . typeRefMap [ this . indexForm . type ] ;
  const validate1 = this . $refs [ "indexForm" ] . validate ( ) ;
  const validate2 = this . $refs [ templateType ] . vaildate ( ) ;
  // 父子表单一起验证
  Promise . all ( [ validate1 , validate2 ] )
    . then ( res => {
      // 都通过时，发送请求
      const reqData = {
        ... this . $refs [ templateType ] . getData ( ) ,
        ... this . indexForm
      } ;
      this . typeSubmitMap [ this . indexForm . type ] ( reqData ) ;
    } )
    . catch ( err => {
      console . log ( err ) ;
    } ) ;
} ,

Lihat proyek online, proyek github, dan kode komponen

Ringkasan: Saya telah menemukan bentuk kompleks seperti ini di banyak proyek dan menggunakan banyak solusi. Di sini saya telah merangkum solusi yang relatif rapi dan sederhana. Tentu saja masih banyak solusi lainnya, misalnya metode pengiriman data dapat ditempatkan di setiap sub-komponen, dan data item formulir publik diteruskan ke sub-komponen melalui props untuk pengiriman . Jika ada solusi lain yang lebih sederhana, Anda dapat berkomentar atau mengirimkan issue di github

Di luar topik: Setelah membaca akun arsitek front-end sendiri: Pertanyaan dan jawaban N tentang jalur pertumbuhan seorang insinyur front-end, itu banyak menginspirasi saya. Ketika Anda bingung tentang arah dan prospek teknis Anda, atau ketika Anda mengeluh bahwa proyek Anda terlalu rendah, atau ketika Anda mengeluh bahwa Anda melakukan pekerjaan yang berulang-ulang setiap hari, atau ketika Anda kewalahan oleh munculnya teknologi baru yang tiada henti setiap hari , Anda sebaiknya memperhatikan proyek Anda dengan serius .

Mungkinkah menemukan kembali roda untuk tugas-tugas yang diulang setiap hari?
Jumlah teknologi yang ada terlalu sedikit. Bisakah kita beralih ke teknologi baru dengan lancar dan meningkatkan efisiensi pengembangan?
Tidak peduli berapa banyak teknologi baru yang Anda pelajari, pada akhirnya Anda akan kembali dan menerapkannya ke dalam proyek.

Mulai dari titik-titik kesulitan dalam proses kerja dan proyek , Anda akan membuat kemajuan lebih cepat dalam mempraktikkan, merangkum, dan memecahkan masalah praktis .