baidu / amis

前端低代码框架,通过 JSON 配置就能生成各种页面。
https://baidu.github.io/amis/
Apache License 2.0
17.4k stars 2.52k forks source link

FormItem 可以添加一个 validateOnBlur 配置吗? #11205

Open zybzzc opened 1 week ago

zybzzc commented 1 week ago

有的时候需要即时后端校验,但 validateOnChange 又过于频繁,这时候如果能有一个 validateOnBlur 配置就方便了许多。

现在的做法是手动在输入组件的 blur event 里调用 validateFormItem 实现的。

{
  "type": "page",
  "title": "更新表单数据",
  "body": [
    {
      "type": "form",
      "title": "表单",
      "wrapWithPanel": false,
      "body": [
        {
          "type": "input-text",
          "label": "用户名",
          "name": "username",
          "id": "username",
          "required": true,
          "validateApi": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/formitemFailed",
          "validateOnChange": false, // 配置 validateApi 后默认会值改变就校验,所以这里手动关掉
          "onEvent": {
            "blur": {
              "actions": [
                {
                  "actionType": "validateFormItem",
                  "componentId": "username"
                },
                {
                  "actionType": "setValue",
                  "componentId": "validate_info",
                  "args": {
                    "value": "${event.data.validateFormItemResult|json}"
                  }
                }
              ]
            }
          }
        }
      ]
    },
    {
      "type": "input-text",
      "name": "validate_info",
      "id": "validate_info",
      "label": "校验结果:",
      "static": true
    }
  ]
}
lhtuling commented 2 days ago

如果着急用还是自己想办法解决 一般都可以通过其他方法搞定 建议官方增加功能可能项目都结束了还没修呢。。。而且也不一定被采纳

可以用这个方法试试 客户体验也更好 表单的值变化事件 然后增加一下防重复 在里面做校验 image

Amis低代码前端框架交流群【QQ1群】:717791727 Amis低代码前端框架交流群【QQ2群】:721182449

zybzzc commented 2 days ago

@lhtuling 现在是能实现的,只是我觉得这个功能还挺常见的,所以给amis团队提个建议。