Bagaimana untuk melaksanakan komponen pengesahan borang H5 dalam vue3

Perenderan

Penerangan

adalah berdasarkan vue.js dan tidak bergantung pada pemalam atau perpustakaan lain yang kekal konsisten dengannya elemen-ui. Pelaksanaan dalaman telah membuat beberapa pelarasan untuk perbezaan mudah alih.

Platform pembinaan semasa dibina menggunakan perancah rasmi uni-app Kerana kebanyakan terminal mudah alih pada masa ini mempunyai dua jenis: h6 dan 微信小程序, jadi ia sangat sesuai untuk pemilihan teknologi untuk menjalankan satu set. kod pada berbilang terminal.

Idea pelaksanaan

API Teras: Gunakan menyediakan dan menyuntik, sepadan dengan <form></form> dan <form-item></form-item>.

• Dalam komponen <form></form>, pembolehubah (tatasusunan) digunakan secara dalaman untuk menyimpan semua <form-item></form-item> kejadian, dan pada masa yang sama, data yang akan dipindahkan didedahkan melalui provide; menggunakan <form-item></form-item> secara dalaman untuk menerima data yang disediakan oleh komponen induk, dan akhirnya menyerahkan sifat dan kaedahnya sendiri kepada komponen induk. Satu-satunya perkara yang perlu dilakukan dalam inject

• ialah mendengar data terikat, dan kemudian memanggil pelbagai kaedah pengesahan yang sepadan dengan <form></form> supaya sebarang status pengesahan ditulis dalam <form-item></form-item> termasuk paparan gaya; memandangkan anda boleh mendapatkan data yang terikat oleh komponen induk, untuk beberapa tetapan gaya biasa, anda secara semula jadi boleh menggunakan <form-item></form-item> untuk mendapatkan nilai computed komponennya sendiri atau prop dahulu terikat dengan nilai komponen induk komponen sendiri juga boleh memanggilnya. propprop

Oleh kerana acara penghantaran tersuai
• ,

  dan vue3 telah dialih keluar daripada $on, jadi di sini kami menggunakan $off, $emit dan sebaliknya; perbezaannya ialah mekanisme penghantaran acara ini adalah global dan tidak mengikut keunikan komponen, jadi apabila menambah atau mengalih keluar acara, anda perlu menetapkan nilai unik dalam nama acara di sini uni.$on komponen Pembolehubah yang terkumpul uni.$off setiap kali ia dipanggil, dan kemudian menetapkannya sebagai nama acara dan menghantarnya ke dalam uni.$emit, supaya kepastian <form></form> dan 1 dapat dijamin. <form-item></form-item><form></form><form-item></form-item>

  Perbezaan daripada komponen bentuk elemen-ui

Pengesahan borang tidak lagi menetapkan gaya kotak input dan sebarang bentuk borang, tetapi melalui penyesuaian Ubah suai gaya untuk memaparkan gesaan pengesahan; ini sangat sesuai dengan perubahan yang tidak berkesudahan dalam

draf reka bentuk UI
• pada terminal mudah alih, sebagai contoh, borang yang sama mempunyai dua gaya kotak input yang berbeza; masa, ia tidak menjejaskan gaya lain Penggunaan perpustakaan, kerana pengesahan borang

  tidak akan menjejaskan mana-mana elemen dalam slot. <form-item></form-item>

  Pilihan data pengesahan borang hanya mengekalkan medan
(lihat di bawah kerana status pengesahan komponen borang dialih keluar,
• tetapan acara ini tidak diperlukan ;

  digantikan dengan 4 Ambil perhatian bahawa dalam program mini WeChat, parameter yang diluluskan oleh mana-mana komponen akan ditapis untuk meninggalkan jenis trigger asas, jadi pattern ini digunakan dalam persekitaran program mini Apabila , tambah reg pada penghujung, perkara yang sama berlaku untuk json. reg.toString()validator

  /** 表单规则类型 */
  export interface TheFormRulesItem {
    /** 是否必填项 */
    required?: boolean
    /** 提示字段 */
    message?: string
    /** 指定类型 */
    type?: "number" | "array"
    /**
     * 自定义的校验规则（正则）
     * - 考虑到微信一些特殊的抽风机制，在微信小程序中，除`number|string|object|undefined|null`这几个基础类型外，其他类型是会被过滤掉，所以这里在写正则的时候，在末尾加上`.toString()`即可
     */
    reg?: string // | RegExp
  }
  
  /** 表单规则类型 */
  export type TheFormRules = { [key: string]: Array<TheFormRulesItem> };

Saya tidak tahu sama ada anda pernah menemui dalam pengesahan bentuk panjang yang lalu, selepas mengklik pengesahan, kerana halaman itu terlalu panjang, jadi anda tidak tahu item borang yang mana Jika pengesahan gagal, anda perlu menyemak imbas dan mencari item yang sepadan untuk mengoptimumkan pengalaman pengesahan borang sebelumnya, operasi menatal ke kedudukan yang sepadan selepas pengesahan ditambah di sini, yang lebih banyak; selaras dengan pengalaman pengguna terminal mudah alih.

• Mekanisme pencetus pengesahan borang: Kita semua tahu bahawa mekanisme pencetus
adalah untuk memilih masa pencetus dengan menyatakan
• , jadi selepas saya mengeluarkannya di sini, ini bermakna bahawa tiada operasi sedemikian untuk dicetuskan; dan apa yang saya pilih adalah untuk secara aktif memanggil kaedah pengesahan

  dan element-ui untuk mencetuskan pengesahan masa nyata Apabila pengesahan gagal, simpan yang gagal dalam pembolehubah, dan kemudian menentukurkannya setiap kali data berubah. Selepas pengesahan diluluskan, item pengesahan masa nyata akan dialih keluar dengan cara ini, berbanding dengan trigger peristiwa mengikat, pengesahan masa nyata akan menjimatkan banyak panggilan kod dan mekanisme berjalan, dan kod boleh menjadi lebih elegan dan diperkemas. validate

非uni-app平台的移植

除了更换标签之外，几乎不用做任何的修改就可以复制粘贴到其他项目中去，唯一要修改的就是自定义事件uni.$on、uni.$off和uni.$emit；这里可以自己实现，又或者用其他库去代替，js实现自定义事件派发代码如下：

function moduleEvent() {
  /** 
  * 事件集合对象
  * @type {{[key: string]: Array<Function>}}
  */
  const eventInfo = {};

  return {
    /**
     * 添加事件
     * @param {string} name 事件名
     * @param {Function} fn 事件执行的函数
     */
    on(name, fn) {
      if (!eventInfo.hasOwnProperty(name)) {
        eventInfo[name] = [];
      }
      if (!eventInfo[name].some(item => item === fn)) {
        eventInfo[name].push(fn);
      }
    },

    /**
     * 解绑事件
     * @param {string} name 事件名
     * @param {Function} fn 事件绑定的函数
     */
    off(name, fn) {
      const fns = eventInfo[name];
      if (fns && fns.length > 0 && fn) {
        for (let i = 0; i < fns.length; i++) {
          const item = fns[i];
          if (item === fn) {
            fns.splice(i, 1);
            break;
          }
        }
      } else {
        console.log("[moduleEvent] => 没有要解绑的事件");
      }
    },

    /**
     * 调用事件
     * @param {string} name 事件名
     * @param {any} params 事件携带参数
     */
    dispatch(name, params) {
      const fns = eventInfo[name];
      if (fns && fns.length > 0) {
        for (let i = 0; i < fns.length; i++) {
          const fn = fns[i];
          fn(params);
        }
      } else {
        console.log("[moduleEvent] => 没有要执行的事件");
      }
    },
  }
}

调用moduleEvent()之后，用变量调用即可，注意当前变量要作为内存常驻使用。

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan komponen pengesahan borang H5 dalam vue3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!