layui插件表单验证提交触发提交

20 篇文章 0 订阅
10 篇文章 0 订阅
<!---------------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();
                }
            })
  • 3
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值