在项目中我使用了AJAX异步校验,来校验业务密码是否正确,本地环境下没有问题,但拉到真实环境,杭州服务器出现问题,给input框的blur()事件加了异步校验,点击保存按钮让所以input框失去焦点,业务密码正确,即可以通过,但是由于真实环境服务器返回数据的时间不一定,所以出现没返回数据那,就已经提交了表单。
?
#我的代码
<script type="text/javascript">
$(document).ready(function(){
var empAlterReason = true;
var checkPassword2 = true;
/*业务密码*/
$("#password2").blur(function(){
var password2 = $("#password2").val();
var textPassword2 = $("#textPassword2");
textPassword2.html("");
if( password2=='' )
{
textPassword2.html("<font color='red'>业务密码不能为空!</font>");
checkPassword2 = false;
return;
}
if( password2!='' )
{
if( passValidate(password2) )
{
textPassword2.html("<font color='red'>业务密码格式有误!</font>");
checkPassword2 = false;
return;
}
else
{
var yz=$.ajax({
type:'post',
url:'validatePwd2_checkPwd2?password2='+password2,
data:{},
cache:false,
dataType:'json',
success:function(data){
if( data.msg =="false" ) //服务器返回false,就将validatePassword2的值改为pwd2Error,这是异步,需要考虑返回时间
{
textPassword2.html("<font color='red'>业务密码不正确!</font>");
$("#validatePassword2").val("pwd2Error");
checkPassword2 = false;
return;
}
},
error:function(){}
});
}
}
$("#validatePassword2").val("pwd2Success");
checkPassword2 = true;
return;
});
/*修改原因*/
$("#alterReason").blur(function(){
var textRoleAlterReason = $("#textRoleAlterReason");
textRoleAlterReason.html("");
var alterReason = $("#alterReason").val();
if(alterReason=='')
{
textRoleAlterReason.html("<font color='red'><br>修改原因不能为空!</font>");
empAlterReason = false;
return;
}
if(alterReason=='请输入')
{
textRoleAlterReason.html("<font color='red'><br>修改原因必填项!</font>");
empAlterReason = false;
return;
}
if(illegalChar(alterReason))
{
textRoleAlterReason.html("<font color='red'><br>修改原因不能包含非法字符!</font>");
empAlterReason = false;
return;
}
empAlterReason = true;
return;
});
/*保存,点击事件*/
$("#mybutton1").click(function(){
var validatePassword2 = $("#validatePassword2").val();
$("input,textarea").blur();//这里触发焦点事件,但是服务器还没返回值,validatePassword2的值还没改变,还是'pwd2Success',但是代码还是按照顺序执行,所以下面的query()方法还是执行了
if(validatePassword2=='pwd2Success' && checkPassword2==true && empAlterReason == true){
query();
}
});
});
function resetForm()
{
$("#alterReason").val("");
$("#password2").val("");
$("#textPassword2").html("");
$("#textRoleAlterReason").html("");
}
function calBack(){
history.back(-1);
}
function query() {
if(document.getElementById('roleName').value == ""){alert('角色名称不能为空!'); return false;}else{ }
if(document.getElementById('alterReason').value == ""){alert('授权原因不能为空!'); return false;}else{ }
// 获得被授权的信息总数
var len= document.getElementById("roleList").length;
var tempop="";
for(var i=0;i<len;i++){
tempop = tempop +";"+ document.getElementById("roleList").options[i].value;
}
var confirm = "您确定修改权限信息吗?";
if(window.confirm(confirm)){
document.getElementById('privSelect').value=tempop;
document.form1.action = "<%=path%>/Role_impower";
document.form1.submit();
alert("操作成功!");
}
}
</script>
?
#jsp页面代码
<tr> <td colspan="2" class="txtright" >业务密码:</td><td class="txtleft"> <input type="password" name="password2" id="password2" maxlength="18" class="inputbox"/> <input type="hidden" id="validatePassword2" value="pwd2Success"/> <span id="textPassword2"></span> </td> </tr> <tr> <td colspan="2" class="txtright"></td><td class="txtleft"> <input type="button" id="mybutton1" value="保 存" class="btn"/> <input type="button" value="重 置" onclick="resetForm()" class="btnalt"/> <input type="button" value="返 回" onclick="history.go(-1);" class="btnalt"/> </td> </tr> </table> </td> </tr>
?
#####注意:这问题本机、内网都没问题,因为速度很快,几乎不用考虑异步时间,但是真实服务器就不行了,返回响应时间可能会慢一些。。。? 切记!!!
?