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 动态调整图片尺寸实现代码
Dec 28 Javascript
js整数字符串转换为金额类型数据(示例代码)
Dec 26 Javascript
利用js实现禁止复制文本信息
Jun 03 Javascript
js实现字符串和数组之间相互转换操作
Jan 12 Javascript
javascript嵌套函数和在函数内调用外部函数的区别分析
Jan 31 Javascript
AngularJS 执行流程详细介绍
Aug 18 Javascript
jquery判断iPhone、Android设备类型
Sep 14 Javascript
jquery ajaxfileupload异步上传插件
Nov 21 jQuery
使用electron将vue-cli项目打包成exe的方法
Sep 29 Javascript
少女风vue组件库的制作全过程
May 15 Javascript
原生js实现trigger方法示例代码
May 22 Javascript
vue实现在线预览pdf文件和下载(pdf.js)
Nov 26 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中把数据库查询结果输出为json格式简单实例
2015/04/09 PHP
PHP打印输出函数汇总
2016/08/28 PHP
利用phpexcel对数据库数据的导入excel(excel筛选)、导出excel
2017/04/27 PHP
php多进程模拟并发事务产生的问题小结
2018/12/07 PHP
使用Git实现Laravel项目的自动化部署
2019/11/24 PHP
事件模型在各浏览器中存在差异
2010/10/20 Javascript
javascript学习笔记(七)利用javascript来创建和存储cookie
2011/04/08 Javascript
javascript学习笔记(十一) 正则表达式介绍
2012/06/20 Javascript
jQuery 如何先创建、再修改、后添加DOM元素
2014/05/20 Javascript
JQuery中使用on方法绑定hover事件实例
2014/12/09 Javascript
javascript实现的字符串与十六进制表示字符串相互转换方法
2015/07/17 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【一】
2016/05/10 Javascript
基于chosen插件实现人员选择树搜索自动筛选功能
2016/09/24 Javascript
基于原生js淡入淡出函数封装(兼容IE)
2016/10/20 Javascript
js图片放大镜效果实现方法详解
2020/10/28 Javascript
laravel5.3 vue 实现收藏夹功能实例详解
2018/01/21 Javascript
vue使用自定义事件的表单输入组件用法详解【日期组件与货币组件】
2020/06/01 Javascript
用Python实现通过哈希算法检测图片重复的教程
2015/04/02 Python
利用Python实现网络测试的脚本分享
2017/05/26 Python
Python WXPY实现微信监控报警功能的代码
2017/10/20 Python
python中类的输出或类的实例输出为这种形式的原因
2019/08/12 Python
Python3离线安装Requests模块问题
2019/10/13 Python
基于Python共轭梯度法与最速下降法之间的对比
2020/04/02 Python
使用PyQt的QLabel组件实现选定目标框功能的方法示例
2020/05/19 Python
Python extract及contains方法代码实例
2020/09/11 Python
5分钟让你掌握css3阴影、倒影、渐变小技巧(小编推荐)
2016/08/15 HTML / CSS
土耳其玩具商店:Toyzz Shop
2019/08/02 全球购物
mysql的最长数据库名,表名,字段名可以是多长
2014/04/21 面试题
函数只定义了一次, 调用了一次, 但编译器提示非法重定义了-什么问题?
2014/10/03 面试题
工业自动化毕业生自荐信范文
2014/01/04 职场文书
小学英语教学反思案例
2014/02/04 职场文书
二十年同学聚会致辞
2015/07/28 职场文书
同学聚会祝酒词
2015/08/10 职场文书
2015年小学语文教师工作总结
2015/10/23 职场文书
公务员学习中国梦心得体会
2016/01/05 职场文书
优秀创业计划书分享
2019/07/19 职场文书