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 相关文章推荐
你的编程语言可以这样做吗?
Sep 07 Javascript
javascript instanceof 与typeof使用说明
Jan 11 Javascript
js 全兼容可高亮二级缓冲折叠菜单
Jun 04 Javascript
JavaScript中继承的一些示例方法与属性参考
Aug 07 Javascript
Jquery刷新页面背景图片随机变换的实现方法
Mar 15 Javascript
jquery indexOf使用方法
Aug 19 Javascript
Javascript基础教程之定义和调用函数
Jan 18 Javascript
jQuery实现信息提示框(带有圆角框与动画)效果
Aug 07 Javascript
10道典型的JavaScript面试题
Mar 22 Javascript
关于jquery form表单序列化的注意事项详解
Aug 01 jQuery
Node.js中DNS模块学习总结
Feb 28 Javascript
JS实现放大镜效果
Sep 21 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版本到PHP7
2015/02/06 PHP
用PHP生成excel文件到指定目录
2015/06/22 PHP
PHP7如何开启Opcode打造强悍性能详解
2018/05/11 PHP
Laravel + Elasticsearch 实现中文搜索的方法
2020/02/02 PHP
javascript 常用功能总结
2012/03/18 Javascript
jquery.blockUI.js上传滚动等待效果实现思路及代码
2013/03/18 Javascript
基于JavaScript 声明全局变量的三种方式详解
2013/05/07 Javascript
Js注册协议倒计时的小例子
2013/06/24 Javascript
当json键为数字时的取值方法解析
2013/11/15 Javascript
javaScript array(数组)使用字符串作为数组下标的方法
2013/11/19 Javascript
Js实现当前点击a标签变色突出显示其他a标签回复原色
2013/11/27 Javascript
用循环或if语句从json中取数据示例
2014/08/18 Javascript
Jquery中CSS选择器用法分析
2015/02/10 Javascript
详解JavaScript数组和字符串中去除重复值的方法
2016/03/07 Javascript
AngularJs Managing Service Dependencies详解
2016/09/02 Javascript
JQuery PHP图片在线裁剪实例
2020/07/27 Javascript
表单元素值获取方式js及java方式的简单实例
2016/10/15 Javascript
jQuery实现ajax无刷新分页页码控件
2017/02/28 Javascript
JavaScript之Date_动力节点Java学院整理
2017/06/28 Javascript
原生JS使用Canvas实现拖拽式绘图功能
2019/06/05 Javascript
基于layui实现高级搜索(筛选)功能
2019/07/26 Javascript
jquery中attr、prop、data区别与用法分析
2019/09/25 jQuery
Vue父子传递实例讲解
2020/02/14 Javascript
python采集博客中上传的QQ截图文件
2014/07/18 Python
PyCharm+PySpark远程调试的环境配置的方法
2018/11/29 Python
python3.4爬虫demo
2019/01/22 Python
python的几种矩阵相乘的公式详解
2019/07/10 Python
python基于gevent实现并发下载器代码实例
2019/11/01 Python
利用CSS3实现圆角的outline效果的教程
2015/06/05 HTML / CSS
一款利用html5和css3动画排列人物头像的实例演示
2014/12/05 HTML / CSS
管理建议书范文
2014/05/13 职场文书
卫生院义诊活动总结
2015/05/07 职场文书
工作会议简报
2015/07/20 职场文书
升学宴家长答谢词
2015/09/29 职场文书
女人创业励志语录,句句蕴含能量,激发你的潜能
2019/08/20 职场文书
三星 3nm 芯片将于第二季度开始量产
2022/04/29 数码科技