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 Archive Network 集合
May 12 Javascript
jQuery防止click双击多次提交及传递动态函数或多参数
Apr 02 Javascript
jQuery ajax时间差导致的变量赋值问题分析
Jan 22 Javascript
JavaScript中的冒泡排序法
Aug 03 Javascript
js实现鼠标拖动功能
Mar 20 Javascript
vue2的todolist入门小项目的详细解析
May 11 Javascript
Bootstrap提示框效果的实例代码
Jul 12 Javascript
微信小程序 获取session_key和openid的实例
Aug 17 Javascript
Vue实现动态添加或者删除对象和对象数组的操作方法
Sep 21 Javascript
详解单页面路由工程使用微信分享及二次分享解决方案
Feb 22 Javascript
Webpack中SplitChunksPlugin 配置参数详解
Mar 24 Javascript
js实现搜索提示框效果
Sep 05 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使用PDO调用mssql存储过程的方法示例
2017/10/07 PHP
laravel 实现根据字段不同值做不同查询
2019/10/23 PHP
JavaScript 获取当前时间戳的代码
2010/08/05 Javascript
Javascript表达式中连续的 &amp;&amp; 和 || 之赋值区别
2010/10/17 Javascript
js脚本获取webform服务器控件的方法
2014/05/16 Javascript
JS获取图片高度宽度的方法分享
2015/04/17 Javascript
javascript记住用户名和登录密码(两种方式)
2015/08/04 Javascript
微信小程序 保留小数(toFixed)详细介绍
2016/11/16 Javascript
微信小程序 滚动到某个位置添加class效果实现代码
2017/04/19 Javascript
Vue+jquery实现表格指定列的文字收缩的示例代码
2018/01/09 jQuery
去掉vue 中的代码规范检测两种方法(Eslint验证)
2018/03/21 Javascript
vue 移动端适配方案详解
2018/11/15 Javascript
ES6入门教程之变量的解构赋值详解
2019/04/13 Javascript
微信小程序用户授权弹窗 拒绝时引导用户重新授权实现
2019/07/29 Javascript
[01:51]DAC趣味视频-如何成为职业选手.mp4
2017/04/02 DOTA
python的类方法和静态方法
2014/12/13 Python
Django 查询数据库并返回页面的例子
2019/08/12 Python
Django实现列表页商品数据返回教程
2020/04/03 Python
Python Django中间件使用原理及流程分析
2020/06/13 Python
css3 中translate和transition的使用方法
2020/03/26 HTML / CSS
CSS实现进度条和订单进度条的示例
2020/11/05 HTML / CSS
使用Html5中的cavas画一面国旗
2019/09/25 HTML / CSS
Snapfish英国:在线照片打印和个性化照片礼品
2017/01/13 全球购物
FitFlop澳大利亚官网:英国符合人体工学的鞋类品牌
2017/06/05 全球购物
JACK & JONES荷兰官网:男士服装和鞋子
2021/03/07 全球购物
哥伦比亚加拿大官网:Columbia Sportswear Canada
2020/09/07 全球购物
荷兰最大的鞋子、服装和运动折扣店:Bristol
2021/01/07 全球购物
仓库保管员岗位职责
2013/12/20 职场文书
房地产开盘策划方案
2014/02/10 职场文书
中学生寄语大全
2014/04/03 职场文书
学习党的群众路线实践活动思想汇报
2014/09/12 职场文书
社区好人好事材料
2014/12/26 职场文书
给老婆的道歉信
2015/01/20 职场文书
聚会通知怎么写
2015/04/23 职场文书
2015年行政管理人员工作总结
2015/10/15 职场文书
SpringBoot实现quartz定时任务可视化管理功能
2021/08/30 Java/Android