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 相关文章推荐
用js得到网页中所有的div的id
Oct 19 Javascript
JavaScript入门教程(1) 什么是JS
Jan 31 Javascript
jquery URL参数判断,确定菜单样式
May 31 Javascript
jQuery插件slick实现响应式移动端幻灯片图片切换特效
Apr 12 Javascript
jquery+php实现滚动的数字特效
Nov 29 Javascript
详解JavaScript基于面向对象之创建对象(2)
Dec 10 Javascript
Js操作DOM元素及获取浏览器高宽的简单方法
Sep 08 Javascript
H5手机端多文件上传预览插件
Apr 21 Javascript
BootStrap Fileinput上传插件使用实例代码
Jul 28 Javascript
AngularJS实现注册表单验证功能
Oct 16 Javascript
理解JavaScript中的对象
Aug 25 Javascript
基于vue实现微博三方登录流程解析
Nov 04 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连接SQLServer2005 的问题解决方法
2010/07/19 PHP
php将时间差转换为字符串提示
2011/09/07 PHP
PHP连接SQLServer2005的实现方法(附ntwdblib.dll下载)
2012/07/02 PHP
PHP查询网站的PR值
2013/10/30 PHP
ThinkPHP之import方法实例详解
2014/06/20 PHP
基于PHP实现用户注册登录功能
2016/10/14 PHP
CL vs ForZe BO5 第五场 2.13
2021/03/10 DOTA
jQuery 类twitter的文本字数限制带提示效果插件
2010/04/16 Javascript
js替换字符串的所有示例代码
2013/07/23 Javascript
JS利用cookie记忆当前位置的防刷新导航效果
2015/10/15 Javascript
基于jquery实现轮播特效
2016/04/22 Javascript
浅谈Vue的加载顺序探讨
2017/10/25 Javascript
Vue 组件封装 并使用 NPM 发布的教程
2018/09/30 Javascript
vue 实现v-for循环回来的数据动态绑定id
2019/11/07 Javascript
VUEX 数据持久化,刷新后重新获取的例子
2019/11/12 Javascript
python根据给定文件返回文件名和扩展名的方法
2015/03/27 Python
Python的Tornado框架实现图片上传及图片大小修改功能
2016/06/30 Python
python 计算文件的md5值实例
2017/01/13 Python
python实现rsa加密实例详解
2017/07/19 Python
django.db.utils.ProgrammingError: (1146, u“Table‘’ doesn’t exist”)问题的解决
2018/07/13 Python
浅谈python标准库--functools.partial
2019/03/13 Python
python3使用GUI统计代码量
2019/09/18 Python
Python学习工具jupyter notebook安装及用法解析
2020/10/23 Python
有关HTML5 Video对象的ontimeupdate事件(Chrome上无效)的问题
2013/07/19 HTML / CSS
Java的类可以定义为Protected或者Private得吗
2015/09/25 面试题
YII2 全局异常处理深入讲解
2021/03/24 PHP
商场中秋节活动方案
2014/02/07 职场文书
房产代理公证处委托书
2014/04/04 职场文书
继承公证书
2014/04/09 职场文书
捐款倡议书怎么写
2014/05/13 职场文书
党员干部廉洁承诺书
2014/05/28 职场文书
乡镇2014法制宣传日活动总结
2014/11/01 职场文书
公务员个人总结
2015/02/12 职场文书
作息时间调整通知
2015/04/22 职场文书
Java移除无效括号的方法实现
2021/08/07 Java/Android
详解Python如何批量采集京东商品数据流程
2022/01/22 Python