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 解析url的search方法
Feb 09 Javascript
IE下写xml文件的两种方式(fso/saveAs)
Aug 05 Javascript
jquery无限级联下拉菜单简单实例演示
Nov 23 Javascript
基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用
May 12 Javascript
Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
Jun 23 Javascript
Zabbix添加Node.js监控的方法
Oct 20 Javascript
使用Vue.js创建一个时间跟踪的单页应用
Nov 28 Javascript
JSONP基础知识详解
Mar 19 Javascript
基于bootstrap按钮式下拉菜单组件的搜索建议插件
Mar 25 Javascript
input 标签实现输入框带提示文字效果(两种方法)
Oct 09 Javascript
JS实现匀速与减速缓慢运动的动画效果封装示例
Aug 27 Javascript
微信小程序实现下拉刷新动画
Jun 21 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
php文章内容分页并生成相应的htm静态页面代码
2010/06/07 PHP
php xml常用函数的集合(比较详细)
2013/06/06 PHP
php实现的双向队列类实例
2014/09/24 PHP
Nigma vs Alliance BO5 第一场2.14
2021/03/10 DOTA
javascript实现动态增加删除表格行(兼容IE/FF)
2007/04/02 Javascript
node.js中的http.response.getHeader方法使用说明
2014/12/14 Javascript
解决js函数闭包内存泄露问题的办法
2016/01/25 Javascript
Jquery修改image的src属性,图片不加载问题的解决方法
2016/05/17 Javascript
浅析JavaScript中的对象类型Object
2016/05/26 Javascript
郁闷!ionic中获取ng-model绑定的值为undefined如何解决
2016/08/27 Javascript
JS装饰器函数用法总结
2018/04/21 Javascript
快速解决Vue项目在IE浏览器中显示空白的问题
2018/09/04 Javascript
Node.js使用MongoDB的ObjectId作为查询条件的方法
2019/09/10 Javascript
微信小程序实现手指拖动选项排序
2020/04/22 Javascript
[49:05]OG vs Newbee 2019DOTA2国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
python中的sort方法使用详解
2014/07/25 Python
Python os模块中的isfile()和isdir()函数均返回false问题解决方法
2015/02/04 Python
python追加元素到列表的方法
2015/07/28 Python
Python中的groupby分组功能的实例代码
2018/07/11 Python
win7下python3.6安装配置方法图文教程
2018/07/31 Python
Python跳出多重循环的方法示例
2019/07/03 Python
python DataFrame转dict字典过程详解
2019/12/26 Python
VSCode基础使用与VSCode调试python程序入门的图文教程
2020/03/30 Python
关于Python不换行输出和不换行输出end=““不显示的问题(亲测已解决)
2020/10/27 Python
彻底解决Python包下载慢问题
2020/11/15 Python
Lookfantastic日本官网:英国知名护肤、化妆品和头发护理购物网站
2018/04/21 全球购物
墨尔本最受欢迎的复古风格品牌:Princess Highway
2018/12/21 全球购物
laravel使用redis队列实例讲解
2021/03/23 PHP
2014年大学生党课心得体会范文
2014/03/29 职场文书
十八大演讲稿
2014/05/22 职场文书
母亲节演讲稿
2014/05/27 职场文书
思想政治表现评语
2015/01/04 职场文书
泰坦尼克号观后感
2015/06/04 职场文书
python缺失值的解决方法总结
2021/06/09 Python
Mysql中常用的join连接方式
2022/05/11 MySQL
Pytorch中expand()的使用(扩展某个维度)
2022/07/15 Python