Go homepage(回首页) Upload pictures (上传图片) Write articles (发文字帖)
The author:(作者)归海一刀published in(发表于) 2014/3/16 2:55:28 简单自定义实现jQuery验证_[AJAX教程]
分两种情况验证,一是直接使用本地验证,二是ajax到服务器验证。
我现在需要验证:用户名,邮箱,电话 三个input(text),用户名、电话号码只需要本地验证格式,只要匹配给定的正则表达式即可,而邮箱首先在本地验证格式,符合格式则ajax到服务器验证是否已被注册,如果被注册了则不能通过验证。
对于每个input后面跟随三种状态,分别表示验证通过、验证未通过、正在提交服务器验证,当未通过验证时,还出示提示信息。
首先设计服务器端的邮箱验证,这里使用.ashx 文件。
<%@ WebHandler Language="C#" Class="validateEmail" %>
using System;using System.Web;using System.Data.SqlClient;
public class validateEmail : IHttpHandler { public void ProcessRequest (HttpContext context) {
if (context.Request.QueryString.Count != 0) { string email = context.Request.QueryString[0].Trim(); context.Response.ContentType = "text/plain"; SqlConnection conn = new SqlConnection("Server=localhost;User Id=sa;Password=;Database=XXX"); SqlCommand sqlCmd = new SqlCommand("select count(*) from Clients where email=@email", conn); sqlCmd.Parameters.AddWithValue("@email", email);
try { conn.Open(); int result = (int)sqlCmd.ExecuteScalar(); context.Response.Write("{message:'"+result.ToString()+"'}"); //输出为JSON格式 } finally { conn.Close(); } }
} public bool IsReusable { get { return false; } }
}接下来实现客户端的html,添加对JQuery的引用
js脚本代码: //给定需要验证的input添加 needValidate='true' 的属性对,然后选择他们,添加blur的事件函数。 ("input[needValidate='true']").blur(function() { if(requireField(this))//首先客户端验证 { if(this.id == 'your_email')//如果是邮件则还进行ajax服务器端验证 { ('#email_img').html(""); .getJSON("validateEmail.ashx",{email:this.value},processValidateEmail);//getJSON获取服务器端的验证结果 } else { ('#'+this.id+'_img').html(""); ('#'+this.id+'_error').html(""); } } } )
});
//ajax验证完成后的处理函数function processValidateEmail(data){ if(data.message == "0")//表示服务器端没有该邮箱地址 { ('#your_email_img').html(""); ('#your_email_error').html(""); } else { ('#your_email_img').html(""); ('#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(""); ('#'+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须验证的表单代码:
http://dwww.cn/news/2007-7/2007761616105130.shtml
赞