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 IE 与 FF中兼容问题小结
Feb 18 Javascript
JavaScript 捕获窗口关闭事件
Jul 26 Javascript
javascript之querySelector和querySelectorAll使用说明
Oct 09 Javascript
javascript客户端遍历控件与获取父容器对象示例代码
Jan 06 Javascript
JavaScript获取页面上被选中文字的方法技巧
Mar 13 Javascript
JavaScript中eval()函数用法详解
Dec 14 Javascript
JS中使用DOM来控制HTML元素
Jul 31 Javascript
JS实现微信里判断页面是否被分享成功的方法
Jun 06 Javascript
js阻止默认右键的下拉菜单方法
Jan 02 Javascript
快速解决vue动态绑定多个class的官方实例语法无效的问题
Sep 05 Javascript
Element-ui之ElScrollBar组件滚动条的使用方法
Sep 14 Javascript
Js Snowflake(雪花算法)生成随机ID的实现方法
Aug 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
《破坏领主》销量已超100万 未来将继续开发新内容
2020/03/08 其他游戏
PHP中使用虚代理实现延迟加载技术
2014/11/05 PHP
PHP的引用详解
2015/02/22 PHP
laravel框架学习笔记之组件化开发实现方法
2020/02/01 PHP
javascript实现的动态文字变换
2007/07/28 Javascript
使用pcs api往免费的百度网盘上传下载文件的方法
2016/03/17 Javascript
jquery中validate与form插件提交的方式小结
2016/03/26 Javascript
微信支付 JS API支付接口详解
2016/07/11 Javascript
AngularJS通过ng-route实现基本的路由功能实例详解
2016/12/13 Javascript
jQuery plugin animsition使用小结
2017/09/14 jQuery
vue+axios实现文件下载及vue中使用axios的实例
2018/09/21 Javascript
JS实现在线ps功能详解
2019/07/31 Javascript
原生js实现随机点餐效果
2019/12/10 Javascript
vue学习笔记之slot插槽基本用法实例分析
2020/02/01 Javascript
在vant 中使用cell组件 定义图标该图片和位置操作
2020/11/02 Javascript
[32:56]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第二场 12.11
2020/12/16 DOTA
Python计时相关操作详解【time,datetime】
2017/05/26 Python
Python中new方法的详解
2019/01/15 Python
python 实现一个反向单位矩阵示例
2019/11/29 Python
pytorch实现onehot编码转为普通label标签
2020/01/02 Python
tensorflow 报错unitialized value的解决方法
2020/02/06 Python
python脚本实现mp4中的音频提取并保存在原目录
2020/02/27 Python
Python3如何判断三角形的类型
2020/04/12 Python
Python爬虫之Selenium实现窗口截图
2020/12/04 Python
python中threading和queue库实现多线程编程
2021/02/06 Python
Python使用paramiko连接远程服务器执行Shell命令的实现
2021/03/04 Python
服装采购员岗位职责
2014/03/15 职场文书
施工员岗位职责
2014/03/16 职场文书
联谊会主持词
2014/03/26 职场文书
2014年客房服务员工作总结
2014/11/18 职场文书
2015年车间安全管理工作总结
2015/05/13 职场文书
个人收入证明范本
2015/06/12 职场文书
MySQL EXPLAIN输出列的详细解释
2021/05/12 MySQL
SQLServer中exists和except用法介绍
2021/12/04 SQL Server
python创建字典及相关管理操作
2022/04/13 Python
Android开发手册自定义Switch开关按钮控件
2022/06/10 Java/Android