amis表单较验

amis在前端做表单校验,无法按业务要求做复杂的校验功能,比如多个字段关联校验等,可以使用后台较验的方式。

引用文档:

amis - 低代码前端框架

1、基本的较验:

validations配置好表达式,然后在validationErrors配置好相应的错误提示。

表达式:amis - 低代码前端框架

XML 复制代码
{
	"name": "serialno",
	"label": "流水号",
	"id": "u:6d9986f4a89a",
	"type": "input-text",
	"required": true,
	"validations": {
		"minLength": 25,
		"maxLength": 50
	},
	"validationErrors": {
		"minLength": "流水号长度不对",
        "maxLength": "流水号太长了"
	}
}

2、组合的较验:

XML 复制代码
{
  "type": "page",
  "body": {
    "type": "form",
    "api": "/amis/api/form/saveForm",
    "rules": [
      {
        "rule": "!(data.a && data.b)",
        "message": "a 和 b 不能同时有值"
      }
    ],
    "body": [
      {
        "type": "input-text",
        "name": "a",
        "label": "A"
      },
      {
        "type": "input-text",
        "name": "b",
        "label": "B"
      }
    ]
  }
}

3、后台较验:

后端api接口,在提交参数中,按业务逻辑判断多个字段,只需返回如下格式:

XML 复制代码
{
     "status": -1,
     "errors": {
        "serialno":  "流水号格式出错"   
     }
}

前端就会定位【serialno】这个字段,并提交相应的错误。

结论:结合3种较验方式,如果简单较验,直接在前端配置即可,减少后台API调用;如果复杂较验,前端无法支持,可以先将参数提交后端,检验后再返回到前端报错。

相关推荐
colofullove11 小时前
实时游玩页与 WebSocket 状态管理实现
websocket·网络协议·状态模式
夏天测16 小时前
业务逻辑漏洞实战:篡改响应包绕过登录,直入后台管理系统
渗透测试·状态模式·业务逻辑漏洞·web 安全·响应包篡改
可乐ea1 天前
【Spring Boot + MyBatis|第7篇】JWT 登录认证与拦截器实现
java·spring boot·后端·mybatis·状态模式
前端不太难2 天前
GPU 集群调度架构解析
架构·状态模式
ShiJiuD6668889992 天前
外卖项目笔记总结上 (后端板块)
状态模式
前端不太难2 天前
当 AI 接管 Workspace:鸿蒙 PC Agent 架构设计实践
人工智能·状态模式·harmonyos
Maimai108083 天前
Web3 前端实时通信如何落地:从 SSE 订阅到行情、订单与账户状态更新
前端·javascript·react.js·前端框架·web3·状态模式
不吃青椒!3 天前
LangGraph 流式事件处理:从实战到体系
ai·langchain·状态模式
前端不太难4 天前
鸿蒙游戏世界模型:实现原理 + Demo实现
游戏·状态模式·harmonyos
星恒随风4 天前
C++ 类和对象入门(六):友元、内部类、匿名对象和编译器优化
开发语言·c++·笔记·学习·状态模式