layui+form+Ajax

先贴一个示例代码

layui.use([ 'form' ], function() {var form = layui.form, layer = layui.layer;/* 自定义表单验证 */form.verify({username : function(value, item) { // value：表单的值、item：表单的DOM对象if (!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)) {return '用户名不能有特殊字符';}if (/(^\_)|(\__)|(\_+$)/.test(value)) {return '用户名首尾不能出现下划线\'_\'';}if (/^\d+\d+\d$/.test(value)) {return '用户名不能全为数字';}if (value.length < 3 || value.length > 12) {return '用户名必须3到12位';}},password : [ /^[\S]{6,12}$/, '密码必须6到12位，且不能出现空格' ]});form.on('submit(L_submit)', function(data) {var username=$("#L_username").val();var password=$("#L_password").val();var vercode=$("#L_vercode").val();$.ajax({type:'POST',url:'user/login.do',data:{username:username,password:password,vercode:vercode},success:function(data){if(data=="success"){window.location.href='logindex.jsp';}else{layer.alert("用户名或密码错误",{title:'登录失败'});}}});return false;});});

第一引入使用form表单：

那么我们写在页面上的<form>标签是静态的，当我们在JavaScript中使用时，需要进行调用，怎么调用呢？

我上面这段代码，包含了调用表单，自定义调用表单，以及使用Ajax提交后台的验证。

调用表单：layui.use([ 'form' ], function() {

var form=layui.form；

}

第二自定义表单验证：

这个是官网文档的，使用的是正则表达式，当然也可以使用我们熟悉的，比如下面的用户名长度的验证，那个是我自己添加的。

第三提交监听：

就是下面的form.on('submit(L_submit)', function(data)，固定语法，L_submit 是你的form表单的提交按钮的属性

 <button class="layui-btn" lay-filter="L_submit" lay-submit>立即登录</button>

就是这个 lay-filter 就相当与jQuery的 id选择器 lay-filter 就相当于一个锚点。

第四使用Ajax

这个其实是可以正常用的，首先使用jQuery的id选择器得到表单内容然后直接进入Ajax就可以了

有的不能用的，大概率是没有引入jQuery的依赖包

<script src="community/js/jquery.min.js"></script>

这个是不能少的，不然网页是不会识别你的jQuery语句的。

还有一个原因，就是最下面的return false ，包含在form.on内，少了这个他就会直接跳转，虽然数据提交了，结果返回了，但是跳转并不是你想要的，而且所有的提示都会消失，不起作用。

其他的就正常使用就可以了

layui+form+Ajax相关推荐

layui.form用ajax提交表单时的问题(巨坑)
主要问题:使用layui的form组件用ajax提交表单发送请求时,总是无法收到回调函数,success与error中的回调均不执行,且该表单会自动刷新. 解决办法:在提交表单的方法form.on() ...
layui form表单ajax提交
<form class="layui-form" method="post" action=""><div class=& ...
layui结合ajax实现下拉菜单联动效果
大家好好,我是雄雄,欢迎关注公众号:雄雄的小课堂. 昨天分享的是使用layui集合springboot实现图片上传,文章地址在这里,需要的小伙伴们可以去看看: 今天给大家分享的内容也是那天在造项目的时 ...
layui结合ajax实现下拉联动效果
大家好好,我是雄雄,欢迎关注公众号:雄雄的小课堂. 昨天分享的是使用layui集合springboot实现图片上传,文章地址在这里,需要的小伙伴们可以去看看: 今天给大家分享的内容也是那天在造项目的时 ...
layui自定义ajax左侧三级菜单
HTML代码: 需引入layui.css代码  <div class="layui-side layui-bg-black" id=& ...
layui之ajax巨坑
在使用layui做前端框架的时候,在请求ajax时,回调函数不执行问题,找了各种原因,各种的更改ajax参数类型和webapi返回类型各种不行,最后发现layui默认是form提交,想要让他执行aj ...
使用LayUI实现AJAX分页
使用LayUI实现AJAX分页首先去下载layUI,然后在页面当中加载layUI分页所需JS,CSS文件: <link rel="stylesheet" href=&quo ...
layui form表单点击无反应
无刷新页面再次操作form表单时,点击无效果重点来了!解决方法!需要form.render(); 代码如下: <script>layui.use('form', function(){ ...
layui:form表单提交
<form class="layui-form" action="" id="login_form" lay-filter=" ...

layui+form+Ajax

layui+form+Ajax相关推荐

最新文章

热门文章