用layui美化表单 - 提升用户体验
<p>///'<script src=///'https://////cdn.staticfile.org///jquery///3.2.1///jquery.min.js///'></script>/n<script src=///'https://////cdn.staticfile.org///layui///2.5.6///layui.min.js///'></script>/n<link rel=///'stylesheet///' href=///'https://////cdn.staticfile.org///layui///2.5.6///css///layui.css///'/>/n/n<form id=///'myform///' action=///'method!goodseditsave///' method=///'post///'>/n <input type=///'hidden///' name=///'id///' value=///'${goods.id}///'/>/n <table cellpadding=///'0///' cellspacing=///'0///' class=///'layui-table///' width=///'100%///'>/n <tr>/n <td width=///'120///'>标题</td>/n <td colspan=///'3///'><input type=///'text///' class=///'layui-input///' name=///'title///' value=///'${goods.title}///' lay-verify=///'required///'/></td>/n </tr>/n/n <tr>/n <td>物品种类：</td>/n <td colspan=///'3///'><select name=///'cid///' id=///'search-goods-type///' lay-verify=///'required///'>/n <option value=///'1///' <c:if test=///'${goods.category.id == 1}///'>selected</c:if>>卡类证件</option>/n </select></td>/n/n </tr>/n <tr>/n <td>物品名称：</td>/n <td><input type=///'text///' class=///'layui-input///' name=///'name///' value=///'${goods.name}///' lay-verify=///'required///'></td>/n <td>备注：</td>/n <td><input type=///'text///' class=///'layui-input///' name=///'remark///' value=///'${goods.remark}///'/>/n </tr>/n/n <tr>/n <td>丢失时间：</td>/n <td><input type=///'text///' class=///'layui-input///' id=///'datepicker///' name=///'happentime///' value=///'<fmt:formatDate value=///'${goods.happentime}///' pattern=///'yyyy-MM-dd///' />///' lay-verify=///'required///'/></td>/n <td>丢失地点：</td>/n <td><input type=///'text///' class=///'layui-input///' name=///'address///' value=///'${goods.address}///' lay-verify=///'required///'/>/n </tr>/n/n <tr>/n <td>您的手机：</td>/n <td><input type=///'text///' class=///'layui-input///' name=///'mobile///' value=///'${goods.mobile}///' lay-verify=///'required|phone///'/></td>/n <td>您的QQ：</td>/n <td><input type=///'text///' class=///'layui-input///' name=///'qq///' value=///'${goods.qq}///'/>/n </tr>/n/n <tr>/n <td>详情描述：</td>/n <td colspan=///'3///'><textarea id=///'note-content///' name=///'info///' class=///'layui-textarea///' cols=///'100///'>${goods.info}</textarea></td>/n/n </tr>/n/n <tr>/n <td>状态：</td>/n <td colspan=///'3///'><select name=///'state///' lay-verify=///'required///'>/n <option value=///'0///' <c:if test=///'${goods.state == 0}///'>selected</c:if>>寻找中</option>/n <option value=///'1///' <c:if test=///'${goods.state == 1}///'>selected</c:if>>已找到</option>/n </select>(选择已找到，请填写以下<c:if test=///'${goods.typename=='lost'}///'>帮忙找到者</c:if><c:if test=///'${goods.typename=='find'}///'>领取人</c:if>信息)</td>/n/n </tr>/n/n <tr>/n <td>姓名：</td>/n <td><input type=///'text///' class=///'layui-input///' name=///'username///' value=///'${goods.claimuser.username}///'/></td>/n <td>Email：</td>/n <td><input type=///'text///' class=///'layui-input///' name=///'email///' value=///'${goods.claimuser.email}///'></td>/n </tr>/n/n <tr>/n <td width=///'120///'>手机：</td>/n <td colspan=///'3///'><input type=///'text///' class=///'layui-input///' name=///'tel///' placeholder=///'请填写手机号码///' value=///'${goods.claimuser.tel}///'/></td>/n </tr>/n </table>/n/n <div class=///'layui-form-item layui-layout-admin///'>/n <div class=///'layui-input-block///'>/n <input type=///'hidden///' name=///'forward///' value=///'///'/>/n <button class=///'layui-btn///' lay-submit lay-filter=///'formSubmit///'>提交</button>/n <button type=///'reset///' class=///'layui-btn layui-btn-primary///'>取消</button>/n </div>/n </div>/n</form>/n/n<script>/n layui.use([///'form///', ///'laydate///'], function () {/n var form = layui.form;/n var laydate = layui.laydate;/n /n form.render();/n /n laydate.render({/n elem: ///'#datepicker///',/n format: ///'yyyy-MM-dd///'/n });/n /n form.verify({/n phone: function(value, item){/n if(!/^1//d{10}$/.test(value)){/n return ///'请输入正确的手机号码///';/n }/n }/n });/n /n form.on(///'submit(formSubmit)///', function(data){/n // 提交表单逻辑/n return false;/n });/n });/n</script>/n///</p>
原文地址: https://www.cveoy.top/t/topic/ppni 著作权归作者所有。请勿转载和采集!