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 03 Javascript
推荐20家国外的脚本下载网站
Apr 28 Javascript
jquery判断浏览器后退时候弹出消息的方法
Aug 11 Javascript
一个实用的图片切换支持点击切换和自动轮播
Sep 09 Javascript
JS回调函数的应用简单实例
Sep 17 Javascript
jQuery简单实现仿京东商城的左侧菜单效果代码
Sep 09 Javascript
微信小程序 swiper组件构建轮播图的实例
Sep 20 Javascript
vue2.0 + element UI 中 el-table 数据导出Excel的方法
Mar 02 Javascript
webpack external模块的具体使用
Mar 10 Javascript
简单介绍react redux的中间件的使用
Apr 06 Javascript
微信小程序实现顶部下拉菜单栏
Nov 04 Javascript
vue实现搜索过滤效果
May 28 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
东芝TOSHIBA RP-F11电路分析
2021/03/02 无线电
239军机修复记
2021/03/02 无线电
thinkphp模板用法和内容输出实例
2014/11/28 PHP
UTF-8正则表达式如何匹配汉字
2015/08/03 PHP
CI(CodeIgniter)框架中URL特殊字符处理与SQL注入隐患分析
2019/02/28 PHP
AutoSave/自动存储功能实现
2007/03/24 Javascript
jquery获得页面元素的坐标值实现思路及代码
2013/04/15 Javascript
jquery模拟SELECT下拉框取值效果
2013/10/23 Javascript
使用js dom和jquery分别实现简单增删改
2014/09/11 Javascript
Node.js实现Excel转JSON
2015/04/24 Javascript
jQuery实现的数值范围range2dslider选取插件特效多款代码分享
2015/08/27 Javascript
JavaScript遍历DOM元素的常见方式示例
2019/02/16 Javascript
Layui 数据表格批量删除和多条件搜索的实例
2019/09/04 Javascript
jquery中attr、prop、data区别与用法分析
2019/09/25 jQuery
Vue 如何使用props、emit实现自定义双向绑定的实现
2020/06/05 Javascript
基于python编写的微博应用
2014/10/17 Python
在Python中使用sort()方法进行排序的简单教程
2015/05/21 Python
python数组复制拷贝的实现方法
2015/06/09 Python
Python实现利用163邮箱远程关电脑脚本
2018/02/22 Python
python 2.7.14安装图文教程
2018/04/08 Python
python 自动去除空行的实例
2018/07/24 Python
Python实现的KMeans聚类算法实例分析
2018/12/29 Python
在Python中表示一个对象的方法
2019/06/25 Python
pytorch索引查找 index_select的例子
2019/08/18 Python
python实现修改固定模式的字符串内容操作示例
2019/12/30 Python
通过自学python能找到工作吗
2020/06/21 Python
使用CSS3来实现滚动视差效果的教程
2015/08/24 HTML / CSS
美国生鲜及杂货电商:FreshDirect
2018/01/29 全球购物
俄罗斯便宜的在线服装商店:GroupPrice
2020/04/10 全球购物
英文版销售经理个人求职信
2013/11/20 职场文书
节约电力资源的建议书
2014/03/12 职场文书
行政执法队伍作风整顿个人剖析材料
2014/10/11 职场文书
2015年度员工自我评价范文
2015/03/11 职场文书
赤壁观后感(2)
2015/06/15 职场文书
2016最新离婚协议书范本及程序
2016/03/18 职场文书
python实战之用emoji表情生成文字
2021/05/08 Python