全代码框架文档
首页
快速上手
前端组件
前端二开
首页
快速上手
前端组件
前端二开
  • 二开前准备
  • 对接移动办公
  • 表单介绍

    • 表单封装逻辑
    • 传值和formModel
    • 组件的封装
    • 显示隐藏控制
    • 字段事件
  • 基础二开

    • 值计算
    • 修改组件值
    • 自定义校验
    • 使用远程数据源
    • 为工具栏添加按钮
    • 为表单添加新字段
  • 高级二开

    • 自定义字段
    • 自定义页面
    • 弹窗
    • 表单
    • 表格

自定义校验

如果为常规的校验(如是否填写,常规正则校验),可以直接将校验规则提那家在表单生成的config.ts文件中相应字段的rules属性中。如果校验逻辑比较复杂,不想在config.ts文件中写,可以在拆分出的CustomDevForm.vue文件中的schemaMap中添加相应的校验。

computed: {
    // 这里需要增加一个计算属性 否则流程关联时字段读写状态会失效
    schemaMap() {
        const schemaMap = {};
        this.getSchemas.forEach((schema) => {
            // 在这里修改
            schemaMap[schema.key] = schema;
            if(schema.children) {
                schema.children.forEach(sChild=>{
                    if(sChild.list){
                        sChild.list.forEach(lChild=>{
                            // tab等结构的子元素在这里
                            schemaMap[lChild.key] = lChild;
                        });
                    } 
                });
            }
        });
        return schemaMap;
    }
},

可以使用remote远程校验,也可以使用regex校验函数。不过一般的form表单组件都自带对pattern的正则解析,所以一般不需要使用regex校验函数。具体rules的格式可查看ant-design-vue Form的文档或者APP端uni-app Form的文档。 这里只举一个远程校验的例子:

{
  username: [
    { 
      required: true, 
      message: '请输入用户名', 
      trigger: 'blur' 
    },
    {
      validator: async (rule, value) => {
        try {
          const { data } = await axios.get('/api/user/check', {
            params: { username: value }
          });
          if (data.exists) {
            return Promise.reject('该用户名已被使用');
          }
          return Promise.resolve();
        } catch (error) {
          return Promise.reject('验证服务不可用');
        }
      },
      trigger: 'blur'
    }
  ]
}
Last Updated:: 4/10/25, 11:56 AM
Contributors: DESKTOP-45LLIKH\11405
Prev
修改组件值
Next
使用远程数据源