最近使用jQuery.Validate客户端验证组件进行验证，在本机开发运行的时候似乎没有问题，但部署到服务器之后，就出现问题了。remote验证不能成功执行。我是远程调用Web服务验证用户名是否存在，用Fiddler跟踪后发现Web服务不能正确调用。是天灾还是人祸呢？本人对jQuery.Validate组件不是很熟悉。大家要记住：
是部署到服务器后，从其他机器访问才会出现问题，如果本机，无论是localhost还是IP地址都没有异常！
为了让大家清楚该问题，我把问题用简化后代码呈现出来。
代码
/// <reference path="jquery-1.4.1-vsdoc.js" />
/// <reference path="jquery.validate.js" />
jQuery(document).ready(function() {
$('#form1').validate({
rules: {
txtUserName: {
required: true,
remote:
{
type: "post",
url: "Services/WebServiceHelper.asmx/ExistUserName",
data:
{
name: function() {
return $("#txtUserName").val();
}
},
dataType: "xml",
dataFilter: function(dataXML) {
var result = $(dataXML).find("boolean").text();
if (result == "false") {
return true;
}
else
return false;
}
}
}
},
messages: {
txtUserName: {
required: "请填用户",
remote: "已经存在"
}
}
});
});
/// <reference path="jquery.validate.js" />
jQuery(document).ready(function() {
$('#form1').validate({
rules: {
txtUserName: {
required: true,
remote:
{
type: "post",
url: "Services/WebServiceHelper.asmx/ExistUserName",
data:
{
name: function() {
return $("#txtUserName").val();
}
},
dataType: "xml",
dataFilter: function(dataXML) {
var result = $(dataXML).find("boolean").text();
if (result == "false") {
return true;
}
else
return false;
}
}
}
},
messages: {
txtUserName: {
required: "请填用户",
remote: "已经存在"
}
}
});
});
另外，remote验证应该也是封装了jQuery中的ajax()函数，但我直接测试ajax()函数，没有任何问题，这个地方才是我真不明白的地方，当然，jQuery以及jQUery.Validate的代码我都没有研究过。就像如下checkName()方法，部署后，还是可以正确运行，但txtUserName文本框使用remote验证，就不行了。
代码
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<script src="scripts/jquery.validate.js" type="text/javascript"></script>
<script src="scripts/jquery.validate.pack.js" type="text/javascript"></script>
<script src="scripts/jQuery.validate.register.js" type="text/javascript"></script>
<script type="text/javascript">
function checkName(name) {
$.ajax({
type: "POST", //访问WebService使用Post方式请求
contentType: "application/json", //WebService 会返回Json类型
url: "Services/WebServiceHelper.asmx/ExistUserName", //调用WebService的地址和方法名称组合---WsURL/方法名
data: '{ name: "' + name + '" }',
dataType: 'json',
success: function(data) { alert(data.d); },
error: function(XMLHttpRequest, textStatus, errorThrown) {
}
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
用户名：<asp:TextBox ID="txtUserName" runat="server"></asp:TextBox><br />
姓名：<input id="txtName" type="text" onblur="checkName(this.value);" />
<asp:Button ID="btnSave" runat="server" Text="保存" />
</div>
</form>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<script src="scripts/jquery.validate.js" type="text/javascript"></script>
<script src="scripts/jquery.validate.pack.js" type="text/javascript"></script>
<script src="scripts/jQuery.validate.register.js" type="text/javascript"></script>
<script type="text/javascript">
function checkName(name) {
$.ajax({
type: "POST", //访问WebService使用Post方式请求
contentType: "application/json", //WebService 会返回Json类型
url: "Services/WebServiceHelper.asmx/ExistUserName", //调用WebService的地址和方法名称组合---WsURL/方法名
data: '{ name: "' + name + '" }',
dataType: 'json',
success: function(data) { alert(data.d); },
error: function(XMLHttpRequest, textStatus, errorThrown) {
}
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
用户名：<asp:TextBox ID="txtUserName" runat="server"></asp:TextBox><br />
姓名：<input id="txtName" type="text" onblur="checkName(this.value);" />
<asp:Button ID="btnSave" runat="server" Text="保存" />
</div>
</form>
</body>
</html>
我在网上搜索过，似乎大家都没有碰到过类似的问题。难道这只是个案吗？
