onsubmit校验表单时利用ajax的return false无效解决方法

代码：

function checkNewEmail(){var re_email=new RegExp("\\w+@\\w+\\.\\w+\\.?\\w*");var newEmail=$("#email_new").val();if(re_email.test(newEmail)){$.ajax({type:"post",dataType:"json",url:"existEmail?email="+newEmail,success:function(dataResult){if(dataResult=="true"){$("#emial-error").text("邮箱已注册。");return false;}else{return true;}}});}else{return false;}}

每次邮箱格式正确用ajax判断邮箱是否已存在时，无论成功否都执行submit，卡了好久，网上找了好多，终于找到原因也解决方案了。

问题原因

　　执行ajax时return false的function 与onsubmit()不是同一个函数，所以无论return 什么都会直接执行submit()提交表单ok知道错误原因了之后修改一下代码

修改后代码：

function checkNewEmail(){var flat=false;var re_email=new RegExp("\\w+@\\w+\\.\\w+\\.?\\w*");var newEmail=$("#email_new").val();if(re_email.test(newEmail)){$.ajax({type:"post",dataType:"json",url:"existEmail?email="+newEmail,success:function(dataResult){if(dataResult=="true"){$("#emial-error").text("邮箱已注册。");flat=false;}else{flat=true;}}});}else{return false;}return flat;}

修改之后再执行,可是每次执行完都return false,就好像flat=true,不起作用一样，可是调试了发现明明有执行flat=true

问题原因

　　在执行ajax时，async默认的默认值为true,这种情况为异步方式，就是说ajax发送请求后，在等待服务端返回的这个过程中，前台会继续执行ajax块后面的脚本，直到服务端返回正确的结果才会执行success,也就是说这时执行的是两个线程，一个线程在执行ajax时另一个进程已经执行return flat了。所以一直返回false.把async改为false，这时才是同步方式，只有一个线程。

找到原因后，再修改一下代码，最终终于成功了。

最终代码

function checkNewEmail(){var flat=false;var re_email=new RegExp("\\w+@\\w+\\.\\w+\\.?\\w*");var newEmail=$("#email_new").val();if(re_email.test(newEmail)){$.ajax({type:"post",dataType:"json",async:false,//同步方式url:"existEmail?email="+newEmail,success:function(dataResult){if(dataResult=="true"){$("#emial-error").text("邮箱已注册。");flat=false;}else{flat=true;}}});}else{$("#emial-error").text("邮箱格式不正确。");return false;}return flat;}

转自：https://blog.csdn.net/u010079945/article/details/38680769

转载于:https://www.cnblogs.com/lzw123-/p/9822626.html

onsubmit校验表单时利用ajax的return false无效解决方法相关推荐

layui.form用ajax提交表单时的问题(巨坑)
主要问题:使用layui的form组件用ajax提交表单发送请求时,总是无法收到回调函数,success与error中的回调均不执行,且该表单会自动刷新. 解决办法:在提交表单的方法form.on() ...
html5表单与Jquery Ajax结合使用
html5的表单控件提供了很多格式检测功能,可以省去很多烦人的javascript验证代码,例如pattern属性和require属性. 问题: 一般表单的提交用的都是用button然后用ajax来提 ...
抓浏览器请求时，下载SwitchyOmega提示：程序包无效解决方法
问题描述: 想要抓取浏览器请求时,需要下载一个SwitchyOmega的插件,进入下载网址:https://proxy-switchyomega.com/,点击本地下载时,提示:程序包无效解决方法: ...
ajax如何实现表单验证码,Ajax实现提交表单时验证码自动验证（原创自Zjmainstay）...
本文通过源码展示如何实现表单提交前,验证码先检测正确性,不正确则不提交表单,更新验证码. 1.前端代码 index.html 验证码提交自验证用户名验证码 (function($){ $(docu ...
layui表单提交使用form.on(‘submit(sub)‘,function (){}) 使用ajax请求时回调不执行的原因及解决方法
layui表单提交使用form.on('submit(sub)',function (){}) 使用ajax请求时回调不执行的原因及解决方法参考文章: (1)layui表单提交使用form.on(' ...
html怎么校验用户名重复,layui的表单验证支持ajax判断用户名是否重复的实例
如下所示: 在一个表单中,在提交前我们想判断该用户名是否存在,在layui中不支持.onblur()失去焦点事件,用按钮来手动触发,表单又不太美观,可以使用form表单的verify来进行验证. ht ...
Form 表单提交和 Ajax 表单提交的一些区别
自己一些心得体会: 1:form 表单提交后进行后台处理程序,没有直接返回值,只能进行后台处理,Form标签里的所有数据全部提交到后台 ajax 表单提交,是可以局部提交,具有ajax的所有属性... ...
springboot 订单重复提交_Spring Boot (一) 校验表单重复提交
一.前言在某些情况下,由于网速慢,用户操作有误(连续点击两下提交按钮),页面卡顿等原因,可能会出现表单数据重复提交造成数据库保存多条重复数据. 存在如上问题可以交给前端解决,判断多长时间内不能再次点 ...
[css] 你有使用:valid和:invalid来校验表单吗？
[css] 你有使用:valid和:invalid来校验表单吗? 很不好控制,拿必填来举例,:invalid 标红. 初始时就红的,那 :focus:invalid 吧,blur 就不标了: 刚 fo ...

onsubmit校验表单时利用ajax的return false无效解决方法

onsubmit校验表单时利用ajax的return false无效解决方法相关推荐

最新文章

热门文章