可切换的验证码

先把页面布局做好，我利用bootstrap框架搭建，当然也可以用其他框架来搭建。

<div class="form-group row">

    <label for="IdentifyingCode" class="col-sm-3 col-xl-2 col-form-label txtr">验证码</label>

    <div class="col-sm-9 col-xl-10">

    <div class="input-group">

    <input type="text" class="form-control" id="IdentifyingCode" name="validCode" placeholder="请您输入验证码">

    <div class="input-group-prepend">

    <img src="/Main/ValidCode" class="input-group-text p-0" id="ValidateCode" />

    </div>

    </div>

    </div>

</div>

以上是搭建框架的代码，img是放验证码下面的图片的，src就是图片的地址；

col-form-label：放到<label>上以便他们垂直居中与他们相关的表单控件。

form-control：文本类的标签都可以用，.form-control样式进行处理优化

placeholder：要使用它那必须要看清楚input标签中是否有（aria-label、aria-labelledby、title属性），如果都没有辅助技术可以使用placeholder的属性；如果有上面几种属性出现，则不建议使用placeholder；

    页面显示如下

验证码上面的label标签上的txtr类是我自己给的一个类；

这个类主要是给“验证码”样式

   

在三行代码主要把它靠右、字体加粗和字体大小；

搭建完页面，然后转回控制器写随机验证码，

/// <summary>

/// 生成验证码

/// </summary>

/// <returns></returns>

public ActionResult ValidCode()

{

string strRandom = ValidCodeUtils.GetRandomCode(5);

Session["validCode"] = strRandom;

byte[] imgByte = ValidCodeUtils.CreateImage(strRandom);

return File(imgByte,@"image/jpeg");

}

    代码的解析：

1.///：这三条斜杠是用来备注的，在控制器页码上方连续打出三条斜杠就能备注该方法；

2.ValidCodeUtils.GetRandomCode(5)：随机生成数字和字母（没有大小写之分），括号中的5代表可以随机生成具体（数字和字母（没有大小写之分））个数；

3.Session["validCode"] = strRandom：将验证码存入Session会话，方便传数据；

4.byte[] imgByte = ValidCodeUtils.CreateImage(strRandom)：创建一个数组imgByte来根据验证码来产生图片；

5.return File(imgByte,@"image/jpeg")：返回图片数据；

回到视图先引入jq必备的插件后，写入jq代码

Attr：是添加某某属性和属性值；

最终成品

点击或者刷新它都会切换不同的验证码。