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
onsubmit校验表单时利用ajax的return false无效解决方法的更多相关文章
- onsubmit校验表单时利用ajax的return false无效解决方法-转
原来的代码 function checkNewEmail(){ var re_email=new RegExp("\\w+@\\w+\\.\\w+\\.?\\w*"); ...
- iframe中使用模态框提交表单后,iframe加载父页面的解决方法
在iframe中使用模态框提交表单后,会出现iframe加载整个父页面的问题,如下图: 解决方法: 在form表单中添加target属性 _parent 这个属性会使目标文档载入父窗口或者包含来超链接 ...
- Ajax中return false无效 怎么解决?
var flag=0; $.ajax({ url:"widget?type=member_register&ajax=yes&action=checkname&use ...
- 关于使用 AJax 生成Form表单,且表单提交需要验证,验证实效的解决方法
@Ajax.ActionLink("添加", "AddUser",new AjaxOptions() {InsertionMode = InsertionMod ...
- jQuery ajax使用$(this).parent()无效解决方法
div=$(this).parent(); //先获取父级元素 div.remove(); //再删除 $(".delStu").click(function () { ...
- javascript将异步校验表单改写为同步表单
同步表单校验的缺点 响应错误信息时,需要重新加载整个页面(虽然有缓存,客户端仍然需要通过http协议对比每个文件是否有更新,以保持文件最新) 服务器响应错误以后,用户之前所输入的信息全部丢失了,用户需 ...
- Ajax实现提交表单时验证码自动验证(原创自Zjmainstay)
本文通过源码展示如何实现表单提交前,验证码先检测正确性,不正确则不提交表单,更新验证码. 1.前端代码 index.html <!DOCTYPE html> <html> &l ...
- KindEditor:Ajax提交表单时获取不到HTML内容
当用Ajax提交表单时,KindEditor的内容获取不到,HTML数据获取不了 原因:当ajax提交时,KindEdito的HTML数据还没有同步到表单中来,那怎么去获取HTML数据呢? ----- ...
- JavaWeb网上图书商城完整项目--day02-4.regist页面提交表单时对所有输入框进行校验
1.现在我们要将table表中的输入的参数全部提交到后台进行校验,我们提交我们是按照表单的形式提交,所以我们首先需要在table表外面添加一个表单 <%@ page language=" ...
随机推荐
- Linux下安装配置MongoDB数据库
说明: 操作系统:CentOS 5.X 64位 IP地址:192.168.21.130 实现目的: 安装配置MongoDB数据库 具体操作: 一.关闭SElinux.配置防火墙 1.vi /etc/s ...
- QQ音乐:React v16 新特性实践
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由QQ音乐技术团队发表于云+社区专栏 自从去年9月份 React 团队发布了 v16.0 版本开始,到18年3月刚发布的 v16.3 版 ...
- 简单springboot及springboot cloud环境搭建
springboot使用特定的方式,简化了spring的各种xml配置文件,并通过maven或者gradle,完成所需依赖,使用springboot maven插件,可直接输出可运行的jar包,省去了 ...
- 移动H5页面,Android手机下,input获取焦点弹出系统虚拟键盘时,挡住input解决方法
最近在写移动端页面的时候,遇到一个问题,在Android手机下,虚拟键盘会将input框遮挡住,具体情况如下图所示: 正常页面显示 IOS端显示情况 Android端显示情况 解决方式: <t ...
- [LeetCode]27. Remove Element移除元素
Given an array nums and a value val, remove all instances of that value in-place and return the new ...
- [LeetCode]24. Swap Nodes in Pairs两两交换链表中的节点
Given a linked list, swap every two adjacent nodes and return its head. Example: Given 1->2->3 ...
- java项目升级spring4.3.x 、jdk1.8 、tomcat8.5遇到的坑及解决方案
在将spring3.x 升级为4.3.x,jdk1.7 tomcat7升级到jdk1.8.tomcat8.5过程中,碰到了很多问题,也学习到了很多东西,现将这些问题分享出来,方便大家后续遇到同样问题时 ...
- PAT 1070 Mooncake
题目意思能搞成这样我也是服了这个女人了 #include <cstdio> #include <cstdlib> #include <vector> #includ ...
- Implementation: Quick Sort 2014-08-19
#include <stdio.h> void print(int *a, int start , int end); void quick_sort(int *a, int start, ...
- vue学习笔记之基础篇
本文主要记录学习vue的一些基础内容及常用知识点的记录. 1.搭建脚手架 vue init webpack vue-demo 初始化一个使用webpack打包的vue项目 npm install 安装 ...