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使用IEEE 标准进行二进制浮点运算产生莫名错误的解决方法
May 28 Javascript
用Javascript评估用户输入密码的强度(Knockout版)
Nov 30 Javascript
深入理解JavaScript系列(16) 闭包(Closures)
Apr 12 Javascript
javascript trim函数在IE下不能用的解决方法
Sep 12 Javascript
什么是 AngularJS?AngularJS简介
Dec 06 Javascript
JavaScript实现将数组中所有元素连接成一个字符串的方法
Apr 06 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记9)
Dec 24 Javascript
使用JS批量选中功能实现更改数据库中的status状态值(批量展示)
Nov 22 Javascript
你可能不知道的JSON.stringify()详解
Aug 17 Javascript
JavaScript实现表单注册、表单验证、运算符功能
Oct 15 Javascript
JS如何实现封装列表右滑动删除收藏按钮
Jul 23 Javascript
微信小程序入门之指南针
Oct 22 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调用Google translate_tts api实现代码
2013/08/07 PHP
PHP入门教程之PHP操作MySQL的方法分析
2016/09/11 PHP
javascript阻止scroll事件多次执行的思路及实现
2013/11/08 Javascript
ExtJS4给Combobox设置列表中的默认值示例
2014/05/02 Javascript
JavaScript中的Web worker多线程API研究
2014/12/06 Javascript
js实现简洁大方的二级下拉菜单效果代码
2015/09/01 Javascript
JQuery 两种方法解决刚创建的元素遍历不到的问题
2016/04/13 Javascript
jQuery基于json与cookie实现购物车的方法
2016/04/15 Javascript
javascript+HTML5 Canvas绘制转盘抽奖
2020/05/16 Javascript
原生js实现addClass,removeClass,hasClass方法
2016/04/27 Javascript
详解nodeJS中读写文件方法的区别
2017/03/06 NodeJs
nodejs学习笔记之路由
2017/03/27 NodeJs
react-native ListView下拉刷新上拉加载实现代码
2017/08/03 Javascript
vue项目中使用vue-i18n报错的解决方法
2019/01/13 Javascript
详解写好JS条件语句的5条守则
2019/02/28 Javascript
原生js实现下拉框选择组件
2021/01/20 Javascript
python中精确输出JSON浮点数的方法
2014/04/18 Python
python迭代器实例简析
2014/09/25 Python
python中管道用法入门实例
2015/06/04 Python
Python3 安装PyQt5及exe打包图文教程
2019/01/08 Python
浅谈python 中类属性共享的问题
2019/07/02 Python
在Python中COM口的调用方法
2019/07/03 Python
python访问hdfs的操作
2020/06/06 Python
Python基于wordcloud及jieba实现中国地图词云图
2020/06/09 Python
详解Python 最短匹配模式
2020/07/29 Python
Pytorch之Tensor和Numpy之间的转换的实现方法
2020/09/03 Python
python批量修改交换机密码的示例
2020/09/22 Python
一文带你掌握Pyecharts地理数据可视化的方法
2021/02/06 Python
浅析CSS3中鲜为人知的属性:-webkit-tap-highlight-color
2017/01/12 HTML / CSS
英国领先的酒杯和水晶玻璃器皿制造商:Dartington Crystal
2019/06/23 全球购物
建筑设计师岗位职责
2013/11/18 职场文书
运动会广播稿200米
2014/01/27 职场文书
2016元旦晚会主持人开场白和结束语
2015/12/03 职场文书
《藏戏》教学反思
2016/02/23 职场文书
长辈生日祝福语大全(72句)
2019/08/09 职场文书
通过shell脚本对mysql的增删改查及my.cnf的配置
2021/07/07 MySQL