## 表单如何制作呢?
* 如果你需要表单,你需要到后台添加表单类型

* 我的留言表单设置的字段有内容,地址,姓名,联系电话,邮箱,如下图:

* 我们在后台设置了如下字段了便可以在前台使用留言表单
**你可以参考如下的示例代码,我用的是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}
- 关于蠕虫CMS
- 系统基础
- 环境需求
- 系统安装
- 后台操作
- 系统基本设置
- 系统配置设置
- 模块管理
- 栏目操作
- 内容操作
- 辅助栏目
- 专题操作
- 表单管理
- 友情链接管理
- 导航管理
- 导航链接
- 会员管理
- 用户组列表
- 用户字段管理
- 用户列表
- 统计管理
- 前台操作
- 图片上传
- CMS模块-主栏目内容
- CMS模块-主栏目
- 富文本编辑器
- 文本文档
- 其他内页的修改
- 底部信息
- 模板制作
- 模板包含文件
- 基础模板文件的讲解
- 前台风格目录讲解
- 首页的编写文件目录讲解
- 栏目列表的编写文件目录讲解
- 文章内容的编写文件目录讲解
- 辅栏目列表的编写文件目录讲解
- 专题分类列表的编写文件目录讲解
- 专题列表的编写文件目录讲解
- 单篇文章的编写文件目录讲解
- 自定义风格目录
- 跳转链接的格式
- 栏目列表文件调用字段讲解
- 文章内容详情页文件调用字段讲解
- 辅栏目列表文件调用字段讲解
- 专题列表文件调用字段讲解
- 专题文件调用字段讲解
- 单篇文件调用字段讲解
- block模板的分块替换
- 新做风格注意事项
- 相关栏目名称的调用
- 列表页的制作和列表分页
- 文章内容页上一篇下一篇的使用
- 标签快速入门
- 标签进阶之图片上传
- 文本代码的标签使用
- 模板中常用的系统标签数据处理
- 在dome上写cx-click类进行点击操作
- 表单的相关操作
- 系统标签操作指南
- 变量输出
- 标签嵌套
- 资源文件
- 条件判断
- 比较标签
- 循环标签
- 包含文件
- 模板继承
- 二次开发