layui插件表单验证提交触发提交的例子
2019-09-09 15:11
1636 查看
废话不多说,大家直接看代码吧!
<!------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插件表单验证提交触发提交的例子就是小编分享给大家的全部内容了,希望能给大家一个参考
您可能感兴趣的文章:
相关文章推荐
- jquery validate和jquery form 插件组合实现验证表单后AJAX提交
- Jquery插件easyUi表单验证提交(示例代码)
- jQuery formValidator表单验证插件一些摘要和例子
- jquery validation插件表单验证的一个例子
- jquery validate表单验证插件制作注册表单验证提交
- 用 sco.js valid 插件进行表单验证时,表单是如何提交的
- 70 jQuery-使用validate插件验证表单提交时的基本信息
- 表单验证和表单无刷新ajax提交完美结合的插件
- Form表单提交、自定义验证规则(validate插件)
- layui表单提交时出现一闪而过的验证信息的原因
- 第一百八十六节,jQuery,验证表单插件,Ajax 表单插件,验证和提交表单
- jquery validation插件表单验证的一个例子
- 开发者必知的20个jQuery插件——之二用jQuery-Validation-Engine对提交表单进行验证
- jQuery form插件的使用--用 formData 参数校验表单,验证后提交(简单验证).
- 【ExtJs】ExtJs的表单插件与表单布局、提交与验证
- 用html5自带表单验证 并且用ajax提交的解决方法(附例子)
- 验证插件validate 表单ajax提交验证问题
- jquery validate和jquery form 插件组合实现验证表单后AJAX提交
- Jquery插件easyUi表单验证提交
- Jquery插件easyUi表单验证提交(示例代码)