jeecgBoot表单的使用

Question

jeecgBoot中我要做一个表单效果，当用户新建账户时，填写用户账户后进行校验，要求该字段必填。同时通过 rules.duplicateCheckRule('sys_user', 'username', model, schema, true)进行重复判断。如果返回重复则提示该账号已存在，但不阻塞表单提交。同时表单中登录密码字段取消，不显示。

{
    label: '用户账号',
    field: 'username',
    component: 'Input',
    required: true,
    dynamicDisabled: ({ values }) => {
      return !!values.id;
    },
    dynamicRules: ({ model, schema }) =>  rules.duplicateCheckRule('sys_user', 'username', model, schema, true)
  },
  {
    label: '登录密码',
    field: 'password',
    component: 'StrengthMeter',
      ifShow: ({ values }) => {
        console.log('登录密码',values);
        return values.username == '1';
      },
    componentProps:{
      autocomplete: 'new-password',
    },

rules.duplicateCheckRule('sys_user', 'username', model, schema, true)进行重复判断，重复的话接口会返回以下内容

Answer 1

晚上好🌙🌙🌙
本答案参考通义千问

在 JeecgBoot 中，表单的构建和校验是通过 a-form 和 a-form-item 组件配合 schema 配置实现的。你提到的需求包括：

1. 用户账号字段必填；
2. 使用 rules.duplicateCheckRule 进行重复校验，如果重复则提示“该账号已存在”，但不阻塞表单提交；
3. 隐藏登录密码字段（即不显示）。

---

✅ 解决方案

一、表单字段配置说明

1. 用户账号字段

• 必填项：required: true
• 动态禁用逻辑：根据 values.id 决定是否禁用
• 动态规则：使用 rules.duplicateCheckRule 判断用户名是否重复

{
  label: '用户账号',
  field: 'username',
  component: 'Input',
  required: true,
  dynamicDisabled: ({ values }) => {
    return !!values.id;
  },
  rules: [
    { required: true, message: '请输入用户账号', trigger: 'blur' },
    // 自定义规则用于重复检查（不阻塞提交）
    {
      validator: async (_, value) => {
        const res = await rules.duplicateCheckRule('sys_user', 'username', model, schema, true);
        if (res && res.code === 0) {
          // 返回成功表示没有重复
          return Promise.resolve();
        } else {
          // 如果返回重复，提示信息但不阻止提交
          alert('该账号已存在');
          return Promise.resolve(); // 不阻塞提交
        }
      },
      trigger: 'blur'
    }
  ]
}

重点说明：

• 使用自定义 validator 实现 非阻塞校验，即使重复也允许表单提交；
• rules.duplicateCheckRule 是 JeecgBoot 提供的重复校验方法，需确保其可用性。

---

2. 登录密码字段（取消显示）

要隐藏登录密码字段，可以通过设置 ifShow: false 或者直接不在 schema 中配置该字段。

{
  label: '登录密码',
  field: 'password',
  component: 'StrengthMeter',
  ifShow: false, // 设置为 false 不显示该字段
  componentProps: {
    autocomplete: 'new-password',
  }
}

重点说明：

• 使用 ifShow: false 可以完全隐藏该字段；
• 若需要动态控制显示，可使用 ifShow: ({ values }) => ... 的方式。

---

✅ 二、完整示例代码（基于 JeecgBoot 表单配置）

const formSchema = [
  {
    label: '用户账号',
    field: 'username',
    component: 'Input',
    required: true,
    dynamicDisabled: ({ values }) => {
      return !!values.id;
    },
    rules: [
      { required: true, message: '请输入用户账号', trigger: 'blur' },
      {
        validator: async (_, value) => {
          const res = await rules.duplicateCheckRule('sys_user', 'username', model, schema, true);
          if (res && res.code === 0) {
            return Promise.resolve();
          } else {
            alert('该账号已存在');
            return Promise.resolve();
          }
        },
        trigger: 'blur'
      }
    ]
  },
  {
    label: '登录密码',
    field: 'password',
    component: 'StrengthMeter',
    ifShow: false, // 隐藏该字段
    componentProps: {
      autocomplete: 'new-password',
    }
  }
];

---

✅ 三、注意事项

1. rules.duplicateCheckRule 的调用方式：

   • 确保 rules 模块已经正确引入；
   • 该方法通常用于后台接口验证用户名/邮箱等唯一字段是否存在。

2. 表单提交时的处理：

   • 即使有重复提示，表单仍可以提交，因为 validator 返回的是 Promise.resolve() 而不是 Promise.reject()。

3. 字段隐藏与显示控制：

   • 若你需要根据某些条件动态显示或隐藏字段，可使用 ifShow: ({ values }) => ...。

---

✅ 四、总结

| 需求 | 实现方式 | |------|----------| | 用户账号必填 | required: true | | 重复校验（不阻塞提交） | 自定义 validator + rules.duplicateCheckRule | | 隐藏登录密码字段 | ifShow: false |

如需进一步调整表单样式、响应式布局或添加其他字段，请继续提问！