## 表单如何制作呢？ * 如果你需要表单，你需要到后台添加表单类型  * 我的留言表单设置的字段有内容，地址，姓名，联系电话，邮箱，如下图：  * 我们在后台设置了如下字段了便可以在前台使用留言表单 **你可以参考如下的示例代码，我用的是layui的form表单，表单验证也是用layui的，详情参照[layui文档](https://www.layui.com/doc/element/form.html)** ``` <form action="/api/form/article/save.html?mid=1" class="layout cx-fex layui-form ll-liuyan-form"> <div class="layout cx-fex"> <div class="cx-xs10 cx-xl24 cx-mag-t50 mobile-mag20 cx-form-group cx-fex-column"> <label class="cx-text-black-6" for="name">您的姓名</label> <div class="layout cx-form-itemnowarp cx-mag-t10"> <input class="cx-ipt-b" required lay-verify="required" type="text" name="liu_name" id="name"> </div> </div> <div class="cx-xs10 cx-xl24 cx-mag-t50 mobile-mag20 cx-form-group cx-fex-column"> <label class="cx-text-black-6" for="address">您的地址</label> <div class="layout cx-form-itemnowarp cx-mag-t10"> <input class="cx-ipt-b" required lay-verify="required" type="text" name="liu_address" id="address"> </div> </div> <div class="cx-xs10 cx-xl24 cx-mag-t50 mobile-mag20 cx-form-group cx-fex-column"> <label class="cx-text-black-6" for="phone">您的联系电话</label> <div class="layout cx-form-itemnowarp cx-mag-t10"> <input class="cx-ipt-b" lay-verify="required|phone" type="text" name="liu_phone" id="phone"> </div> </div> <div class="cx-xs10 cx-xl24 cx-mag-t50 mobile-mag20 cx-form-group cx-fex-column"> <label class="cx-text-black-6" for="email">您的邮箱</label> <div class="layout cx-form-itemnowarp cx-mag-t10"> <input class="cx-ipt-b" lay-verify="email" type="text" name="liu_email" id="email"> </div> </div> <div class="layout cx-mag-t50 mobile-mag20 cx-form-group cx-fex-column"> <label class="cx-text-black-6">内容</label> <div class="layout cx-form-itemnowarp cx-mag-t10"> <textarea class="cx-ipt-b" required lay-verify="required" rows="5" cols="5" type="text " name="content" id="title"></textarea> </div> </div> </div> <div class="layout cx-fex-c"> <input type="hidden" name="mid" value="1"> <input type="hidden" name="title" value="留言"> <button class="cx-xs6 cx-xl24 cx-button-b cx-bg-black cx-mag-t50 mobile-mag20" lay-submit lay-filter="formDemo">提交</button> </div> </form> ``` * `action="/api/form/article/save.html?mid=1"`这个url是表单提交的url,`mid=id`这个id你要看后台你需要调用的表单的id为多少，后台添加的留言表单id为1所以`mid=1` * `name="liu_name"`表单的name是要与后台的字段键名相对应，`liu_name`即为姓名的如下图：  * ` lay-verify="required"` 这是验证表单不能为空 * ` lay-verify="email"`验证邮箱 * `lay-verify="required|phone"`验证手机号码 * `<button class="cx-xs6 cx-xl24 cx-button-b cx-bg-black cx-mag-t50 mobile-mag20" lay-submit lay-filter="formDemo">提交</button>`提交按钮上要写上` lay-submit lay-filter="formDemo"` * * [ ] **在js中写上如下脚本即可提交表单：** ``` layui.define(['layer', 'form','element','carousel','util','laydate','laytpl','laypage'], function(exports) { let $ = layui.jquery, layer = layui.layer, layelement = layui.element, laycarousel = layui.carousel, layutil = layui.util, layform = layui.form, laytpl = layui.laytpl, laydate = layui.laydate, laypage = layui.laypage; let see = { // post提交数据 postUrl: function (url, data = '', fun = '') { layer.load(1); $.post(url, data, function (res) { layer.closeAll('loading'); if (typeof fun == "function") { fun(res); } else { layer.msg(res.msg, {}, function () { if (res.code == '1') { return true; } else if (res.code == '0') { return false; } }) } }).fail(function () { layer.closeAll('loading'); layer.alert('系统错误，请稍后再试！'); }); } } layform.on('submit(formDemo)', function(data) { let uri = data.form.action; see.postUrl(uri, data.field, function(res) { layer.msg(res.msg, { time: 500 }, function() { if (res.code == '1' && res.url) { window.location.reload(); } }); }); return false; }); $('body').on('click','.cx-click',function () { let a = $(this), b = a.data('type'); see[b] ? see[b].call(this, a) : "" }); exports('app', {}); ``` * 在js脚本中 ` layform.on('submit(formDemo)', function(data) {})`意思是监听submit提交，这个`submit()`这个括号里的东西要与`button`上面`lay-filter="formDemo"`它的值一致 * ``` layform.on('submit(\*)', function(data){ console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象 console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回 console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value} return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。 }); ``` * 使用see中的 `postUrl(uri, data.field, function(res) {})`传入参数uri，`uri = data.form.action`为form上面action的值`/api/form/article/save.html?mid=1` * data.field当前容器的全部表单字段，名值对形式：{name: value}