## 表单如何制作呢? * 如果你需要表单,你需要到后台添加表单类型 ![](https://img.kancloud.cn/89/86/89867cc1c8a4d49b32cc2906244dbd6a_1920x937.png) * 我的留言表单设置的字段有内容,地址,姓名,联系电话,邮箱,如下图: ![](https://img.kancloud.cn/24/fb/24fb0aa987acc8ad644f77ba7e5c740f_1920x937.png) * 我们在后台设置了如下字段了便可以在前台使用留言表单 **你可以参考如下的示例代码,我用的是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`即为姓名的如下图: ![](https://img.kancloud.cn/22/76/2276e268c33221ca8c91f0773c8e92e2_1370x51.png) * ` 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}