How to implement H5 form validation component in vue3

Rendering

Description

Based on vue.js, does not rely on other plug-ins or libraries; basic functions are maintained Consistent with element-ui, some internal implementation adjustments have been made for mobile differences.

The current construction platform is built using the uni-app official scaffolding. Because most of the current mobile terminals are h6 and WeChat applet, so one set of code can run on multiple terminals. Very suitable for technical selection.

Implementation ideas

Core api: Use provide and inject, corresponding to <form></form> and <form-item></form-item>.

• In the <form></form> component, a variable (array) is used internally to store all <form-item></form-item> instances At the same time, the data to be transferred is exposed through provide; the <form-item></form-item> component uses inject internally to receive the data provided by the parent component data, and finally submits its own properties and methods to the parent component.

• ##

  All that needs to be done is to listen to the bound data and then call the corresponding 's various verification methods; so any verification status is written in , including the display of styles; since the data bound to the parent component can be obtained, for some common styles Naturally, you can use computed to get the prop value of your own component or the prop value bound by the parent component; correspondingly, the value bound by the parent component The form data can be used to verify the current item with its own prop. Finally, the parent component can call the corresponding method. Of course, its own component can also call it.
• Because custom dispatch events

  $on, $off, $ have been removed from vue3 emit, so uni.$on, uni.$off and uni.$emit are used instead; the difference is that this event The dispatch mechanism is global and does not follow the uniqueness of the component, so when adding or removing events, you need to set a unique value in the event name; here I define a variable in the

  component, Each time it is called, 1 is accumulated, then set as the event name and passed to internally, so as to ensure And the certainty of .

Difference from element-ui form component

• Form validation no longer sets the style of the input box and any form form, but through customization Modify the style to display the verification prompt; this is very conducive to the endless

  UI design draft changes on the mobile terminal, such as the same form, there are two different styles of input boxes; at the same time, it does not affect other styles The use of the library, because the form validation will not affect any elements in the slot.

• The form validation data option only retains

  4 fields (see below), because the validation state of the form component is removed, so triggerThis event setting is no longer needed; pattern is replaced by reg. Note that in the WeChat applet, the parameters passed by any component will be filtered and the basics will be left. json type, so when this reg is used in a mini program environment, .toString() must be added at the end, validator is the same reason.

/** 表单规则类型 */
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> };

• I don’t know if you have ever encountered in the past long form verification, after click verification, because the page is too long, so you don’t know which form item If the verification fails, you need to browse and locate the corresponding item; in order to optimize the experience of previous form verification, the operation of scrolling to the corresponding position after verification is added here, which is more in line with the user experience of the mobile terminal.

• The triggering mechanism of form validation: We all know that the triggering mechanism of

  element-ui is to select the triggering time by specifying trigger, then here After I removed it, it meant that there were no such operations to trigger; and what I chose was to actively call the validate, validateField verification methods to trigger real-time verification, and when the verification failed , store the failed ones in variables, and then verify them every time the data changes. When the verification passes, remove the real-time verification items; in this way, compared to element-uibinding events, real-time Verification will save a lot of code calling and running mechanisms, and the code can be more sophisticated and streamlined.

非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()之后，用变量调用即可，注意当前变量要作为内存常驻使用。

The above is the detailed content of How to implement H5 form validation component in vue3. For more information, please follow other related articles on the PHP Chinese website!