vue3에서 H5 양식 유효성 검사 구성 요소를 구현하는 방법

Rendering

Description

vue.js를 기반으로 하며 다른 플러그인이나 라이브러리에 의존하지 않으며 기본 기능은 element-ui와 일관되게 유지되며 일부 모바일 차이점은 다음과 같습니다. 내부 구현 조정에서 이루어졌습니다. vue.js，不依赖其他插件或库实现；基础功能使用保持和 element-ui 一致，内部实现做了一些移动端差异的调整。

当前构建平台使用 uni-app 官方脚手架构建，因为当下移动端大多情况就h6和微信小程序两种，所以一套代码跑多端十分适合技术选型。

实现思路

核心api：使用 provide 和 inject ，对应<form></form>和<form-item></form-item>。

• 在<form></form>组件中，内部用一个变量（数组）去将所有<form-item></form-item>实例储存起来，同时把要传递的数据通过provide暴露出去；<form-item></form-item>组件则在内部用inject去接收父组件提供过来的数据，最后把自身的属性和方法提交到父组件去。

• <form></form>中要做的事情就只有监听绑定的数据，然后做调用对应<form-item></form-item>的各种验证方法；所以任何的验证状态都写在了<form-item></form-item>中，包括样式的展示；由于可以拿到父组件绑定的数据，对于一些常见样式设置自然就可以用computed去优先拿取自身组件prop值或者父组件绑定的prop值；对应的，通过父组件绑定的表单数据，就可以和自身prop去验证当前项了，最后由父组件去调用对应方法即可，当然，自身组件也可以调用。

• 因为vue3中移除了自定义派发事件$on、$off、$emit，所以这里改用uni.$on、uni.$off和uni.$emit来代替；不同的是，这个事件派发机制是全局的，不是跟随组件唯一性，所以在添加、移除事件时，需要在事件名称设置一个唯一值使用；这里我在<form></form>组件中定义一个变量，每次调用时都累加1，然后设为事件名称再传递到<form-item></form-item>内部，这样就可以保证<form></form>和<form-item></form-item>的确定性了。

与element-ui表单组件差异

• 表单验证不再设置输入框和任何表单表单的样式，而是通过自定义修改样式去显示验证提示；这十分有利于移动端穷出不尽的UI设计稿的变化，例如同一个表单，有两种不同样式的输入框；同时不影响和其他样式库的使用，因为表单验证的<form-item></form-item>不会影响到插槽内的任何元素。

• 表单校验数据选项只保留4个字段（见下面），因为移除了对表单组件的验证状态，所以trigger这个事件设置也不需要了；pattern则换成了reg，注意的是，在微信小程序中，任何组件的传参都会被过滤剩下基础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> };

• 不知道大家在以往的长表单验证中，有没有遇到过点击验证之后，因为页面过长，所以不知道那个表单项校验不通过，从而需要翻阅定位到对应项；为了优化以往表单验证的体验，这里加入了验证之后，滚动到对应位置的操作，更加符合移动端的用户体验。

• 表单验证的触发机制：都知道element-ui的触发机制是通过指定trigger来选择触发的时机，那这里我去掉之后，就意味着没有这些操作去触发了；而我选择的是主动调用validate、validateField这些验证方法时去触发实时验证，当验证不通过时，把不通过的用变量储存起来，然后每次数据变动时去校验，等到验证通过了，则移除实时验证项；这样相比于element-ui

  현재 구축 플랫폼은 uni-app 공식 스캐폴딩을 사용하여 구축되어 있습니다. 현재 대부분의 모바일 단말기에는 h6와 WeChat 애플릿의 두 가지 유형이 있으므로 매우 적합합니다. 여러 터미널에서 실행되는 하나의 코드 세트 기술 선택. 🎜🎜구현 아이디어🎜🎜핵심 API: <form></form> 및 <form-item></form-item>에 해당하는 제공 및 삽입을 사용합니다. 🎜
  • 🎜 <form></form> 구성 요소에서는 내부적으로 변수(배열)를 사용하여 모든 <form- item></form->인스턴스가 저장되고 provide를 통해 전송될 데이터가 노출됩니다. <form-item></form-item> 구성 요소는 내부적으로 inject를 사용하여 상위 구성 요소에서 제공하는 데이터를 수신하고 마지막으로 자체 속성과 메서드를 상위 구성 요소에 제출합니다. 🎜
  • 🎜<form></form> 해야 할 일은 바인딩된 데이터를 듣고 해당 <form-item></form-item>을 호출하는 것뿐입니다. > 다양한 확인 방법; 따라서 일부 공통 스타일의 경우 상위 구성 요소에 바인딩된 데이터를 얻을 수 있으므로 스타일 표시를 포함하여 모든 확인 상태가 <form-item></form-item>에 기록됩니다. computed를 사용하여 자체 구성 요소의 prop 값을 가져오거나 상위 구성 요소를 통해 그에 따라 상위 구성 요소에 바인딩된 prop 값을 가져올 수 있습니다. 바인딩된 양식 데이터는 자체 prop로 현재 항목을 확인하는 데 사용할 수 있습니다. 마지막으로 상위 구성 요소는 해당 메서드를 호출할 수 있습니다. 물론 자체 구성 요소도 이를 호출할 수 있습니다. 🎜
  • 🎜사용자 정의 전달 이벤트 $on, $off 및 $가 <code>vue3에서 제거되었기 때문입니다. > 방출이므로 여기서는 uni.$on, uni.$off 및 uni.$emit를 대신 사용합니다. 예; , 이 이벤트 전달 메커니즘은 전역적이며 구성 요소의 고유성을 따르지 않습니다. 따라서 이벤트를 추가하거나 제거할 때 여기에서는 <form>을 사용하여 이벤트 이름에 고유한 값을 설정해야 합니다. code> 컴포넌트 호출될 때마다 <code>1에 변수를 정의한 후 이벤트 이름으로 설정하고 <form-item></form-item> 내부에 전달하므로 <form></form> 및 <form-item></form-item>이 확실합니다. 🎜
  🎜element-ui 양식 구성 요소와의 차이점🎜
  • 🎜양식 유효성 검사는 더 이상 입력 상자 및 양식 양식의 스타일을 설정하지 않습니다. 스타일을 맞춤설정하여 확인 메시지를 표시합니다. 이는 모바일 단말기의 UI 디자인 초안을 끊임없이 변경하는 데 매우 도움이 됩니다. 예를 들어 동일한 양식에 동시에 두 가지 다른 스타일의 입력 상자가 있습니다. 양식 유효성 검사 <form-item></form-item>는 슬롯의 어떤 요소에도 영향을 주지 않기 때문에 다른 스타일 라이브러리의 사용에는 영향을 미치지 않습니다. 🎜
  • 🎜양식 유효성 검사 데이터 옵션은 4 필드만 유지합니다(아래 참조). 양식 구성 요소의 유효성 검사 상태가 제거되므로 trigger 이 이벤트 설정은 더 이상 필요하지 않습니다. pattern은 reg로 대체됩니다. WeChat 애플릿에서는 모든 구성 요소가 전달한 매개 변수가 필터링되어 기본 json 형식이므로 미니 프로그램 환경에서 이 reg를 사용하는 경우 마지막에 .toString() 및 validator를 추가해야 합니다. 비슷합니다. 🎜

  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] => 没有要执行的事件");
        }
      },
    }
  }

  • 🎜과거 장문 인증에서 인증을 클릭한 후 해당 페이지를 접한 적이 있는지 모르겠습니다. 페이지가 너무 길어서 어떤 양식 항목이 확인에 실패했는지 알 수 없으므로 이전 양식 확인 환경을 최적화하기 위해 해당 항목을 찾아보아야 합니다. 확인 후 해당 위치로 스크롤하는 작업입니다. 여기에 추가되었으며 이는 모바일 단말기의 사용자 경험에 더 부합합니다. 🎜
  • 🎜양식 유효성 검사의 트리거 메커니즘: 우리 모두는 element-ui의 트리거 메커니즘이 트리거를 지정하여 트리거 시간을 선택하는 것임을 알고 있습니다. 그래서 여기에서 이를 제거한 후에는 트리거할 이러한 작업이 없다는 것을 의미하며 제가 선택한 것은 실제를 트리거하기 위해 validate 및 validateField 확인 메서드를 적극적으로 호출하는 것입니다. 검증에 실패할 경우, 검증에 통과되면 실패한 것을 변수에 저장한 후, 검증에 통과할 때마다 실시간 검증 항목을 제거하게 됩니다. element-ui 바인딩 이벤트와 비교 실시간 확인을 통해 코드 호출 및 실행 메커니즘이 많이 절약되고 코드가 더욱 정교해지고 간소화될 수 있습니다. 🎜

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

위 내용은 vue3에서 H5 양식 유효성 검사 구성 요소를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!