使用layui前端框架弹出form表单以及提交的示例_layui弹窗表单,layui弹出form表单资源-CSDN下载

50 浏览量 2020-10-16 03:09:52 上传评论收藏 45KB PDF 举报

在本文中，我们将深入探讨如何使用layui前端框架来弹出form表单并进行数据提交。layui是一款基于HTML5和CSS3的轻量级前端组件库，它提供了丰富的UI组件和强大的交互功能，使得Web开发更加便捷高效。下面，我们就按照步骤来详细讲解这个示例。 **第一步：引入layui相关文件** 在开始之前，你需要在HTML页面中引入layui的基本样式文件（layui.css）和核心脚本文件（layui.js）。这两个文件是layui框架的基础，它们为页面提供了样式支持和组件的运行环境。 ```html <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://www.layui.com/layui/css/layui.css"> <script src="https://www.layui.com/layui/layui.js"></script> </head> <body>  </body> </html> ``` **第二步：实现弹出提示框** 在layui中，我们可以使用`layer`模块来创建弹窗。例如，当用户点击删除按钮时，会弹出一个确认提示框询问用户是否真的要执行删除操作。在示例代码中，`.del`是删除按钮的class，点击后会触发`onclick`事件。 ```javascript $(".del").click(function () { var id = $(this).attr("id"); layer.alert('您确定要删除操作吗?', { skin: 'layui-layer-molv', closeBtn: 1, anim: 1, btn: ['确定', '取消'], icon: 6, yes: function () { $.ajax({ type: "POST", url: "@Url.Action("Delete", "UserInfo")", data: { id: id }, success: function (Data) { if (Data == "ok") { location.reload(); } else { layer.msg('删除失败'); } }, error: function () { alert("出现错误"); return false; } }); }, btn2: function () { layer.msg('取消'); } }); }); ``` **第三步：创建添加按钮** 在页面中添加一个“添加”按钮，当用户点击这个按钮时，将触发一个函数，用于弹出form表单。在这个例子中，`func7`函数用于打开一个新的页面层，展示添加用户的信息表单。 ```html <div class="layui-form"> <a onclick="func7();" class="layui-btn layui-inline fl w130">添加</a>  </div> ``` **第四步：弹出form表单并提交** `func7`函数使用layui的`layer.open`方法来创建一个新的页面层，其中`content`参数是表单的URL。当用户填写完表单并提交时，可以使用Ajax进行后台数据处理。 ```javascript function func7() { layer.open({ type: 1, skin: 'layui-layer-rim', area: ['350px', '360px'], content: "@Url.Action("AddUser", "UserInfo")" // 调到新增页面 }); } ``` 在这个表单中，layui提供了`lay-verify`属性来进行表单验证。例如，`lay-verify="required"`表示该字段为必填项，`lay-verify="phone"`则用于验证手机号码格式。 ```html <form class="layui-form"> <div class="layui-form-item"> <label class="layui-form-label">姓名</label> <div class="layui-input-block"> <input type="text" name="username" lay-verify="required" placeholder="请输入姓名"> </div> </div>  <div class="layui-form-item"> <div class="layui-input-block"> <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button> <button type="reset" class="layui-btn layui-btn-primary">重置</button> </div> </div> </form> ``` 在这个例子中，`lay-submit`和`lay-filter`属性用于指定表单的提交事件，当用户点击“立即提交”按钮时，layui会触发对应的Ajax请求，将表单数据发送到服务器。总结，layui通过其强大的组件和简单易用的API，为我们提供了一种优雅的方式来创建弹出form表单和处理表单提交。在实际开发中，你可以根据需求自定义表单样式、验证规则以及交互逻辑，以满足项目的各种需求。同时，layui还提供了分页、表格、下拉选择等众多组件，为前端开发带来极大的便利。

资源详情

资源评论

资源推荐

使用使用layui前端框架弹出前端框架弹出form表单以及提交的示例表单以及提交的示例

今天小编就为大家分享一篇使用layui前端框架弹出form表单以及提交的示例，具有很好的参考价值，希望对大

家有所帮助。一起跟随小编过来看看吧

第一步第一步: 引用两个文件引用两个文件

第二步第二步: 点击删除按钮弹出提示框点击删除按钮弹出提示框

/*删除开始*/

$(".del").click(function () {

var id = $(this).attr("id");

layer.alert('您确定要删除操作吗?', {

skin: 'layui-layer-molv' //样式类名自定义样式

, closeBtn: 1 // 是否显示关闭按钮

, anim: 1 //动画类型

, btn: ['确定', '取消'] //按钮

, icon: 6 // icon

, yes: function () {

//layer.msg('确定')

$.ajax({

type: "POST",

url: "@Url.Action("Delete", "UserInfo")",

data: { id: id },

success: function (Data) {

if (Data == "ok") {

location.reload();

}

else {

layer.msg('删除失败')

}

error: function () {

alert("出现错误");

return false;

}

}) //ajax结束

}

, btn2: function () {

layer.msg('取消')

}

});

})

/*删除结束*/

第三步第三步: 放一个添加按钮放一个添加按钮

<tr>

</tr>

@foreach (var item in ViewData["UserList"] as List<UserInfo>)

{

<tr>

<td>@item.uName</td>

<td>@item.uAdress</td>

<td>@item.uPhone</td>

</tr>

}

</table>

</div>

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

评论收藏

内容反馈

weixin_38618024

粉丝: 0

使用layui前端框架弹出form表单以及提交的示例

评论0

最新资源

使用layui前端框架弹出form表单以及提交的示例

评论0

layui的表单提交以及验证和修改弹框的实例

layui弹出层按钮提交iframe表单的方法

弹出层表单提交数据完美解决

基于layui点击按钮弹出包含表单的窗口

layui 对弹窗 form表单赋值的实现方法

关于layui表单中按钮自动提交的解决方法

layui 实现表单和文件上传一起传到后台的例子

yii框架表单模型使用及以数组形式提交表单数据示例

解决layui前端框架 form表单,table表等内置控件不显示的问题

laravel-form-validation:这是一个全面PHP 7 Form Validation示例教程。 在本教程中，我们将学习如何从头开始创建表单以及如何使用Laravel的内置validate方法来验证表单的值。

【学习笔记】前端框架LayUI.pdf

layui 解决富文本框form表单提交为空的问题

layui清空,重置表单数据的实例

layui 解决form表单点击无反应的问题

layui后台管理系统完整版免费版本

layui实现form表单同时提交数据和文件的代码

JS提交form表单实例分析

浅谈layui 绑定form submit提交表单的注意事项

javascript弹出层表单提交代码

LayUI弹出层（html）

jquery实现通过按钮弹出表单

jquery实现弹窗表单填写提交

layer关闭弹出窗口触发表单提交问题的处理方法

layer弹出框确定前验证:弹出消息框的方法(弹出两个layer)

mmLayer,是一个强大的弹出层（窗）组件，它几乎能解决你项目中所有的弹出需求

最新资源

laravel-form-validation:这是一个全面PHP 7 Form Validation示例教程。在本教程中，我们将学习如何从头开始创建表单以及如何使用Laravel的内置validate方法来验证表单的值。