分两种情况验证，一是直接使用本地验证，二是ajax到服务器验证。
我现在需要验证：用户名，邮箱，电话 三个input(text)，用户名、电话号码只需要本地验证格式，只要匹配给定的正则表达式即可，而邮箱首先在本地验证格式，符合格式则ajax到服务器验证是否已被注册，如果被注册了则不能通过验证。
对于每个input后面跟随三种状态，分别表示验证通过、验证未通过、正在提交服务器验证，当未通过验证时，还出示提示信息。
首先设计服务器端的邮箱验证，这里使用.ashx 文件。
接下来实现客户端的html，添加对JQuery的引用
js脚本代码：
点击展开
//给定需要验证的input添加 needValidate='true' 的属性对，然后选择他们，添加blur的事件函数。
$("input[needValidate='true']").blur(function()
...{
if(requireField(this))//首先客户端验证
...{
if(this.id == 'your_email')//如果是邮件则还进行ajax服务器端验证
...{
$('#email_img').html("<img src='loading.gif' />");
$.getJSON("validateEmail.ashx",...{email:this.value},processValidateEmail);//getJSON获取服务器端的验证结果
}
else
...{
$('#'+this.id+'_img').html("<img src='accept.gif' />");
$('#'+this.id+'_error').html("");
}
}
}
)
});
//ajax验证完成后的处理函数
function processValidateEmail(data)
...{
if(data.message == "0")//表示服务器端没有该邮箱地址
...{
$('#your_email_img').html("<img src='accept.gif' />");
$('#your_email_error').html("");
}
else
...{
$('#your_email_img').html("<img src='exclamation.gif' />");
$('#your_email_error').html("邮箱已被人注册，请更换重试！").attr("style","color:red;");
}
}
//客户端验证函数
function requireField(o)
...{
var your_email = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]...{2,4})+$/;
var your_name = /^(\w)...{4,20}|[^u4e00-u9fa5]{2,20}$/;
var your_tel = /^[+]...{0,1}(\d){1,3}[ ]?([-]?((\d)|[ ]){1,12})+$/;
var your_email_error = "请输入正确的邮箱格式！";
var your_name_error = "请输入您的名字，不少于4个字符！";
var your_tel_error = "请输入正确的电话号码格式！";
if(o.value.match(eval(o.id)))
...{
return true;
}
else
...{
$('#'+o.id+'_img').html("<img src='exclamation.gif' />");
$('#'+o.id+'_error').html(eval(o.id+'_error')).attr("style","color:red;");
}
return false;
}
//submit前的验证函数
function validate()
...{
var biaozhi = true;
$("input[needValidate='true']").each(function(i)...{
if(!requireField(this))
...{ biaozhi = false; }
}
)
return biaozhi;
}
html须验证的表单代码：
<li><label for="your_name">你的姓名：</label>
<input name="your_name" id="your_name" type="text" needValidate="true" value="" /><span id="your_name_img"></span><div id="your_name_error"></div></li>
<li><label for="your_email">你的邮箱：</label>
<input name="your_email" id="your_email" type="text" needValidate="true" value="" /><span id="your_email_img"></span><div id="your_email_error"></div></li>
<li><label for="your_tel">你的电话：</label>
<input name="your_tel" id="your_tel" type="text" needValidate="true" value="" /><span id="your_tel_img"></span><div id="your_tel_error"></div></li>
<li><label for="comment">相关信息：</label>
<input id="comment" name="comment" type="text" value="" /></li>
