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 相关文章推荐
jquery 注意事项与常用语法小结
Jun 07 Javascript
JavaScript中为元素加上name属性的方法
May 09 Javascript
js constructor的实际作用分析
Nov 15 Javascript
JavaScript对象创建及继承原理实例解剖
Feb 28 Javascript
jquery自动将form表单封装成json的具体实现
Mar 17 Javascript
JavaScript 学习笔记之基础中的基础
Jan 13 Javascript
js基础知识(公有方法、私有方法、特权方法)
Nov 06 Javascript
JavaScript中的ajax功能的概念和示例详解
Oct 17 Javascript
jQuery 判断元素整理汇总
Feb 28 Javascript
基于JavaScript实现选项卡效果
Jul 21 Javascript
常用的9个JavaScript图表库详解
Dec 19 Javascript
vue中解决微信html5原生ios虚拟键返回不刷新问题
Oct 20 Javascript
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
Breeze 文章管理系统 v1.0.0正式发布
2006/12/14 PHP
PHP stream_context_create()作用和用法分析
2011/03/29 PHP
php中常用的预定义变量小结
2012/05/09 PHP
PHP简单读取PDF页数的实现方法
2016/07/21 PHP
JQuery 实现的页面滚动时浮动窗口控件
2009/07/10 Javascript
dojo随手记 gird组件引用
2011/02/24 Javascript
纯js实现瀑布流布局及ajax动态新增数据
2016/04/07 Javascript
js改变透明度实现轮播图的算法
2020/08/24 Javascript
JS实现密码框的显示密码和隐藏密码功能示例
2016/12/26 Javascript
node通过npm写一个cli命令行工具
2017/10/12 Javascript
JS严格模式知识点总结
2018/02/27 Javascript
vue父组件给子组件的组件传值provide inject的方法
2019/10/23 Javascript
简单了解JS打开url的方法
2020/02/21 Javascript
详解vue3.0 的 Composition API 的一种使用方法
2020/10/26 Javascript
[01:03:51]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第三场
2018/04/09 DOTA
Python实现简单多线程任务队列
2016/02/27 Python
多版本Python共存的配置方法
2017/05/22 Python
Pycharm 创建 Django admin 用户名和密码的实例
2018/05/30 Python
mac下如何将python2.7改为python3
2018/07/13 Python
使用PyQtGraph绘制精美的股票行情K线图的示例代码
2019/03/14 Python
python实现文件的备份流程详解
2019/06/18 Python
python把转列表为集合的方法
2019/06/28 Python
Python学习笔记之字符串和字符串方法实例详解
2019/08/22 Python
如何运行带参数的python脚本
2019/11/15 Python
基于h5py的使用及数据封装代码
2019/12/26 Python
pytorch ImageFolder的覆写实例
2020/02/20 Python
BeautifulSoup获取指定class样式的div的实现
2020/12/07 Python
css3 border-radius属性详解
2017/07/05 HTML / CSS
波兰购物网站:MALL.PL
2019/05/01 全球购物
存储过程的优缺点是什么
2015/01/10 面试题
运动会解说词100字
2014/01/31 职场文书
《放小鸟》教学反思
2014/04/20 职场文书
刑事辩护授权委托书
2014/09/13 职场文书
中学生检讨书范文
2014/11/03 职场文书
2014年小学教导处工作总结
2014/12/19 职场文书
Python道路车道线检测的实现
2021/06/27 Python