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

时间:2021-05-26

废话不多说,大家直接看代码吧!

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

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章