## 说明
**表单构建器**提供的表单字段类型(含自定义字段类型)除了在表单构建器里面集成使用外,还可以单独调用渲染使用。
> 提示!字段集合顶部容器须携带属性lay-filter="{{formId}}"
* html
```html
<div class="layui-form" lay-filter="test_form">
<div class="field-box text">
<div class="title">单行文本框示例</div>
<div class="control"></div>
</div>
...
</div>
```
* js
```javascript
layui.use(['yunj'],function (){
// 配置项
let options = {
formId:"test_form",
key:"text_key",
args:{
"placeholder":"测试文本框"
}
};
yunj.formField("text",options).then(field=>{
// 指定父容器渲染
return field.render(`.field-box.text .control`).then(res=>{});
}).then(field=>{
// field为当前字段对象
}).catch(err=>console.log(err));
});
```
## 方法 **yunj.formField(type,options)**
构建字段对象。
此方法返回值是一个promise对象,执行成功返回字段对象,根据字段对象可渲染字段html结构 / 设置字段值 / 获取字段值
* 参数
| key | 类型 | 是否必须 | 说明 |
| --- | --- | --- | --- |
| type | string | 是 | 字段类型,详见:[字段配置](https://www.kancloud.cn/worklz/yunj_admin_tp51/2526419) |
| options | object | 是 | 配置项 |
* 配置项参数
| key | 类型 | 是否必须 | 说明 |
| --- | --- | --- | --- |
| formId | string | 是 | 表单id |
| key | string | 是 | 字段key |
| args | object | 否 | [字段配置](https://www.kancloud.cn/worklz/yunj_admin_tp51/2526419) |
注意:字段配置args中`type`属性不再必须(由`yunj.formField(type,options)`第一个参数取代),`title`/`desc`属性不设置的情况下,不再渲染对应属性的html结构。
## 常用方法
* **yunj.formClear(formId)**
清空表单id对应的所有字段值
* **yunj.formReset(formId)**
重置表单id对应的所有字段值
* **yunj.formData(formId,validate)**
获取表单id对应的所有字段值,传入validate则会自动校验参数。示例如下:
```javascript
layui.use(["yunj","validate"],()=>{
let validate = yunj.validate;
let data = yunj.formData("test",validate);
});
```
- 序言
- 基础
- 安装
- 目录结构
- 配置
- 版本
- 控制器
- 使用说明
- 视图模板
- 使用说明
- 区块重写
- seo
- headStyle
- headScript
- content
- script
- 验证器
- TP验证器
- 使用说明
- 自动处理
- 数据处理
- 前端验证器
- 概述
- 调用示例
- 通用验证规则
- 表单构建器
- 基础示例
- 初始化
- 链式操作
- tab
- url
- field
- fieldValidate
- button
- load
- submit
- 渲染输出
- 字段配置
- 使用说明
- 隐藏域(hidden)
- 文本框(text)
- 文本域(textarea)
- 密码框(password)
- 富文本(editor)
- 文档编辑(markdown)
- 下拉选框(select)
- 单选框(radio)
- 复选框(checkbox)
- 开关(switch)
- 日期(date)
- 时间日期(datetime)
- 年份(year)
- 月份(month)
- 时间(time)
- 单图(img)
- 多图(imgs)
- 单文件(file)
- 多文件(files)
- 取色器(color)
- 地区联动(area)
- 下拉搜索(dropdownSearch)
- 树(tree)
- 自定义字段
- 单一字段调用
- 概述
- 示例
- 表格构建器
- 基础示例
- 初始化
- 链式操作
- state
- url
- page
- limit
- limits
- filter
- filterValidate
- toolbar
- defaultToolbar
- import
- cols
- count
- items
- event
- 渲染输出
- 表头配置
- 使用说明
- 枚举(enum)
- 时间日期(datetime)
- 单图(img)
- 多图(imgs)
- 单文件(file)
- 多文件(files)
- 拖拽排序(dragSort)
- 颜色呈现(color)
- 地区呈现(area)
- 操作栏(action)
- 自定义表头
- JS事件
- 异步事件监听
- 导入构建器
- 基础示例
- 初始化
- 链式操作
- sheet
- cols
- colsValidate
- limit
- tips
- row
- rows
- 渲染输出
- 主题开发
- 实现步骤
- 系统主题
- 注意
- PHP公共方法库
- 配置
- yunj_config
- 构建器
- YF
- YT
- YI
- 重定向
- url_tips
- redirect_tips
- throw_redirect
- 响应输出
- response_msg
- response_json
- success_json
- error_json
- throw_json
- throw_success_json
- throw_error_json
- 数组
- array_eq
- array_in
- array_supp
- array_depth
- array_insert
- array_key_prefix
- 验证
- is_mobile
- is_positive_int
- is_positive_integer
- is_json
- is_datetime
- is_md5_result
- 时间日期
- msectime
- 字符串
- rand_char
- filter_sql
- start_with
- exception_to_str
- 数据加解密
- aes_encrypt
- aes_decrypt
- rsa_encrypt
- rsa_decrypt
- rsa_sign
- rsa_sign_verify
- JS公共方法库
- 调用说明
- 数据类型
- varType
- 判断
- isMobile
- isObj
- isEmptyObj
- isArray
- isEmptyArray
- isString
- isEmptyString
- isBool
- isNumber
- isFloat
- isFunction
- isUndefined
- isJson
- isCsv
- isXls
- isXlsx
- 字符串
- fileExt
- fileNameExt
- currTimestamp
- currDatetime
- timestampFormat
- 对象
- objSupp
- 图片
- previewImg
- url
- url
- urlParam
- urlPushParam
- 页面
- openNewPage
- openTab
- openPopup
- rawPageWin
- redirectTab
- redirectLogin
- isPopupPage
- isTabPage
- currPageId
- close
- closeCurr
- closeAll
- 网络
- request
- 数据加解密
- aesEncrypt
- aesDecrypt
- rsaEncrypt
- rsaDecrypt
- rsaSign
- rsaSignVerify
- 附录
- 升级指导
- 更新日志