MVC数据验证使用小结

原文:MVC数据验证使用小结

描述：MVC数据验证使用小结

内容：display,Required,stringLength,Remote,compare,RegularExpression

本人最近在公司用mvc做了一个修改密码的功能，使用的是mvc数据验证，现将使用心得分享给大家

首先，我们先分析一下，如果要实现密码修改功能，我们需要做哪些工作。先从页面说起吧，前台页面起码需要三个密码框吧，分别表示原始密码，新密码，重复新密码，最后再加一个按钮，这样一个页面的基本元素就构造完毕了

其次，我们需要对添加的数据进行验证，包括，原始密码正确性验证，新密码格式验证，重复输入的密码一致性验证

最后，我们把修改后的密码保存到数据库里就大功告成了(注：这里只是简单的实现了密码的修改功能)

所以，分析到这里，思路也就清晰了，下面就该实现了

一、设计思路

 1、设计一个修改密码模型类

 2、使用mvc创建一个该模型类的强类型视图

 3、提交表单，将新密码保存到数据库

二、代码实现

1、我们先看一下设计的模型类的代码吧

 1     public class UserPwdEditModel {
 2         [Display(Name = "旧密码")]
 3         [Required(ErrorMessage = "请输入 {0}。")]
 4         [Remote("Validate", "UserInfo", HttpMethod = "post", ErrorMessage = "旧密码错误")]
 5         [Editable(true)]
 6         public string OldPwd {
 7             get;
 8             set;
 9         }
10
11         [Display(Name = "新密码")]
12         [Required(ErrorMessage = "请输入 {0}。")]
13         [RegularExpression(@"^(([a-z]+)|([A-Z]+)).([0-9]+)", ErrorMessage = "密码只能包含英文、数字(必须以字母开头)")]
14         [StringLength(18, MinimumLength = 6, ErrorMessage = "密码长度限制在6-18个字符")]
15         public string NewPwd {
16             get;
17             set;
18         }
19
20         [Display(Name = "重复新密码")]
21         [Required(ErrorMessage = "请再次输入 新密码。")]
22         //[Remote("ValidateRepeatPwd", "UserInfo", HttpMethod = "post", AdditionalFields = "NewPwd", ErrorMessage = "两次密码不一致,请重新输入")]
23         [Compare("NewPwd", ErrorMessage = "两次密码不一致,请重新输入")]
24         public string RepeatPwd {
25             get;
26             set;
27         }
28     }

创建修改密码模型来

没错，我把页面上的基本元素做成了一个模型，这样可以很方便的使用mvc数据验证

2、下面我们创建强类型视图(创建过程省略...)

 1 @model GraduateMISX.ViewModels.UserInfo.UserPwdEditModel
 2 @{
 3     ViewBag.Title = "PasswordEdit";
 4     Layout = "~/Views/Shared/_Layout.cshtml";
 5 }
 6
 7 @using (Html.BeginForm("PasswordEdit", "UserInfo", FormMethod.Get, new {
 8     @id = "formOfBettersoft"
 9 })) {
10     <div class="tree-add-group">
11         <div class="tree-add-title">
12                 @Html.LabelFor(model => model.OldPwd)
13         </div>
14         <div class="tree-add-text">
15             @Html.PasswordFor(model => model.OldPwd)
16             @Html.ValidationMessageFor(model => model.OldPwd)
17         </div>
18     </div>
19     <div class="tree-add-group">
20         <div class="tree-add-title">
21                 @Html.LabelFor(model => model.NewPwd)
22         </div>
23         <div class="tree-add-text">
24             @Html.PasswordFor(model => model.NewPwd)
25             @Html.ValidationMessageFor(model => model.NewPwd)
26         </div>
27     </div>
28     <div class="tree-add-group">
29         <div class="tree-add-title">
30                 @Html.LabelFor(model => model.RepeatPwd)
31         </div>
32         <div class="tree-add-text">
33             @Html.PasswordFor(model => model.RepeatPwd)
34             @Html.ValidationMessageFor(model => model.RepeatPwd)
35         </div>
36     </div>
37     <div class="tree-add-group">
38         <input type="submit" value="保存" style="left: 200px" id="btnSubmit"/>
39     </div>
40 }

创建强类型视图

注：在使用Remote验证的时候应在Web.config文件下配置appsetting节

1  <appSettings>
2     <add key="ClientValidationEnabled" value="true" />
3     <add key="UnobtrusiveJavaScriptEnabled" value="true" />
4   </appSettings>

配置web.config

三、运行截图

运行程序，点击提交按钮后将会看到模型验证已经生效