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>

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

宁漂打工仔

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值