Question

请问这里的这段js代码为什么不能阻止表单的提交？

代码经过简略，只写出了关键部分。作用是：提交表单前，对表单里的值在后台数据库里进行验证。当后台页面返回值是"true"时，就弹出提示并返回 return false;阻止表单的提交
<form method="post" action="" name="form1" onSubmit="return TiJiaoYanZheng()" >
<input type="submit" name="action" value="提交" />
</form>
function TiJiaoYanZheng() { //提交数据之前的预检查
if (JS_Value != "") {
var xmlhttp; //声明变量
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.responseText == "true") {
alert("这个单号已记录！！！");
return false;
};
};
xmlhttp.open("get", "lao.asp?XingMing=" + JS_Value, false);
xmlhttp.send();
};
};
现在js代码可以正常弹出提示 "这个单号已记录！！！" ，但是过后表单还是被提交成功了
onSubmit="return TiJiaoYanZheng()这一句并没有起到作用，请问这是因为什么？

Answer 1

这位同学你知道什么叫异步吗？等到你的ajax返回数据的时候，TiJiaoYanZheng已经执行完了。正确的做法是，先验证，验证通过后手动提交，验证不通过则提示错误信息。

追问

具体我要怎么做呢？我很菜
是把submit改为button，然后利用onclick事件执行TiJiaoYanZheng()吗？，之后该怎么办，如何提交这个form1表单呢，不能通过后利用js自动提交吗？

追答

第一推荐用jquery

第二伪代码如下

<form id="ff">
<input type="button" value="提交" onclick="TiJiaoYanZheng()">
</form>


function TiJiaoYanZheng(){
    $.ajax({
        success:function(data){
            if(data.ok){
                $('#ff').submit();
            }
            else{
                alert('验证失败！');
            }
        }
    });
}