MobileForms 1.0.2

MobileForms 1.0.2

×

测试已测试✗
语言语言 SwiftSwift
许可证 Apache 2
发布最新发布2016年6月
SPM支持SPM✗

由 Pedro Jorquera 维护。

MobileForms 1.0.2

  • 由
  • Okode

MobileForms

介绍

MobileForms允许通过使用JSON格式的表单定义来动态创建表单。所有生成的表单都具有可定义的具有所有属性和验证规则的字段，并将验证规则嵌入到同一定义文件中。它还支持接收不同事件类型（如焦点、更改或表单提交）的本地代码调用，并生成包含在表单中定义的模型的JSON响应。

MobileForms为iOS、Android和Windows Phone平台提供了通过JSON的唯一定义生成表单的原生包装器，并具有各自的平台原生外观。每个平台的样式/外观可以使用专有的样式表（CSS）定义，允许您在特定平台上更改某些元素（或整个表单）的外观，或者将所有平台统一为相同的样式。

JSON表单

输入JSON（表单定义）

[
  [
    {
      "header":"Contact"
    },
    {
      "label":"Name",
      "type":"text",
      "name":"name"
    },
    {
      "label":"Lastname",
      "type":"text",
      "name":"lastname"
    },
    {
      "label":"Gender",
      "type":"select",
      "name":"gender",
      "filter":"Male|Female"
    },
    {
      "label":"Email",
      "type":"email",
      "name":"email",
      "filter":"^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$",
      "error":"Invalid email address",
      "description":"This field will be validated"
    }
  ],
  [
    {
      "submit":"Save contact"
    }
  ]
]

预览（iOS / Android / WP） TODO：在这里包含图片

提交时的输出JSON / 用于填充表单的JSON

{
  "name" : "John",
  "lastname" : "Mock",
  "email" : "[email protected]",
  "gender" : "male"
}

字段

字段 iOS Android WP
文本 是 是 是
密码 是 是 是
数字 是 是 是
日期 是 是* 是**
时间 是 是* 是**
电话 是 是 是
电子邮件 是 是 是
隐藏 是 是 是
多行文本框 是 是 是
范围 是 是*** 是
下拉列表 是 是 是
单选按钮 是 是 是
复选框 是 是 是

* 在Android >= 4.4中，原始选择器。在之前版本中，由组合替换（DD-MM-YYYY / HH:MM）。** WP中不支持原生选择器，由组合替换（DD-MM-YYYY / HH:MM）。*** Android >= 4.4完全支持。旧版本，用数字字段替换。

字段（高级/自定义）

字段 描述 用法示例
phoneitem 允许类型 - 电话集合（键值对）。返回
"name":[{
"type":"Mobile",
"phone":"600500400"
}, ... ] 		{
"type":"phoneitem",
"name":"phoneItemList[]",
"nametype":"type",
"namephone":"phone",
"phonetypes":"Mobile|Home|Work|Other"
}
链接 允许使用javascript调用和/或事件来捕获在移动控制器上的链接 {
"type":"link",
"name":"linkExample",
"value":"打开新窗口",
"onclick":"jsFunction();",
"event":"customEvent"
}

属性

属性 输入 有效值 描述
名称 *（必需） 字符串 字段名（模型ID）
类型 *（必需） 字符串 一些有效字段
标签 * 字符串 字段/输入外的标签文本
占位符 * 字符串 字段/输入内的标签文本（空值）
值 * 字符串 初始值
过滤器 * 字符串 select 和 radio 字段中的值列表，以及用于验证其他字段输入值的正则表达式。示例："^\\d{9,15}$"（否则显示错误信息）
必需 * 0 - 1 只要任何必需字段未填写，提交按钮将禁用
错误 * 字符串 错误信息。如果字段未能满足任何验证条件（filter、max 或 min），则显示
描述 * 字符串 您可以在字段下方显示描述，并且可以引入一些基本的HTML标签
文本对齐 * 左对齐
右对齐
居中对齐 		允许对齐文本输入（非 label、desc、error）
最大长度 文本
密码
数字
电话
电子邮件
多行文本框		 数字 输入长度限制
最大值 数字
范围
日期
时间		 数字 最大有效值（否则显示错误信息）
最小值 数字
范围
日期
时间		 数字 最小有效值（否则显示错误信息）
步长 范围 数字 指定范围值的值粒度
选中 复选框 true
false 		设置初始复选框是否选中
日期格式 日期 dd-mm-yyyy
mm-dd-yyyy
yyyy-mm-dd 		如果设备显示本地日期选择器，设备区域设置优先。默认 yyyy-mm-dd。 返回值总是 yyyy-mm-dd（HTML5日期输入 - RFC3339完整日期格式）
宽度百分比 * 0% - 100% (额外) 使用百分比，输入将不会占用全部宽度，您可以将元素对齐在同一行。重要提示：指定此选项，则忽略描述和错误消息

JavaScript实现

用法

    <script src="mobileforms.libraries.js"></script>
    <script src="mobileforms.utils.js"></script>
    <script src="mobileforms.populator.js"></script>
    <script src="mobileforms.builder.js"></script>
    <script src="mobileforms.js"></script>
    <script>
        var params = {
            jsonForm : form1,
            ...
        };
        var mobileform = new MobileForms(params);
    </script>

参数

参数 必需 默认值
jsonForm 是 null JSON. 表单定义
jsonPopulateData 否 null JSON. 填充表单的数据
只读 否 false 布尔值。 true 设置只读表单（必需 jsonPopulateData）
表单ID 否 'form' 字符串。通过ID标识表单标签
表单容器 否 'body' 选择器（jQuery）。表单将在该HTML元素内部生成
成功回调 否 null 函数。callback(data)。
data = json数据（字符串）
事件回调 否 null 函数。callback(event, element, value)。
event = 事件类型（焦点、更改、提交等）
element = 字段名/ID
value = 当前字段值

函数

函数
getFormDataValidated() 返回已验证的JSON序列化表单数据，如果表单尝试提交
getFormData() 返回实际的JSON序列化表单数据（不进行验证）
setReadOnly(bool) 更改到只读/可编辑模式（只读时必需 jsonPopulateData）
populateWithData(JSON) 设置异步 jsonPopulateData 值并覆盖当前表单填充