ONLYOFFICE的表单复杂字段开发详解
上一回图文讲到了表单文件的入门使用，展示了使用正则表达式来设计开发逻辑复杂的填表域空格的功能，但是，正则表达式是一种非常难学的晦涩难懂的语言，虽然掌握后是屠龙宝刀，正则表达式不是谁都可以学得会的……
正则表达式的漫画
那么，不用正则表达式，能否设计开发上一篇图文里面的复杂功能呢？比如那个身份证号码输入验证功能？答案是肯定的，那就是使用表单复杂字段。
菜单
如上图菜单中最右侧的这个按钮复合字段，复合字段的属性如下图所示
复合字段
复合字段里面再插入多个各种不同类型的表单域，正好适合于身份证或手机号的不同的位域的具体设计定义，比如我们都知道一个人的出生日期是身份证号的第 7 位到第 14 位，因此在我这里设计的身份证号的复合字段的占位符为空，由各个位域的字段的占位符来定义。
字段关联
密钥与关联字段：在上侧的输入框输入身份证，就会在下侧的输出框自动计算显示输出你的身份证号码，在上侧的复合字段的属性密钥里定义一个名称，我这里输入为“身份证号”，在下一行的复合字段的属性密钥的下拉列表中，选择上面为输入框定义的密钥“身份证号”，就可以完成字段关联
字段关联
这样在输出的可填写表单.oform文件中，你在输入框的输入会直接自动的同步输出到输出框中。
身份证号计算器
在截图这个表单文件中同样操作了手机号，手机号输入后同时输出来。
地址码字段
身份证前 6 位是属地户籍信息，省、县（市）、乡（区），比如我们北京的都是110开头，然后东城、西城、海淀、朝阳……等分配接下来的三位103、104、105…………其他城市有其他的代码，这里就不列出具体的行政区划代码列表了，这 6 位都可能会出现从 0 到 9 的 10 个阿拉伯数字字符，因此，这个字段的表单文本规则很简单：地址码字段属性的格式下拉框中选择数字即可限定只能输入阿拉伯数字字符，并且勾选字数限制设为 6 即可，如下图所示
1到6
占位符就是没有输入的状态下的显示内容，习惯用 0 填充，不设置占位符的话，空白状态的地址码字段的宽度就会缩地很短，填表时随着输入而动态的加宽，可能会把本行文本顶出本行而自动换行，自动换行有可能导致下面各行连锁下移一行，引发格式灾变，因此，占位符预先占取了位置就可以方便设计表单版式了，当然还有另一种方式就是截图中文字字段属性的字符组合复选框，勾选后可以在单元格宽度栏内精确定义每一个字符的宽度。
出生日期码字段
年月日总共有 8 位数字：
年份前两位
只能是19或者20，毕竟不可能有 18 几几年出生现在还健在的人，那都得 120 多岁了，所以这里使用候选列表表单域
7到8位
值设置处仅需要添加19和20两个字符串即可，占位符就不要置 0 了，而从候选列表里面选一个作为占位符，最终填表时效果如下，只能从下拉框中选择一个
选择世纪
年份后两位
虽然人类活不到 120 多岁，但是百岁老人还是不罕见，最著名的过百岁才逝世的老人有千古功臣张学良将军
张学良
所以年份的后两位的字符串的可能性实在是太多，就不用候选列表表单域，还是使用普通的文本域如下：
9到10位
格式选择数字，字数限制为 2，字符组合里将单元格宽度``精确的调整至0.26厘米
月两位
1 年只有 12 个月，所以选择使用候选列表这个表单域，值设置里面添加从01到12这 12 个候选项，占位符选择 01：
11到12位
日两位
每个月的天数不太一样，但最多也不过 31 天，所以也选择使用候选列表这个表单域：
13到14位
至于 2 月份只能留给填表人自己负责不去选择31、30、29这几个数字了
顺序码
出生日期之后的 3 位数字是顺序码，是给同地址码同出生日期码的人编定的顺序号，其中奇数分配给男性，偶数分配给女性，因此设计如下：
15位到17位
校验码
最后一位是校验码，校验码为一位数，但如果最后采用校验码系统计算的校验码是“10”，碍于身份证号码为 18 位的规定，则以“X”代替校验码“10”，因此，校验码有 11 种可能，分别是从0到9，外加一个“X”，这里并不复制校验码真实的计算方法，就只是禁止输入校验码之外的字符，比如 abcde……之类的英文字符，所以如下设计：
校验码
字段的格式选择无，也就是纯文字，在可用符号里直接输入所有这些可能出现的 11 个字符，从0到X，限制 1 位数字
这样就能通过复杂字段来严格限制并校验身份证号码的输入了。
固定字段
很多时候填表内容中都会有固定出现的字段，如下图所示，比如电子邮箱地址里面的@符号，比如社交网站个人主页的https://blog.csdn.net/，这些字段可以直接在复合字段中输入，然后在需要填表人填写的位置插入具体的表单域：
固定字段
然后填表人只需要输入自己的用户名，不用输入完整的地址。
固定字段可以位于复合字段的开头、中间以及末尾的任意位置，例如下图所示，电话号码各个数字段中间的-字符，方便人们读写电话号码，国内的手机号码一般是 11 位，正确的读写断句应该是三位四位四位的读法，对应的在各段之间插入一个-字符，这是有意义的，如下
掩码规则
在普通文字字段的格式下拉框中还可以选择使用任意掩码，这种掩码技术比正则表达式稍微简单易学一些，举例如下：
手机号1到3位
国内的手机号的前三位一般是手机服务运营商的的号段位，比如图中的135是移不动的的号段，所有号段的第 1 位都是1，第 2 和第 3 位则可能是任意阿拉伯数字，所以这里设定掩码的规则是 199，这样就完美的表达了如此规则
手机号后4位
手机号的中间 4 位和后 4 位都是阿拉伯数字，因此都开启字数限制设为 4，并开启字符组合
色彩、字体、杂项排版
如上图所示，可以开启边框颜色和背景颜色，标准的颜色板功能，如下图所示
色板
其它的排版可以选择相关字段后，就像正文一样，应用各种排版，如上述各截图，可以设置文字的字体、颜色、斜体、加粗、字号、等等，甚至可以放置在表格里面，用表格来精确调整位置
体验
上面展示的实例的可填写的表单在这里
复杂字段.oform[1]
在你输入手机号码之后它能自动的计算出来你的手机号码：
手机号码计算器
参考文献
[1] 复杂字段.oform: https://personal.onlyoffice.com/products/files/doceditor?fileid=5154256&doc=Y3l6ZGkwSUhzUy9yTVdBbjN2UnN0NEIxY1d1cjQzeDJ4TWVMbnFWaUluUT0_NTE1NDI1Ng
[2] 中华人民共和国公民身份号码: ……
[3] 表单创建工具中复杂字段介绍和使用指南: https://www.onlyoffice.com/blog/zh-hans/2022/10/what-is-a-complex-field/
[4] ONLYOFFICE 表单字段类型及配置: https://test-helpcenter.onlyoffice.com/ONLYOFFICE-Editors/ONLYOFFICE-Document-Editor/UsageInstructions/CreateFillableForms.aspx
ONLYOFFICE的表单复杂字段开发详解相关推荐
- php表单提交到数据库详解
一般朋友们逛一些网站的时候,想使用网站或者看到更多网站里的内容,网站会要求用户进行新用户的注册,网站会把新用户的注册信息存入数据库中,需要的时候再进行提取. 这样网站就会首先创建自己的数据库和对应的表 ...
- layui单选框verify_layui lay-verify form表单自定义验证规则详解
虽然layui的官方文档已经是写的比较详细,但是初次使用的时候总会懵一下,这里纪录一下lay-verify自定义验证规则的时候到底放哪. html: 提交 js: form.verify({ //数组 ...
- Jquery表单插件ajaxForm用法详解
原文地址: http://www.open-open.com/lib/view/open1325032463827.html 插件主要的方法: ajaxForm ajaxSubmit formToAr ...
- JavaScript表单序列化的方法详解
本文介绍下,在javascript中实现表单序列化的方法,通过实例加深理解,有需要的朋友参考下吧. 在JavaScript中,可以利用表单字段的type属性,连同name和value属性一起实现对表单 ...
- 表单ajax提交插件,详解javascript表单的Ajax提交插件的使用
Ajax 提交插件 form.js 插件有两个核心方法:ajaxForm()和ajaxSubmit(),它们集合了从控制表单元素到决定如何管理提交进行的功能. //ajaxForm 提交方式 $('# ...
- layui的表单与表格使用详解
一.开始前准备 到官网下载layui需要的文件 在html文件里面导入: <script src="../layui/layui.js"></script> ...
- HTML表单的enctype属性详解{转}
用Enctype 属性指定将数据回发到服务器时浏览器使用的编码类型. 下边是说明: application/x-www-form-urlencoded: 窗体数据被编码为名称/值对.这是标准的编码格式 ...
- Jquery ajax提交表单几种方法详解
[导读] 在jquery中ajax提交表单有post与get方式,在使用get方式时我们可以直接使用ajax 序列化表单$( 表单ID) serialize();就行了,下面我来介绍两个提交表单数据的 ...
- php ci框架 自动验证,CodeIgniter表单验证方法实例详解
本文实例讲述了CodeIgniter表单验证方法.分享给大家供大家参考,具体如下: 1.在D:\CodeIgniter\system\application\views目录下写一个视图文件myform ...
最新文章
- Xilinx低比特率高品质 ABR 视频实时转码（HPE 参考架构）
- 使用Prism提供的类实现WPF MVVM点餐Demo
- 射影几何笔记5：齐次坐标（Homogeneous coordinates）
- 中青旅：在线旅游行业如何选型数据分析平台？
- 初次面试Java岗位，这些技巧你要知道！
- 【鬼网络】之NFS共享服务
- 带权图的最短路径算法(Dijkstra)实现
- 沃特玛采集均衡模块_云原生在京东丨云原生时代下的监控：如何基于云原生进行指标采集？...
- java 获取运行时参数,Java8增强反射可以在运行时获取参数名
- innodb ibd结构图
- java基础篇---网络编程(TCP程序设计)
- 智力题（猜凶手，确定比赛名次）
- 用python对我和女票的聊天记录生成心形词云
- 基于深度学习的音乐推荐系统（一）音频频谱图绘制
- 2016英语三级分数计算机,2016年英语三级成绩查询准考证号忘了怎么办？
- JavaFX示例--简易图片处理工具
- CAD打印线条太粗、线条颜色设置
- 中文乱码问题—字符集utf8、uf8mb4与排序规则
- RAM、SRAM、DRAM、SDRAM、DDRSDRAM等之间的区别
- ipv6 16进制转成10进制的数