layui插件表单验证提交触发提交的例子


Posted in Javascript onSeptember 09, 2019

废话不多说,大家直接看代码吧!

<!------HTML部分--------->

<form class="layui-form" action="{:url('login/login')}" method="post">
    <div class="logi_content">
     <p class="tit">管理系统</p>
     <div class="layui-form-item">
      <label class="layui-form-label">账号:</label>
      <div class="layui-input-block">
       <input type="text" name="username" lay-verify="required|username" autocomplete="on" placeholder="请输入您的邮箱" class="layui-input">
      </div>
     </div>
     <div class="layui-form-item">
      <label class="layui-form-label">密码:</label>
      <div class="layui-input-block">
       <input type="password" name="password" lay-verify="required|pass" autocomplete="on" placeholder="请输入密码" class="layui-input">
      </div>
     </div>
     <ul class="login_ul">
      <li class="de_lu">
       <img src="__IMG__/select.png" alt="" class="select" />
       <img src="__IMG__/selected.png" alt="" class="selecteds" /> 自动登录
      </li>
      <li class="forgit">
       <a href="">忘记密码?</a>
      </li>
     </ul>
     <ul class="reset">
      <li class="di">
       <a class='enterSubmit' id='enterSubmit' lay-submit lay-filter="*">登录</a>
      </li>
      <li class="re">
       <a href="">重置</a>
      </li>
     </ul>
    </div>
    </form>

<!------js部分--------->

layui.use(['layer','upload','form'],function() {
   var layer = layui.layer,
   form = layui.form;
   /**
   * 通用表单验证
   */
   form.verify({
    username:[/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/,'账号格式不正确'],
    pass: [/^[\S]{6,12}$/,'密码必须6到12位,且不能出现空格']
   }); 
   /**
   * 通用表单提交(AJAX方式)
   */
   form.on('submit(*)', function (data) {
    $.ajax({
     url: data.form.action,
     type: data.form.method,
     data: $(data.form).serialize(),
     success: function (info) {
      if (info.code === 1) {
       setTimeout(function () {
        location.href = info.url;
       }, 1000);
      }
      layer.msg(info.msg);
     }
    });
    return false;
   });
 })
 
   //回车键触发提交
   $("input").keydown(function(event){
    if (event.keyCode == 13) {
     document.getElementById("enterSubmit").click();
    }
   })

以上这篇layui插件表单验证提交触发提交的例子就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
判断JavaScript对象是否可用的最正确方法分析
Oct 03 Javascript
javascript中的nextSibling使用陷(da)阱(keng)
May 05 Javascript
详谈JavaScript内存泄漏
Nov 14 Javascript
jQuery对指定元素中指定字符串进行替换的方法
Mar 17 Javascript
九种原生js动画效果
Nov 11 Javascript
微信小程序 video组件详解
Oct 25 Javascript
微信小程序 网络API发起请求详解
Nov 09 Javascript
Angular实现的自定义模糊查询、排序及三角箭头标注功能示例
Dec 28 Javascript
dts文件中删除一个node或属性的操作方法
Aug 05 Javascript
Vue检测屏幕变化来改变不同的charts样式实例
Oct 26 Javascript
原生JS封装vue Tab切换效果
Apr 28 Vue.js
详解Vue的sync修饰符
May 15 Vue.js
Node.js之删除文件夹(含递归删除)代码实例
Sep 09 #Javascript
layer.confirm点击第一个按钮关闭弹出框的方法
Sep 09 #Javascript
微信小程序 wx:for遍历循环使用实例解析
Sep 09 #Javascript
layer关闭当前窗口页面以及确认取消按钮的方法
Sep 09 #Javascript
微信小程序 checkbox使用实例解析
Sep 09 #Javascript
js之切换全屏和退出全屏实现代码实例
Sep 09 #Javascript
使用Easyui实现查询条件的后端传递并自动刷新表格的两种方法
Sep 09 #Javascript
You might like
一个php导出oracle库的php代码
2009/04/20 PHP
PHP统计目录下的文件总数及代码行数(去除注释及空行)
2011/01/17 PHP
解析在PHP中使用mysqli扩展库对mysql的操作
2013/07/03 PHP
浅谈PHP接收POST数据方式
2015/06/05 PHP
thinkPHP5实现的查询数据库并返回json数据实例
2017/10/23 PHP
php+redis实现商城秒杀功能
2020/11/19 PHP
JavaScript实现Sleep函数的代码
2007/03/04 Javascript
php gethostbyname获取域名ip地址函数详解
2010/01/24 Javascript
JavaScript Event学习第八章 事件的顺序
2010/02/07 Javascript
Ext.get() 和 Ext.query()组合使用实现最灵活的取元素方式
2011/09/26 Javascript
jQuery1.6 使用方法一
2011/11/23 Javascript
js如何获取兄弟、父类等节点
2014/01/06 Javascript
JQuery日历插件My97DatePicker日期范围限制
2016/01/20 Javascript
基于jquery二维码生成插件qrcode
2017/01/07 Javascript
js实现颜色阶梯渐变效果(Gradient算法)
2017/03/21 Javascript
Vue页面骨架屏注入方法
2018/05/13 Javascript
Vue自定义弹窗指令的实现代码
2018/08/13 Javascript
javascript事件监听与事件委托实例详解
2019/08/16 Javascript
关于vue项目中搜索节流的实现代码
2019/09/17 Javascript
解决vue加scoped后就无法修改vant的UI组件的样式问题
2020/09/07 Javascript
[02:20]DOTA2英雄基础教程 黑暗贤者
2013/12/19 DOTA
Python 列表(List) 的三种遍历方法实例 详解
2017/04/15 Python
Python 使用指定的网卡发送HTTP请求的实例
2019/08/21 Python
Django中ORM找出内容不为空的数据实例
2020/05/20 Python
python爬虫请求头的使用
2020/12/01 Python
详解webapp页面滚动卡顿的解决办法
2018/12/26 HTML / CSS
精美的手工家居和生活用品:Nkuku
2019/11/01 全球购物
Silk Therapeutics官网:清洁、抗衰老护肤品
2020/08/12 全球购物
西安夏日科技有限公司Java笔试题
2013/01/11 面试题
教育学专业毕业生的自我鉴定
2013/11/26 职场文书
大学生求职工作的自我评价
2014/02/13 职场文书
2014年企业党建工作总结
2014/12/18 职场文书
新员工考核评语
2014/12/31 职场文书
人力资源部岗位职责
2015/02/11 职场文书
会计专业自荐信范文
2019/05/22 职场文书
python通配符之glob模块的使用详解
2021/04/24 Python