JBolt开发平台入门(22)-JBolt平台提供的多种Form表单快速校验和提交方式

教程总目录

上一节: JBolt开发平台入门(21)-AutoSelect+select2+多选+隐藏域的高级用法

一行代码搞定Form提交,带校验,自适应ajax提交、Portal提交,多选项卡和单页模式自适应提交。
JBolt里提交Form表单有好几种方式可选。


编辑器案例

案例-在Demo模块找Neditor.html的demo页面中有好几种提交方式

1、Ajax方式提交,使用的是jquery.form.js

ajax方式提交

这种是一个按钮点击,提交指定ID的form表单。 具体封装在了jbolt-admin.js里

2、Dialog中表单提交-Ajax

Dialog中的Form

在JBolt的CURD操作中 添加数据常用DIalog,Dialog上有确定按钮,点击确定按钮,提交dialog中的表单,表单提交用的是ajax提交,同方式1一样,也是使用了jquery.form.js 底层调用的都是。
具体封装在了_formjs.html

3、pageFormSubmit 直接表单提交

这个在JBolt里不是特殊需要一般不适用,因为这个是直接form提交跳转页面的,在单页模式下需要单页大表单的时候,使用这种。


案例

比如这种一个表单内容很多,分成了好几个步骤跳转页面去挨个步骤添加数据,保存数据的过程,就用这种。
当然这种体验就是页面直接跳转了,其实这里也能优化,点击下一步按钮后,先ajaxSubmit返回成功信息后,js控制进入下一步页面的跳转。

4、submitFormInCurrentTab 执行表单提交的时候在多选项卡模式下

Form表单直接提交会整个页面刷新的,所以在多选项卡模式先推荐使用ajax方式提交表单,但是如果也分步骤了,比如在电商模块中添加商品的流程,分了好几步。
在Neditor.html的demo中也有案例,点击提交按钮,刷新的是当前正在显示的选项卡的内容区域,局部提交刷新跳转,而不是整体。

点击提交,tab内部刷新跳转
跳转后的样子

各自根据自己业务需要,选择合适的使用即可。