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 相关文章推荐
解读IE和firefox下JScript和HREF的执行顺序
Jan 12 Javascript
js实现简单随机抽奖的方法
Jan 27 Javascript
javascript实现英文首字母大写
Apr 23 Javascript
jQuery获取table行数并输出单元格内容的实现方法
Jun 30 Javascript
JS简单获取及显示当前时间的方法
Aug 03 Javascript
ionic在开发ios系统微信时键盘挡住输入框的解决方法(键盘弹出问题)
Sep 06 Javascript
详解使用React进行组件库开发
Feb 06 Javascript
javascript中join方法实例讲解
Feb 21 Javascript
js实现图片局部放大效果详解
Mar 18 Javascript
在Angular中实现一个级联效果的下拉框的示例代码
May 20 Javascript
在vue中使用Echarts利用watch做动态数据渲染操作
Jul 20 Javascript
vue的$http的get请求要加上params操作
Nov 12 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
什么是MVC,好东西啊
2007/05/03 PHP
PHP 开源框架22个简单简介
2009/08/24 PHP
php 目录与文件处理-郑阿奇(续)
2011/07/04 PHP
Joomla调用系统自带编辑器的实现方法
2016/05/05 PHP
PHP array_reduce()函数的应用解析
2018/10/28 PHP
php无限极分类实现方法分析
2019/07/04 PHP
php设计模式之模板模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
IE6与IE7中,innerHTML获取param的区别
2009/03/15 Javascript
JavaScript中setAttribute用法介绍
2013/07/20 Javascript
js为鼠标添加右击事件防止默认的右击菜单弹出
2013/07/29 Javascript
Javascript浅谈之引用类型
2013/12/18 Javascript
如何用JavaScript定义一个类
2014/09/12 Javascript
js兼容pc端浏览器并有多种弹出小提示的手机端浮层控件实例
2015/04/29 Javascript
JavaScript设置名字输入不合法的实现方法
2017/05/23 Javascript
vue swipe自定义组件实现轮播效果
2019/07/03 Javascript
微信小程序 轮播图实现原理及优化详解
2019/09/29 Javascript
[02:16]卖萌的僵尸 DOTA2神话信使飞僵小宝来袭
2014/03/24 DOTA
python抓取某汽车网数据解析html存入excel示例
2013/12/04 Python
使用python实现rsa算法代码
2016/02/17 Python
python3+PyQt5+Qt Designer实现扩展对话框
2018/04/20 Python
python re正则匹配网页中图片url地址的方法
2018/12/20 Python
Python 多个图同时在不同窗口显示的实现方法
2019/07/07 Python
解决python tkinter界面卡死的问题
2019/07/17 Python
使用keras根据层名称来初始化网络
2020/05/21 Python
解决python cv2.imread 读取中文路径的图片返回为None的问题
2020/06/02 Python
纯css3制作的火影忍者写轮眼开眼至轮回眼及进化过程实例
2014/11/11 HTML / CSS
新西兰珠宝品牌:Michael Hill
2017/09/16 全球购物
科室工作的个人自我评价
2013/10/30 职场文书
医院院务公开实施方案
2014/05/03 职场文书
初二学生评语大全
2014/12/26 职场文书
2015高考寄语集锦
2015/02/27 职场文书
会议主持词开场白
2015/05/28 职场文书
谢师宴学生致辞
2015/07/27 职场文书
2016学习依法治国心得体会
2016/01/15 职场文书
一篇文章搞懂python混乱的切换操作与优雅的推导式
2021/08/23 Python
Java对文件的读写操作方法
2022/04/29 Java/Android