zoukankan      html  css  js  c++  java
  • 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>

     

    三、运行截图

     

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

     

     

     

     

     

     

     

     
     
  • 相关阅读:
    CSS学习1
    三个和尚没水喝阅读笔记
    Javascript学习1

    mv 批量
    emacs 大小写转换
    too many open files
    成都定房
    有关重定向
    postgresql 数据库
  • 原文地址:https://www.cnblogs.com/Leo_wl/p/3574495.html
Copyright © 2011-2022 走看看