layui插件表单验证提交触发提交的例子

废话不多说，大家直接看代码吧！

<!------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插件表单验证提交触发提交的例子就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • layui在form表单页面通过Validform加入简单验证的方法

    form简单验证 <input type="text" name="email" datatype="e" ignore="ignore" placeholder="请输入邮箱" autocomplete="off" class="layui-input"> datatype="e"验证邮箱 ignore="ignore&qu

  • layui表单验证select下拉框实现验证的方法

    layui 的form表单里的select 一开始以为加上lay-verify="required"就可以验证不空了,可是反复试了几次都不能验证 代码如下: <div class="layui-form-item"> <label class="layui-form-label">所属工种:</label> <div class="layui-input-block"> <

  • layui.js实现的表单验证功能示例

    layui.js实现的表单验证功能示例

    本文实例讲述了layui.js实现的表单验证功能.分享给大家供大家参考,具体如下: 该示例可针对文本框,手机,邮箱,textarea等格式进行验证 首先引入如下文件: <script src="layui/layui.js"></script> <script src="layui/lay/dest/layui.all.js"></script> <link rel="stylesheet"

  • layui的表单验证支持ajax判断用户名是否重复的实例

    如下所示: 在一个表单中,在提交前我们想判断该用户名是否存在,在layui中不支持.onblur()失去焦点事件,用按钮来手动触发,表单又不太美观,可以使用form表单的verify来进行验证. html: <div class="layui-form-item"> <label class="layui-form-label">用户名</label> <div class="layui-input-block&q

  • 在layui中使用form表单监听ajax异步验证注册的实例

    今天给大家介绍的是当下很流行的框架layui中的一个小案例.就是form表单监控提交并且使用ajax异步提交验证数据.在layui中我们想使用哪个模块就要layui.use('form',function{});这种形式要引用form内置模板,下面是HTML全部代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>注册</title> <

  • layui插件表单验证提交触发提交的例子

    废话不多说,大家直接看代码吧! <!------HTML部分---------> <form class="layui-form" action="{:url('login/login')}" method="post"> <div class="logi_content"> <p class="tit">管理系统</p> <div clas

  • layui原生表单验证的实例

    在网上看到很多validform和layer配合的验证方式,但是觉得写的不好,不清不楚的,于是研究了一下layui原生的验证 1. 在需要验证的item上加 lay-verify="value" ,在提交按钮上加 lay-submit lay-filter="go" 两个属性 value: required(必填项) phone(手机号) email(邮箱) url(网址) number(数字) date(日期) identity(身份证) 自定义值(就是自定义验证

  • Vue引用vee-validate插件表单验证问题(cdn方式引用)

    目录 引用vee-validate插件表单验证(cdn方式引入) 一. CDN方式(官网) 二. 结合Vue使用 三.使用中文错误提示 四.HTML代码示例 五.自定义验证规则 总结 引用vee-validate插件表单验证(cdn方式引入) 之前用的是webpack打包工具写的项目,后来需求改成静态页面的方式,所以又要把一些引入方式改过来,这就是前端麻烦的地方. 网上也有很多npm引入方式的,主要是老版本和新版本vee-validate引起的问题(特别是中文错误提示的引用问题),我这里写一下关

  • jquery validation插件表单验证的一个例子

    messages_cn.js <!--验证国际化,中文--> (不引用messages_cn.js是英文的提示,用了是中文) 复制代码 代码如下: required: "This field is required.", remote: "Please fix this field.", email: "Please enter a valid email address.", url: "Please enter a va

  • layui的表单提交以及验证和修改弹框的实例

    HTML <div class="layui-form"> <input type="text" class="txt" name="newName" lay-verify="newName" lay-verType="tips" placeholder="请输入姓名"> <input type="text" clas

  • bootstrap Validator 模态框、jsp、表单验证 Ajax提交功能

    bootstrap Validator 模态框、jsp、表单验证 Ajax提交功能

    效果图: 如图,这是使用Validator插件,所完成的功能,效果很强大,也很方便,这边推荐使用这种方式,最后介绍一下原始js验证写法. 首先,导入插件: <link href="<%=basePath %>bootstrap/css/bootstrap-datetimepicker.min.css" rel="external nofollow" rel="stylesheet" media="screen"

  • layui form表单提交后实现自动刷新

    刚刚使用layui 来做东西,对这一切都不熟悉,使用一下form表单,但是,不能成功的使用. 问题: 1.提交表单,页面自动刷新. 出现这样的情况呢,搜索了一下是因为表单的提交按钮没有type类型.哪怕是button标签呢,也不行.我试了一下,使用这种情况的话,主要是在监听事件中并没有返回return false,如果返回了return false,这个就可以不再刷新. 2.提交表单,获取不到form表单中的数据. 有人说,是因为给了一个id,并没有给name属性,用惯了jquery.我懒得去找

  • Angualrjs 表单验证的两种方式(失去焦点验证和点击提交验证)

    AngularJS提供了表单验证,但是验证的过程交互体验很不好,比如重设密码,重复密码的时候一键入就会提示密码不正确,现整理了两种方法,仅供借鉴. 一,点击提交验证 <form action="" class="form-horizontal col-md-9" name="reset_pwd" ng-submit="resetPwd()"> <div class="form-group"

  • angular实现表单验证及提交功能

    本例通过Angular框架来实现简单的表单验证 一.html结构 1.借助于bootstrap快速的编写了一个简单的表单 代码主要部分如下: <div class="container" style="margin-top: 30px;" ng-controller="myCtrl"> <h1 style="text-align: center">用户表单提交</h1> <form a

随机推荐