layui 写一个表单,包含:报表名称(文本输入框),报表组(可输入,可下拉的文本框),报表路径(文本输入框),报表抽样条件路径(文本输入框),是否启用(开关)
时间: 2023-11-16 08:05:33 浏览: 33
可以使用 layui 的 form 模块和 laydate 模块来实现表单的编写。
HTML 代码:
```html
<form class="layui-form" action="">
<div class="layui-form-item">
<label class="layui-form-label">报表名称</label>
<div class="layui-input-block">
<input type="text" name="reportName" required 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="text" name="reportGroup" 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="text" name="reportPath" required 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="text" name="samplePath" 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="checkbox" name="enable" lay-skin="switch" lay-text="启用|禁用">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
```
JavaScript 代码:
```javascript
//JavaScript代码区域
layui.use(['form', 'laydate'], function(){
var form = layui.form;
var laydate = layui.laydate;
//日期时间选择器
laydate.render({
elem: '#test1'
,type: 'datetime'
});
//监听提交
form.on('submit(formDemo)', function(data){
layer.msg(JSON.stringify(data.field));
return false;
});
});
```
其中,`lay-verify="required"` 表示该输入框为必填项,`lay-skin="switch"` 表示使用开关样式的复选框。提交表单时,可以通过 `data.field` 获取表单数据。