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 相关文章推荐
js中关于一个分号的崩溃示例
Nov 11 Javascript
jquery获取元素索引值index()示例
Feb 13 Javascript
按Enter键触发事件的jquery方法实现代码
Feb 17 Javascript
jquery使用remove()方法删除指定class子元素
Mar 26 Javascript
使用BootStrap进行轮播图的制作
Jan 06 Javascript
JS中的数组转变成JSON格式字符串的方法
May 09 Javascript
js用类封装pop弹窗组件
Oct 08 Javascript
js拖动滑块和点击水波纹效果实例代码
Oct 16 Javascript
JavaScript之实现一个简单的Vue示例
Jan 17 Javascript
详解javascript replace高级用法
Feb 17 Javascript
详解vue为什么要求组件模板只能有一个根元素
Jul 22 Javascript
用webAPI实现图片放大镜效果
Nov 23 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处理图片变得简单 基于gb库的图片处理类附实例代码下载
2011/05/17 PHP
php实现的统计字数函数定义与使用示例
2017/07/26 PHP
ScrollDown的基本操作示例
2013/06/09 Javascript
只需一行代码,轻松实现一个在线编辑器
2013/11/12 Javascript
IE下通过a实现location.href 获取referer的值
2014/09/04 Javascript
jQuery中mouseover事件用法实例
2014/12/26 Javascript
纯javascript实现四方向文本无缝滚动效果
2015/06/16 Javascript
JS实现超精简的链接列表在固定区域内滚动效果代码
2015/11/04 Javascript
JS实现图片高亮展示效果实例
2015/11/24 Javascript
简单模拟node.js中require的加载机制
2016/10/27 Javascript
浅谈jQuery this和$(this)的区别及获取$(this)子元素对象的方法
2016/11/29 Javascript
微信小程序 利用css实现遮罩效果实例详解
2017/01/21 Javascript
Vue计算属性的学习笔记
2017/03/22 Javascript
jQuery实现简单漂亮的Nav导航菜单效果
2017/03/29 jQuery
微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法分析
2017/11/27 Javascript
jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法
2017/12/05 jQuery
javascript中call()、apply()的区别
2019/03/21 Javascript
基于javascript实现贪吃蛇经典小游戏
2020/04/10 Javascript
jQuery实现可以扩展的日历
2020/12/01 jQuery
Python的Flask框架中实现登录用户的个人资料和头像的教程
2015/04/20 Python
python编写分类决策树的代码
2017/12/21 Python
python入门教程 python入门神图一张
2018/03/05 Python
Python实现决策树C4.5算法的示例
2018/05/30 Python
python爬虫之遍历单个域名
2019/11/20 Python
python构建指数平滑预测模型示例
2019/11/21 Python
设置jupyter中DataFrame的显示限制方式
2020/04/12 Python
pandas之分组groupby()的使用整理与总结
2020/06/18 Python
Python命令行参数argv和argparse该如何使用
2021/02/08 Python
ToysRus日本官网:玩具反斗城
2018/09/08 全球购物
销售工作人员的自我评价分享
2013/11/10 职场文书
毕业求职自荐信格式是什么
2013/11/19 职场文书
节约电力资源的建议书
2014/03/12 职场文书
客户经理竞聘演讲稿
2014/05/15 职场文书
学校爱国卫生月活动总结
2014/06/25 职场文书
2019职场实习报告该怎么写?
2019/07/01 职场文书
MySQL中的隐藏列的具体查看
2021/09/04 MySQL