今天用Ajax该一个学长项目的时候发生了这样子的事情
明明使用了异步提交,可是还是页面跳转。弄得我满头大汗。。。
先上代码
function checkUsername(){
//alert("用户名校验");
//获取用户名
var username = $("#username").val();
//正则定义
var reg_username = /^\w{8,20}$/;
//判断 给出提示
var flag = reg_username.test(username);
if(flag){
//用户名合法
$("#username").css("border","");
}else{
//用户名非法
$("#username").css("border","1px solid red");
}
return flag;
}
//检验密码
function checkPassword(){
//alert("校验密码");
//获取密码
var password = $("#password").val();
//正则定义
var reg_password = /^\w{8,20}$/;
//判断 给出提示
var flag = reg_password.test(password);
if(flag){
//密码合法
$("#password").css("border","");
}else{
//密码非法
$("#password").css("border","1px solid red");
}
return flag;
}
以上是检查方法
$(function () {
//当表单提交时 调用所有校验方法
$("#registerForm").submit(function () {
//发送数据到服务器
var flag = checkUsername()&&checkPassword()
&&checkEmial()&&checkName()
&&checkTelephone()&&checkBirthday()&&checkCheck();
if (flag){
//通过校验 发送Ajax请求,提交数据
$.post("registUserServlet",$(this).serialize(),function (data){
//处理服务器响应数据 data
});
}
//跳转页面 false不跳转
return false;
});
//当对应组件失去焦点时
$("#username").blur(checkUsername);
$("#password").blur(checkPassword);
$("#email").blur(checkEmial);
$("#name").blur(checkName);
$("#telephone").blur(checkTelephone);
$("#birthday").blur(checkBirthday);
$("#check").blur(checkCheck);
});
当时改后台 改json都没用 静静看了会儿js发现检查返回值就没有true的时候(捂脸哭)
之后加了 return true后 就没问题了。。。。。
function checkUsername(){
//alert("用户名校验");
//获取用户名
var username = $("#username").val();
//正则定义
var reg_username = /^\w{8,20}$/;
//判断 给出提示
var flag = reg_username.test(username);
if(flag){
//用户名合法
$("#username").css("border","");
return true;
}else{
//用户名非法
$("#username").css("border","1px solid red");
}
return flag;
}
//检验密码
function checkPassword(){
//alert("校验密码");
//获取密码
var password = $("#password").val();
//正则定义
var reg_password = /^\w{8,20}$/;
//判断 给出提示
var flag = reg_password.test(password);
if(flag){
//密码合法
$("#password").css("border","");
return true;
}else{
//密码非法
$("#password").css("border","1px solid red");
}
return flag;
}
找了我一晚上错 哭了。。。
转载:https://blog.csdn.net/weixin_44094842/article/details/101562334
查看评论