layui form 转json
时间: 2023-09-17 17:09:17 浏览: 54
在 layui 中,form 表单提交时可以通过监听表单的 submit 事件来获取表单数据并转换为 JSON 格式。具体代码如下:
``` javascript
// 监听表单提交
form.on('submit(submitBtn)', function(data){
// 将表单数据转换为 JSON 格式
var jsonData = JSON.stringify(data.field);
// do something with jsonData
});
```
其中,submitBtn 是表单提交按钮的 lay-filter 属性值,data.field 是表单数据的 JSON 格式。需要注意的是,如果表单中有多个相同的 name 属性,data.field 只会返回一个值,需要使用数组来保存多个值。
相关问题
layui formdate 转json
假设您的 layui form 中有以下代码:
```html
<div class="layui-form-item">
<label class="layui-form-label">日期</label>
<div class="layui-input-block">
<input type="text" name="date" id="date" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
</div>
</div>
```
您可以使用以下 JavaScript 代码将其转换为 JSON 对象:
```javascript
var date = layui.form.val("formName").date;
var data = { "date": date };
var jsonData = JSON.stringify(data);
```
其中,`formName` 为您的 layui form 的名称。转换后的 JSON 对象将包含一个 `date` 属性,其值为日期选择器中选定的日期(例如 `2021-08-05`)。
layui form表单赋值
在 layui 中,可以使用 `form.val(formFilter, data)` 方法为表单元素赋值。其中,`formFilter` 为表单的过滤器,`data` 为要赋的值,可以是一个 JSON 对象。
示例代码如下:
```html
<form class="layui-form" lay-filter="test">
<div class="layui-form-item">
<label class="layui-form-label">用户名</label>
<div class="layui-input-block">
<input type="text" name="username" lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">密码</label>
<div class="layui-input-block">
<input type="password" name="password" lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
</div>
</div>
</form>
```
```javascript
// 给表单赋值
var data = {
username: 'admin',
password: '123456'
};
layui.form.val('test', data);
```
在以上示例中,我们为一个带有用户名和密码输入框的表单赋值,其中 `test` 是表单的过滤器,`data` 是要赋的值。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)