<!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>
<script language="javascript" type="text/javascript" src="../js/JScript.js"></script>
<script type="text/javascript" src="../js/validator/formValidator-4.0.1.min.js"></script>
<script type="text/javascript" src="../js/validator/Regex.js"></script>
<link href="../js/validator/style/validator.css" type="text/css" rel="Stylesheet" />
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$.formValidator.initConfig({ formID: "form1", onError: function () { alert("校验没有通过，具体错误请看错误提示") } });
//$("#userName").formValidator({ onShow: "", onCorrect: "正确" }).regexValidator({ regExp: "notempty", dataType: "enum", onError: "请输入用户名" });
$("#psd").formValidator({ onShow: "", onCorrect: "正确" }).regexValidator({ regExp: "notempty", dataType: "enum", onError: "密码不能为空" });
$("#psd1").formValidator({ onShow: "", onCorrect: "正确" }).regexValidator({ regExp: "notempty", dataType: "enum", onError: "确认密码不一致" })
.compareValidator({
desID:"psd",
operateor:"=",
onError:"二次密码不一致,请确认"});
$("#email").formValidator({ onShow: "", onCorrect: "正确" }).regexValidator({ regExp: "email", dataType: "enum", onError: "邮箱格式不正确" });
//$("#yzm").formValidator({ onShow: "", onCorrect: "正确" }).regexValidator({ regExp: "notempty", dataType: "enum", onError: "请输入验证码" });
$("#userName").formValidator({ ajax:true,onShow: "请输入账号", onfocus: "最好以字母开头，只能由字母数字组成 ,不能少于6个字符。", onCorrect: "用户名可以使用。" })
.regexValidator({ regExp: "username", dataType: "enum", onError: "你输入的格式不正确！" })
.inputValidator({ min: 6, max: 16, onError: "输入长度不正确！" })
.ajaxValidator({
dataType: "text",
async: true,
url: "Handler.ashx?type=checkName&userName="+$("#userName").attr("value"),
success: function (data) {
if (data == "0") { return true; }
else if (data == "null") { return "注意：用户名不能少于6个字符。"; }
else if (data == "false") { return "该用户名已被注册，请更换用户名。"; }
},
buttons: $("#button"),
error: function (jqXHR, textStatus, errorThrown) { alert("服务器没有返回数据，可能服务器忙，请重试" + errorThrown); },
onError: "该用户名不可用，请更换用户名",
onWait: "正在对用户名进行合法性校验，请稍候..."
}); //这里添加defaultPassed()的话，则默认验证通过。
$("#yzm").formValidator({onShow : "请输入验证码", onFocus : "验证码的长度必须是4位", onCorrect : "验证码正确"})
.inputValidator({
min : 4,
max : 4,
onError : "验证码的长度必须是4位,请确认"
}).ajaxValidator({
type : "POST",
dataType : "html",
async : true,
url : "Handler.ashx?type=yzm",
success : function(message) {
if (message == "success") {
return true;
}else{
return false;
}
},
onError : "验证码错误",
onWait : "正在进行合法性校验，请稍候..."
});
$("#img_yzm").click(function(){
$("#img_yzm").attr("src","Handler.ashx?type=yzm&"+Math.random())
});
});
</script>
<style type="text/css">
.td_left{ text-align:right; 100px; color:#272727;}
.td_right{ text-align:left; 150px;}
.td_yzm{ 50px;}
.td_ts{ color:#7B7B7B; font-size:12px;}
.btn_submit{ 60px; height:30px; font-size:15px; font:"黑体"}
</style>
<title>无标题页</title>
</head>
<body>
<div style="position:relative; margin:0 auto; font-size:13px; ">
<form id="form1">
<div>
<table >
<tr><td class="td_left">用 户 名:</td><td><input id="userName" type="text" /></td><td class="td_right"><div id="userNameTip"></div></td></tr>
<tr><td></td><td colspan="2" class="td_ts">支持大小写字母、数字、下划线</td></tr>
<tr><td class="td_left">密 码:</td><td><input id="psd" type="text" /></td><td class="td_right"><div id="psdTip"></div></td></tr>
<tr><td></td><td colspan="2" class="td_ts">请输入密码</td></tr>
<tr><td class="td_left">确认密码:</td><td><input id="psd1" type="text" /></td><td class="td_right"><div id="psd1Tip"></div></td></tr>
<tr><td></td><td colspan="2" class="td_ts">请输入确认密码</td></tr>
<tr><td class="td_left">邮 箱:</td><td><input id="email" type="text" /></td><td class="td_right"><div id="emailTip"></div></td></tr>
<tr><td></td><td colspan="2" class="td_ts">请输入正确的邮箱，如：**@163.com</td></tr>
<tr><td class="td_left">验 证 码:</td><td><input id="yzm" type="text" class="td_yzm" /><a href="#" ><img src="Handler.ashx?type=yzm" id="img_yzm" alt="点我刷新" /></a></td><td class="td_right"><div id="yzmTip"></div></td></tr>
<tr><td></td><td><button type="submit" class="btn_submit">注册</button></td><td></td></tr>
</table>
</div>
</form>
</div>
</body>
</html>
c#
<%@ WebHandler Language="C#" Class="Handler" %> using System; using System.Collections; using System.Collections.Generic; using System.Data; using System.Web; using System.Web.SessionState; using System.Web.UI; using System.Text; using System.Drawing; using System.Drawing.Imaging; using System.IO; public class Handler : IHttpHandler { public void ProcessRequest (HttpContext context) { HttpRequest Request=context.Request; HttpResponse Response=context.Response; if((Request.QueryString["type"]!=null)&&Request.QueryString["type"].ToString()=="yzm") { RandImage randImage=new RandImage(); System.Drawing.Image image = randImage.GetImage(); System.IO.MemoryStream memoryStream = new MemoryStream(); image.Save(memoryStream, ImageFormat.Jpeg); Response.ClearContent(); Response.ContentType = "image/gif"; Response.BinaryWrite(memoryStream.ToArray()); image.Dispose(); Response.End(); } else if((Request.QueryString["type"]!=null)&&(Request.QueryString["type"].ToString()=="checkName")) { context.Response.ContentType = "text/plain"; #region 判断用户是否被注册过 string returnStr = ""; //这里其实是context.Request.QueryString根据name获取的值 一定要设置空间的name值 if (Request.QueryString["userName"] != null && Request.QueryString["userName"].ToString().Length > 0) { if (isExist(Request.QueryString["userName"].ToString())) { returnStr = "false"; } else { returnStr = "0"; } } else { returnStr = "null"; } context.Response.Write(returnStr); context.Response.End(); #endregion } } #region 判断用户是否被注册过 public bool isExist(string userName) { //Snet.BLL.UserAccount bll = new BLL.UserAccount(); //return bll.Exists(userName); return true; } #endregion public bool IsReusable { get { return false; } } /// <summary> /// 产生随即图片 /// </summary> public sealed class RandImage { private const string RandCharString = "0123456789"; private int width; private int height; private int length; /// <summary> /// 默认构造函数，生成的图片宽度为48×24，随即字符串字符个数 /// </summary> public RandImage() : this(48, 24, 4) { } /// <summary> /// 指定生成图片的宽和高，默认生成图片的字符串长度为4个字符 /// </summary> /// <param name="width"></param> /// <param name="height"></param> public RandImage(int width, int height) : this(width, height, 4) { } /// <summary> /// 指定生成图片的宽和高以及生成图片的字符串字符个数 /// </summary> /// <param name="width"></param> /// <param name="height"></param> /// <param name="length"></param> public RandImage(int width, int height, int length) { this.width = width; this.height = height; this.length = length; } /// <summary> /// 以默认的大小和默认的字符个数产生图片 /// </summary> /// <returns></returns> public Image GetImage() { Bitmap image = new Bitmap(width, height); Graphics g = Graphics.FromImage(image); g.Clear(Color.White); string randString = ""; Random random = new Random(); do { //使用DateTime.Now.Millisecond作为生成随机数的参数，增加随机性 randString += RandCharString.Substring(random.Next(DateTime.Now.Millisecond) % RandCharString.Length, 1); } while (randString.Length < 4); float emSize = (float)width / randString.Length; Font font = new Font("Arial", emSize, (System.Drawing.FontStyle.Bold | System.Drawing.FontStyle.Italic)); Pen pen = new Pen(Color.Silver); #region 画图片的背景噪音线 int x1, y1, x2, y2; for (int i = 0; i < 25; i++) { x1 = random.Next(image.Width); y1 = random.Next(image.Height); x2 = random.Next(image.Width); y2 = random.Next(image.Height); g.DrawLine(pen, x1, y1, x2, y2); } #endregion #region 画图片的前景噪音点 for (int i = 0; i < 100; i++) { x1 = random.Next(image.Width); y1 = random.Next(image.Height); image.SetPixel(x1, y1, Color.FromArgb(random.Next(Int32.MaxValue))); } #endregion g.DrawString(randString, font, Brushes.Red, 2, 2); g.Dispose(); return image; } } }