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;
}
---------------------
本文来自 Boh_ 的CSDN 博客 ,全文地址请点击:https://blog.csdn.net/u010079945/article/details/38680769?utm_source=copy
最新文章
- linux基础-磁盘阵列(RAID)实例详解
- Hive官方手册翻译(Getting Started)
- 浏览器请求URL原理
- 【Java每日一题】20161118
- Android Studio-设置快速修复错误提示代码
- flash链接需要后台调用时的插入flash方法
- css 兼容小三角
- 杭电ACM水仙花数
- C的memset,memcpy,strcpy 的区别 及memset memcpy memmove源码
- Storm入门(五)Twitter Storm如何保证消息不丢失
- ABC113 AK失败记
- mysq带条件的分页查询数据结果错误
- JAVA SFTP文件上传、下载及批量下载
- Struts2学习(二)———— 表单参数自动封装和参数类型自动转换
- Leetcode 144
- 日志收集之--将Kafka数据导入elasticsearch
- Android开发6——布局中的wrap_content和fill_parent以及match_parent
- js 数据函数
- 【opencv】c++ 读取图片 &; 绘制点 &; 绘制文字 &; 保存图片
- Python Tkinter参考资料之(通用控件属性)