ASP.NET 结合JS 实现客户端验证码问题

[cstester]

代码如下，可以实现后台验证，也就是说，在提交事件里通过 Session["Code"]验证。。。。

可如何在客户端验证，如果验证码不正确干脆提交不了呢？

public partial class ValidateCode : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        string strKey = "";
        byte[] data = this.GenerateVerifyImage(5, ref strKey);
        Response.OutputStream.Write(data, 0, data.Length);
        Session["Code"] = strKey;
    }

    public byte[] GenerateVerifyImage(int nLen, ref string strKey)
    {
        int nBmpWidth = 25 * nLen + 5;
        int nBmpHeight = 36;
        System.Drawing.Bitmap bmp = new System.Drawing.Bitmap(nBmpWidth, nBmpHeight);

        // 1. 生成随机背景颜色
        int nRed, nGreen, nBlue;  // 背景的三元色
        System.Random rd = new Random((int)System.DateTime.Now.Ticks);
        nRed = 255;
        nGreen = 255;
        nBlue = 255;

        // 2. 填充位图背景
        System.Drawing.Graphics graph = System.Drawing.Graphics.FromImage(bmp);
        graph.FillRectangle(new SolidBrush(System.Drawing.Color.FromArgb(nRed, nGreen, nBlue))
         , 0
         , 0
         , nBmpWidth
         , nBmpHeight);


        // 3. 绘制干扰线条，采用比背景略深一些的颜色
        int nLines = 3;
        System.Drawing.Pen pen = new System.Drawing.Pen(System.Drawing.Color.FromArgb(nRed - 17, nGreen - 17, nBlue - 17), 2);
        for (int a = 0; a < nLines; a++)
        {
            int x1 = rd.Next() % nBmpWidth;
            int y1 = rd.Next() % nBmpHeight;
            int x2 = rd.Next() % nBmpWidth;
            int y2 = rd.Next() % nBmpHeight;
            graph.DrawLine(pen, x1, y1, x2, y2);
        }

        // 采用的字符集，可以随即拓展，并可以控制字符出现的几率
        string strCode = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";

        // 4. 循环取得字符，并绘制
        string strResult = "";
        for (int i = 0; i < nLen; i++)
        {
            int x = (i * 22 + rd.Next(3));
            int y = rd.Next(4) + 1;

            // 确定字体
            System.Drawing.Font font = new System.Drawing.Font("Courier New",
             24 + rd.Next() % 4,
             System.Drawing.FontStyle.Bold);
            char c = strCode[rd.Next(strCode.Length)];  // 随机获取字符
            strResult += c.ToString();

            // 绘制字符
            graph.DrawString(c.ToString(),
             font,
             new SolidBrush(System.Drawing.Color.FromArgb(0, 128, 180)),
             x,
             y);
        }

        // 5. 输出字节流
        System.IO.MemoryStream bstream = new System.IO.MemoryStream();
        bmp.Save(bstream, System.Drawing.Imaging.ImageFormat.Jpeg);
        bmp.Dispose();
        graph.Dispose();
        Session["Code"] = strKey = strResult;
        byte[] byteReturn = bstream.ToArray();
        bstream.Close();

        return byteReturn;
    }
}

[色拉油]

仅有客户端验证是不安全的验证，用户可以修改你数据 再说验证码不一般都是存在session里的嘛 如果连客户端验证都过不去，楼主可以return false，这样form就不提交了

[娃都会打酱油了]

客户端怎么可能让你验证呢？？你想要在客户端验证，唯一的方法就是你把code也传到了页面上。。。那你这个code还有啥意义？？？ 所以你想要进行验证码验证则必须通过服务端

[段传涛]

你说的这个需求很简单。 我没有看你的代码。 用CustomValidator：自定义验证控件 轻松搞定。

[段传涛]

CustomValidator验证控件使用 CustomValidator控件允许用户自定义验证,可以在服务器端验证，可以在客户端验证，也可以在客户端和服务端同时验证 下面的例子是验证一个数能否被2整除 1. 服务器端验证 在验证的时候会用到IsValid这个属性，根据IsValid的值(true/false)来判断是否通过页面验证。 a. 拖放控件TextBox用于输入值；Button用于测试验证状态，IsValid为true触发Click事件；CustomValidator控制要验证的对象和验证事件等。 b. 设置CustomValidator的属性这里设置ErrorMessage为Not an even number!,ControlToValidate为Text1 c. 编写CustomValidator的ServerValidation事件 protected void CustomValidator1_ServerValidate(object source, ServerValidateEventArgs args) { try { int num = int.Parse(args.Value); args.IsValid = ((num%2)==0); } catch (Exception ex) { args.IsValid = false; } } d. 编写Button的Click事件 protected void Button2_Click(object sender, EventArgs e) { if (Page.IsValid) { Response.Redirect("gouWuChe.aspx"); } else { //提示 } } 2. 客户端验证 使用javascript function验证，并用设置ClientValidationFunction为javascript 验证函数(function) a. Javascript 函数 <script language="javascript"> function ValidateNumber(source,args) { if(args.Value%2==0) { args.IsValid=true; } else { args.IsValid=false; } } </script> b. 设置CustomValidator的属性这里设置ErrorMessage为请输入能被2整除的数,ControlToValidate为TextBox1, ClientValidationFunction为ValidateNumber c. 编写Button的Click事件 protected void Button2_Click(object sender, EventArgs e) { if (Page.IsValid) { Response.Redirect("gouWuChe.aspx"); } else { //提示 } } 3. 客户端和服务端同时验证 将上面的两部分代码合并可以了

[小猴168]

不能在客户端验证，js是没有办法获取SESSION的, 因为它只是客户端的脚本,SESSION是服务端的.如果想要获取SESSION 而不刷新页面就需要AJAX

[wendad]

使用Ajax !!

[Bule]

mark一下，等待学习。

[jakgong]

ajax 搞定啦 easy

[yyl8781697]

js是无法直接获取session信息的，一个方式是用ajax异步访问服务器端获取session来判断 但是像验证验证码这样的需求完全没必要这么做 一般含验证码登录之类的可以这么做： 当用户输入账号密码验证码后 用js判断输入的长度是否符合，有没有非法字符 然后用ajax向服务器端发送账号密码验证码 在服务器端首先判断你的验证码字符串和session[验证码]是否一样 如果不一样就直接返回false了 提示验证码错误 如果通过了验证码的验证再去验证你的账号密码就ok了