前言(生成验证码的方法简介)
利用button按钮实现验证码的生成 + ajax的UpdatePanel控件实现局部刷新(因为一旦点击button按钮进行验证码的重新生成就会刷新页面,所以需要通过ajax进行局部刷新)
说明(博主的血泪史)
博主一开始采用的是 文本框用户输入验证码+div图层显示验证码+js生成验证码+CustomValidator自定义验证控件(再自定义一个函数用来判断用户输入的验证码是否正确) 这个方法,思路是正确的,但是在运行的时候不知道为什么系统自行给CustomValidator自定义验证控件加了"Visibility:hidden"属性,使判断结果无法展示出来,而且上面的属性修改没用,一运行程序还是会显示hidden. !!!就无语
后来博主换了方法用label标签显示验证码+js生成验证码,然后将验证码赋给label( label的id.innerHtML=验证码)+后台获取验证码的值后在方法里面进行验证,结果发现无法获取label的文本值(文本值为空),后来百度有说是用txtBox的,但是博主用了还是无法获取值,然后博主深思熟虑想是不是js赋值给txtBox/label和后台获取的对应的文本内容是不一致的.然后又换了另外的方法
label/txtBox显示验证码+后台随机产生验证码然后在赋值给label/txtBox(PageLoad方法里面随机生成验证码—因为一打开页面就需要显示出验证码),但是这又出了bug—>label/txtBox的文本内容与随机生成的文本内容不一致,这样导致后台验证一直是错误
博主就一个字: 绝!!!
后来博主千思万想—-利用button+ajax的方法
button的文本用来显示验证码,(这里要注意在最开始就给button的文本一个默认验证码–因为button的click事件只有点击了才能实行)button的click事件用来随机生成验证码,但是因为一点击button,就会进行全局刷新(整个页面刷新,但是咱们只是想让验证码部分进行刷新),所以利用ajax进行局部刷新.
最后经过测试,结果正确!!!
千辛万苦终于写出来了!!!在写不出来,博主要哭死了
生成验证码的代码展示
.aspx页面代码(前端代码)
<asp:TextBox ID="txtCheck" runat="server" placeholder="请输入验证码" autocomplete="off" class="layui-input" style="display: inline-block;" ></asp:TextBox>
<asp:ScriptManager runat="server"></asp:ScriptManager> <!--使用ajax一定要先添加管理控件-->
<asp:UpdatePanel ID="UpdatePanel1" runat="server" style="width:110px;display:inline-block ;"> <!--使用ajax的局部刷新控件-->
<ContentTemplate>
<asp:Button ID="btnCode" runat="server" Text="5gQ2" OnClick="btnCode_Click" BorderStyle="None" Font-Bold="True" Height="33px" Width="72px" Font-Size="X-Large" style="margin-left:25px;"/> <!--button控件放在ajax局部刷新控件内部,则button控件的点击引起的刷新也会自动引起ajax进行局部刷新-->
</ContentTemplate>
</asp:UpdatePanel>
.aspx.cs页面代码(后台代码)
protected void btnCode_Click(object sender, EventArgs e)
{
string[] randNumber = { "1","2", "3", "4", "5", "6", "7", "8", "9", "0",
"q","w","e","r","t","y","u","i","o","p","a","s","d","f","g","h","j","k","c","z","x","v","b","n","m","Q","E",
"R","T","Y","U","I","A","D","F","G","H","J","K","L","Z","X","C","V","B","N","M"};
Random rd = new Random();
btnCode.Text = "";
for (int i = 0; i < 4; i++)
{
int index = rd.Next(randNumber.Length);
btnCode.Text += randNumber[index];
}
}
.aspx.cs后台验证代码(判断用户验证码是否输入正确)
<!--下面这部分验证正误的代码你可以写在你的注册/登录等按钮事件里-->
if (btnCode.Text.Trim() == txtCheck.Text.Trim())
{
Response.Write("<script>alert('" + "验证成功" + "')</script>");
}
else
{
Response.Write("<script>alert('" + "验证失败!验证码输入错误,请重新输入!" + "')</script>");
}
|