layui表单的使用

一、需要一个完整的form

  <form class="layui-form layui-form-pane search-form" action="${basePath}/operlog/logCheck.shtml" method="post">
                    <div class="layui-form-item" >
                        <label class="layui-form-label">业务模块</label>
                        <div class="layui-input-inline">
                            <select id="business-module" name="arg0" >
                                <option value="">请选择</option>
                            </select>
                            <input type="hidden" id="arg0" value="${(ret.arg0)!''}" />
                        </div>
                        <label class="layui-form-label">操作类型</label>
                        <div class="layui-input-inline">
                            <select id="operation-type" name="arg1">
                                <option value="">请选择</option>
                            </select>
                            <input type="hidden" id="arg1" value="${(ret.arg1)!''}" />
                        </div>

                        <label class="layui-form-label">日期选择</label>
                        <div class="layui-input-inline">
                            <input type="text" class="layui-input date date-picker time"
                                   data-date-format="yyyy-mm-dd" name="operationDate" value="${(ret.operationDate)!''}" >
                        </div>

                        <label class="layui-form-label">业务描述</label>
                        <div class="layui-input-inline">
                            <input type="text" name="arg2" value="${(ret.arg2)!''}" lay-verify="required" class="layui-input">
                        </div>


                        <div class="search-group">
                            <button type="button" class="btn btn-sm green operate-check">查询</button>
                        </div>
                    </div>
                </form>

二、js构建内容

      layui.use(['form', 'layedit', 'laydate'], function(){
            var form = layui.form
                ,layer = layui.layer
                ,layedit = layui.layedit
                ,laydate = layui.laydate;


            //监听提交
            form.on('submit(demo1)', function(data){
                layer.alert(JSON.stringify(data.field), {
                    title: '最终的提交信息'
                })
                return false;
            });


        });

三、引入css，js

<link rel="stylesheet" href="//res.layui.com/layui/dist/css/layui.css"  media="all">
<script src="//res.layui.com/layui/dist/layui.js" charset="utf-8"></script>

实现效果比较简单，只有几个输入框