1. Oinone社区Home
  2. 前端
  3. 低无一体

如何编写自定义字段组件的校验逻辑

nation • • 低无一体, 前端 • 2502 views

介绍

自定义字段组件的时候，我们可能会遇到有复杂校验规则或者业务上特殊的校验提示信息的场景，这时候可以通过覆写字段的校验方法validator来实现。

示例代码

import { SPI, ValidatorInfo, FormStringFieldWidget, isEmptyValue, isValidatorSuccess, FormFieldWidget, ViewType, ModelFieldType  } from '@kunlun/dependencies'

@SPI.ClassFactory(FormFieldWidget.Token({
  viewType: [ViewType.Form],
  ttype: ModelFieldType.String,
  widget: 'DemoPhone'
}))
export class DemoFormPhoneFieldWidget extends FormStringFieldWidget {
  // 字段校验方法
  public async validator(): Promise<ValidatorInfo> {
    // 建议先调用平台内置的通用校验逻辑
    const res = await super.validator();
    if (!isValidatorSuccess(res)) {
      // 校验失败直接返回
      return res;
    }
    // 编写自有校验逻辑
    if (!isEmptyValue(this.value) && !/^1[3456789]\d{9}$/.test(this.value as string)) {
      // 通过内置的validatorError方法提示校验提示信息
      return this.validatorError('手机号格式错误');
    }
    // 无异常，用内置的validatorSuccess返回校验通过的信息
    return this.validatorSuccess();
  }
}

扩展学习

自定义字段组件如何处理vue组件内的表单校验

Oinone社区 作者：nation原创文章，如若转载，请注明出处：https://doc.oinone.top/frontend/16347.html

访问Oinone官网:https://www.oinone.top获取数式Oinone低代码应用平台体验

Like (0)
nation's avatarnation数式员工
0 0
Previous 2024年8月22日 pm7:51
Next 2024年8月23日 pm2:12

相关推荐

  • 如何在表格的字段内添加动作 低无一体

    如何在表格的字段内添加动作

    介绍 在日常的业务中，我们经常需要在表格内直接点击动作完成一些操作，而不是只能在操作栏中，例如：订单的表格内点击商品名称或者里面的按钮跳转到商品详情页面，这里我们将带来大家来通过自定义表格字段来实现这个功能。 1.编写表格字段组件 组件ts文件TableBtnFieldWidget.ts import { ActionWidget, ActiveRecordExtendKeys, BaseFieldWidget, BaseListView, ModelFieldType, queryDslWidget, queryRowActionBar, RowContext, SPI, TableStringFieldWidget, BaseElementListViewWidget, ViewType, Widget } from '@kunlun/dependencies'; import { createVNode, VNode } from 'vue'; import { toString } from 'lodash-es'; import TableBtnField from './TableBtnField.vue'; @SPI.ClassFactory( BaseFieldWidget.Token({ viewType: ViewType.Table, ttype: [ModelFieldType.String, ModelFieldType.Text], // widget: 'StringLink', // 以下3行配置代码测试用，生产建议在界面设计器自定义组件，widget填自定义组件的api名称 model: 'resource.k2.Model0000000109', name: 'name' }) ) export class TableBtnFieldWidget extends TableStringFieldWidget { @Widget.Reactive() private get triggerActionLabel() { // 界面设计器组件内设计该属性 return this.getDsl().triggerActionLabel || '更新'; } private getTriggerAction() { return this.model.modelActions.find((a) => a.label === this.triggerActionLabel); } private getTriggerActionWidget(widgetHandle: string, draftId: string, triggerActionLabel: string): ActionWidget | undefined { const listView = Widget.select(widgetHandle) as unknown as BaseListView; const listWidget = queryDslWidget(listView?.getChildrenInstance(), BaseElementListViewWidget); if (!listWidget) { return undefined; } const rowActionBar = queryRowActionBar(listWidget.getChildrenInstance(), draftId); const actionWidget = rowActionBar?.getChildrenInstance().find((a) => (a as ActionWidget).action.label === triggerActionLabel); return actionWidget as ActionWidget; } protected clickAction(context: RowContext) { const draftId = context.data[ActiveRecordExtendKeys.DRAFT_ID] as unknown as string; const actionWidget = this.getTriggerActionWidget(this.getRootHandle()!, draftId, this.triggerActionLabel); if (!actionWidget) { console.error('未找到action', this.triggerActionLabel); return; } actionWidget.click(); } @Widget.Method() public renderDefaultSlot(context: RowContext): VNode[] | string { const value = toString(this.compute(context)); if (value) { return [ createVNode(TableBtnField,…

    nation's avatar nation
    2024年5月16日
    2.2K00
  • 自定义组件之手动渲染基础（v4） 前端

    自定义组件之手动渲染基础（v4）

    阅读之前 你应该： 了解DSL相关内容。母版-布局-DSL 渲染基础（v4） 了解SPI机制相关内容。组件SPI机制（v4.3.0） 了解组件相关内容。 Class Component(ts)（v4） 自定义组件之自动渲染（组件插槽的使用）（v4） 为什么需要手动渲染 在自定义组件之自动渲染（组件插槽的使用）（v4）文章中，我们介绍了带有具名插槽的组件可以使用DSL模板进行自动化渲染，并且可以用相对简单的方式与元数据进行结合。 虽然自动化渲染在实现基本业务逻辑的情况下，有着良好的表现，但自动化渲染方式也有着不可避免的局限性。 比如：当需要多个视图在同一个位置进行切换。 在我们的平台中，界面设计器的设计页面，在任何一个组件在选中后，需要渲染对应的右侧属性面板。每个面板的视图信息是保存在对应的元件中的。根据元件的不同，找到对应的视图进行渲染。在单个视图中使用自动化渲染是无法处理这一问题的，我们需要一种可以局部渲染指定视图的方式，来解决这一问题。 获取一个视图 使用ViewCache获取视图 export class ViewCache { /** * 通过模型编码和名称获取视图 * @param model 模型编码 * @param name 名称 * @param force 强制查询 * @return 运行时视图 */ public static async get(model: string, name: string, force = false): Promise<RuntimeView | undefined> /** * 通过模型编码、自定义名称和模板获取编译后的视图（此视图非完整视图，仅用于自定义渲染使用） * @param model 模型编码 * @param name 名称（用作缓存key） * @param template 视图模板 * @param force 强制查询 * @return 运行时视图 */ public static async compile( model: string, name: string, template: string, force = false ): Promise<RuntimeView | undefined> } ViewCache#get：用于服务端定义视图，客户端直接获取完整视图信息。 ViewCache#compile：用于客户端定义视图，通过服务端编译填充元数据相关信息，但不包含视图其他信息。 自定义一个带有具名插槽的组件，并提供切换视图的相关按钮 以下是一个自定义组件的完整示例，其使用ViewCache#compile方法获取视图。 view.ts const template1 = `<view> <field data="id" invisible="true" /> <field data="code" label="编码" /> <field data="name" label="名称" /> </view>`; const template2 = `<view> <field data="id" invisible="true" /> <field data="name" label="名称" /> <field data="code" label="编码" /> </view>`; export const templates = { template1, template2 }; ManualDemoWidget.ts import { BaseElementWidget, createRuntimeContextForWidget, FormWidget, RuntimeView, SPI, ViewCache, ViewType, Widget } from '@kunlun/dependencies'; import ManualDemo from './ManualDemo.vue'; import { templates } from './view'; @SPI.ClassFactory(BaseElementWidget.Token({ widget: 'ManualDemo' })) export class ManualDemoWidget extends BaseElementWidget { private formWidget: FormWidget | undefined; public…

    数式-海波's avatar 数式-海波
    2023年11月1日
    1.3K00
  • oinone的GraphQL使用指南 前端

    oinone的GraphQL使用指南

    如果之前没了解过GraphQL，可以先查看GraphQL的文档 为什么oinone要选用GraphQL? 我们先看一下oinone独特的元数据设计 介绍信息来源于Oinone 7天从入门到精通，如提示无权限，则需要申请 再看一下GraphQl的介绍 我们可以看出，GraphQL提供的特性可以满足我们对元数据的描述需求，因此我们选用GraphQL。 相关工具推荐 可视化gql请求工具： 官方下载地址 oinone工具包-win版 oinone工具包-mac版 模拟登录请求 点击“Refresh Schema”按钮手动同步后端的gql文档数据 点击“show Documentation”按钮查看gql文档，可以在搜索框内输入关键字查询相关文档

    oinone's avatar oinone
    2023年11月1日
    2.1K00

  • 根据固定的接口返回数据动态控制按钮的显隐

    在项目开发中，我们经常会面临这样的情况：当前按钮的显示与隐藏需要根据后端某个接口返回的数据来决定，而无法通过权限配置进行处理。为了解决这个问题，我们可以通过自定义的方式来处理这一功能。 首先，我们需要知道当前动作是什么类型的动作，例如「服务端动作、跳转动作、打开弹窗的动作、打开抽屉的动作」。 ServerActionWidget -> 服务端动作DialogViewActionWidget -> 打开弹窗动作DrawerViewActionWidget -> 打开抽屉动作RouterViewActionWidget -> 路由跳转动作 下面是一个示例代码，演示了如何通过自定义的方式处理按钮的显示与隐藏逻辑。 import { ActionType, ActionWidget, SPI, ServerActionWidget, Widget, http } from '@kunlun/dependencies'; @SPI.ClassFactory( ActionWidget.Token({ actionType: ActionType.Server, model: 'resource.k2.Model0000000100', name: 'create' }) ) export class MyAction extends ServerActionWidget { // 当前动作是服务端动作，继承的是 ServerActionWidget @Widget.Reactive() private needInvisible = false; @Widget.Reactive() public get invisible(): boolean { return this.needInvisible; } protected mounted(): void { super.mounted(); // 模拟接口 http.query(模块名, `graphql`).then(res => { if(res) { this.needInvisible = true } }) } } 在实际应用中，我们可以调用后端接口，根据返回的数据动态修改 needInvisible 这个值，从而实现按钮的动态显示与隐藏效果。这样的设计使得按钮的显示状态更加灵活，并且能够根据后端数据动态调整，提高了系统的可定制性。

    汤乾华's avatar 汤乾华
    前端 2023年11月23日
    2.1K00
  • OioMessage 全局提示 组件

    OioMessage 全局提示

    全局展示操作反馈信息。 何时使用 可提供成功、警告和错误等反馈信息。 顶部居中显示并自动消失，是一种不打断用户操作的轻量级提示方式。 API 组件提供了一些静态方法，使用方式和参数如下： OioMessage.success(title, options) OioMessage.error(title, options) OioMessage.info(title, options) OioMessage.warning(title, options) options 参数如下： 参数 说明 类型 默认值 版本 duration 默认 3 秒后自动关闭 number 3 class 自定义 CSS class string –

    汤乾华's avatar 汤乾华
    2023年12月18日
    1.8K00

Leave a Reply

Please Login to Comment