MVC下验证码

验证码技术是目前很多WEB程序采用的一种安全防御技术，主要用于防止使用软件程序自动和批量提交表单。MvcCaptcha是应用于ASP.NET MVC Web应用程序中的验证码控件，功能强大，使用简单方便，生成的验证码图片效果如下：

MvcCaptcha的主要特点：

1. 支持自定义验证码图片的字体扭曲程度（None, Low, Medium, High, Extreme五级）和图片中的文本个数；
2. 支持自定义验证码图片的背景杂色级别（None, Low, Medium, High, Extreme五级）；
3. 支持自定义验证码图片的干扰线条级别（None, Low, Medium, High, Extreme五级）；
4. 可自定义验证码图片中使用的文本，英文字母、数字及汉字均可；
5. 使用Session保存验证码文本，确保安全；
6. 可以在用户激活验证码输入框时才生成图片（类似于百度帖吧的验证码生成方式），减轻服务器负担；
7. 支持Ajax方式加载图片，即使应用验证码的当前页面被缓存，也可保证每次生成新的验证码图片；
8. 支持在web.config中全局设置验证码相关属性；

 

1. 下载并在ASP.NET MVC项目中添加对MvcCaptcha.dll的引用；
2. 在当前页面的Form中添加验证码输入文本框，供用户手工输入验证码用，验证码文本框可以放在Form中的任何地方，示例如下：

   <input type="text" name="_mvcCaptchaText" id="_mvcCaptchaText" />

   文本框的name和id可以是MvcCaptcha默认的“_mvcCaptchaText”，也可以是自定义的其它值，在当前Form被提交后，MvcCaptcha控件会在服务器端获取这个文本框的值进行验证，如果文本框的name和id值不是默认的“_mvcCaptchaText”，则在在前台注册码证码控件和在后台进行验证时需要进行额外设置，下面会详细说明。
3. 在当前页面上添加放置验证码图片的容器元素，可以是div、span等任何元素，并为其设置id值，示例如下：

   <div id="captchaImage"></div>

   id属性值可以默认为“captchaImage”，如果设置为其它值，则需要在注册MvcCaptcha控件时额外设置，下面会有详细说明。
4. 在Form内注册MvcCaptcha，示例如下：

   Razor语法：

   @Html.MvcCaptcha()

   WebForm语法：

   <%:Html.MvcCaptcha()%>

   若前面所讲的验证码输入文本框的id不是默认的“_mvcCaptchaText”，或者验证码图片容器元素的id不是默认的“captchaImage”，则需要在MvcCaptchaOptions属性中指定，假定验证码文本框的id是“captchaInput”，图片验证码的容器元素的id是“imgContainer”，则上面的注册代码应改为：

   Razor语法：

   @Html.MvcCaptcha(new MvcCaptchaOptions {ValidationInputBoxId = "captchaInput", CaptchaImageContainerId = "imgContainer" })

   WebForm语法：

   <%:Html.MvcCaptcha(new MvcCaptchaOptions {ValidationInputBoxId = "captchaInput", CaptchaImageContainerId = "imgContainer" })%>

   其中的ValidationInputBoxId是验证码输入文本框的客户端ID，CaptchaImageContainerId是包含验证码图片的容器元素的客户端ID。

   若要启用Ajax延迟加载验证码图片功能，则需要设置MvcCaptchaOptions属性的DelayLoad为true，示例如下：

   Razor语法：

   @Html.MvcCaptcha(new MvcCaptchaOptions {DelayLoad = true,ValidationInputBoxId = "captchaInput", CaptchaImageContainerId = "imgContainer" })

   WebForm语法：

   <%:Html.MvcCaptcha(new MvcCaptchaOptions {DelayLoad = true,ValidationInputBoxId = "captchaInput", CaptchaImageContainerId = "imgContainer" })%>

5. 在后台Controller的Action方法上添加ValidateMvcCaptchaAttribute过滤器，示例如下：

   [ValidateMvcCaptcha][HttpPost]
   
   public ActionResult Login(LoginModel login){...}
   
   

   如果前面提到的验证码输入文本框的name属性值不是默认的“_mvcCaptchaText”时，需要在过滤器中显式指定该值，假定验证码文本框的name属性值为“captchaInput”，则代码应改为：

   [ValidateMvcCaptcha("captchaInput")][HttpPost]
   
   public ActionResult Login(LoginModel login){...}
   
   

   在Action方法中，用ModelState.IsValid进行验证，示例如下：

   [ValidateMvcCaptcha("captchaInput")][HttpPost]
   
   public ActionResult Login(LoginModel login){
   
   if (ModelState.IsValid){
   
   //验证通过
   
   }
   
   else{
   
   //验证失败
   
   }}

小技窍：

若要进行客户端unobtrusive Javascript验证，可以在验证码文本框代码中加上 data-val="true" data-val-required="验证码不能为空"，示例如下：

<input type="text" name="_mvcCaptchaText" id="_mvcCaptchaText" data-val="true" data-val-required="验证码不能为空" />