首页 > 其他分享 >layui 表单提交

layui 表单提交

时间:2023-07-25 22:55:37浏览次数:32  
标签:layer form layui 表单 提交 跳转

新手小白,使用layui的时候,表单如何像普通表单那样提交呢?

如下:只需要在回调函数里 返回true,并且在form表单正常添加 action 和 method 属性就行!

如果返回false;将会拦截 阻止默认 form 跳转,此时可以在函数里通过 ajax 进行数据交互 

<form class="layui-form" action="${basepath}/charpter07/logion" method="post">
    <div class="demo-login-container">
        <div class="layui-form-item">
            <div class="layui-input-wrap">
                <div class="layui-input-prefix">
                    <i class="layui-icon layui-icon-username"></i>
                </div>
                <input type="text" name="username" value="" lay-verify="required" placeholder="用户名" lay-reqtext="请填写用户名"
                       autocomplete="off" class="layui-input" lay-affix="clear">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-wrap">
                <div class="layui-input-prefix">
                    <i class="layui-icon layui-icon-password"></i>
                </div>
                <input type="password" name="password" value="" lay-verify="required" placeholder="密   码"
                       lay-reqtext="请填写密码" autocomplete="off" class="layui-input" lay-affix="eye">
            </div>
        </div>

        <div class="layui-form-item">
            <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="demo-login">登录</button>
        </div>
    </div>
</form>

<script>
    layui.use(function () {
        var form = layui.form;
        var layer = layui.layer;
        // 提交事件
        form.on('submit(demo-login)', function (data) {
           
            return true; // 返回false 阻止默认 form 跳转
        });
    });
</script>

 

标签:layer,form,layui,表单,提交,跳转
From: https://www.cnblogs.com/ruber/p/17581252.html

相关文章

  • 每日汇报 第五周第二天 html表单
    今日学习:html表单;1<!DOCTYPEhtml>2<htmllang="en">3<head>4<metacharset="UTF-8">5<title>RegistrationForm</title>6<linkrel="stylesheet"href="styles-......
  • 摆脱效率低的办公,可以了解流程表单设计器
    目前,低效率的办公已经无法满足市场需求。那么,怎么样才能实现高效率办公?通过什么样的平台提质增效?低代码开发平台是目前在现代化办公环境中较为流行的平台,其中的流程表单设计器易操作、灵活、便捷,深得广大用户的青睐和喜欢。今天,我们一起来了解低代码开发平台以及流程表单设计器的......
  • 如何实现多模块分别提交到不同的远程仓库?
    利用图形化界面,在提交推送里找不到新的模块?注意先要初始化新模块的本地仓库,即gitinit(在GUI中不好操作,直接在终端操作即可)之后才能进行其他操作!!!......
  • php根据提交ip获取省市的方法
    信息港根据现有IP地址获取其地理位置(省份,城市等)的方法functionGetIpLookup($ip=''){if(empty($ip)){return'请输入IP地址';}$res=@file_get_contents('http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js&ip='.$ip);if(empt......
  • 表单样式问题
    表单:属于行内块     标准盒子模型内边距和边框会把各盒子撑大 怪异个桌子模型/内边距和边框不会把quchu      去除焦点为问题   关于输入框瀚航的问题         表单继承文本属性   下拉菜单    ......
  • Python之Rich库-打印彩色字体,表单,进度条与状态动画
      https://rich.readthedocs.io/en/latest/introduction.html Introduction¶RichisaPythonlibraryforwritingrichtext(withcolorandstyle)totheterminal,andfordisplayingadvancedcontentsuchastables,markdown,andsyntaxhighlightedcode.U......
  • 记录实现复制EXCEL数据到前端表单
     背景是用户需要把原本在Excel上填报的数据搬运到线上系统进行填报,在做了一个带输入框的表格之后用户提出希望能够实现将EXCEL上的数据复制黏贴到这个表格里的功能。 实现功能的整体思路是在input框上监听黏贴事件,获取到复制的数据。由于在Excel中\t表示换格,\n表示换行,所以......
  • 解决element ui 下拉框表单验证切换选项就直接触发的问题
    elementui下拉框表单验证正确使用步骤1.确保form组件的:model属性绑定了表单的数据对象  2.确保form组件的rules绑定了对应的rule 3.确认要验证的表单item绑定了对应的prop属性注意:prop属性的名称要和rule里面的名称一样并且和v-model的属性名称一样才行 完成以上......
  • python点击提交按钮弹出确定提交对话框,如果点击确定,则弹出考试结果对话框(需要
    Python点击提交按钮弹出确定提交对话框,如果点击确定,则弹出考试结果对话框在开发Web应用程序时,经常需要与用户进行交互,其中一种常见的交互方式是通过弹出对话框来获取用户的确认或显示相关信息。本文将介绍如何使用Python实现点击提交按钮弹出确定提交对话框,并在点击确定后弹出考试......
  • element的el-input,想要输入表单的时候只输入范围数字
    <el-form-itemlabel="通过门限:"prop="passRate"> <el-input placeholder="请输入" type="number" @input="oninput($event)" clearable v-model="addReviewForm.passRate&qu......