MVC3 數據驗證用法之密碼驗證設計思路

描述：MVC數據驗證使用小結

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

本人最近在公司用mvc做了一個修改密碼的功能，使用的是mvc數據驗證，現將使用心得分享給大家

首先，我們先分析一下，如果要實現密碼修改功能，我們需要做哪些工作。先從頁面說起吧，前台頁面起碼需要三個密碼框吧，分別表示原始密碼，新密碼，重復新密碼，最后再加一個按鈕，這樣一個頁面的基本元素就構造完畢了

其次，我們需要對添加的數據進行驗證，包括，原始密碼正確性驗證，新密碼格式驗證，重復輸入的密碼一致性驗證

最后，我們把修改后的密碼保存到數據庫里就大功告成了(注：這里只是簡單的實現了密碼的修改功能)

所以，分析到這里，思路也就清晰了，下面就該實現了

一、設計思路

 1、設計一個修改密碼模型類

 2、使用mvc創建一個該模型類的強類型視圖

 3、提交表單，將新密碼保存到數據庫

二、代碼實現

1、我們先看一下設計的模型類的代碼吧

    public class UserPwdEditModel {
        [Display(Name = "舊密碼")]
        [Required(ErrorMessage = "請輸入 {0}。")]
        [Remote("Validate", "UserInfo", HttpMethod = "post", ErrorMessage = "舊密碼錯誤")]
        [Editable(true)]
        public string OldPwd {
            get;
            set;
        }

        [Display(Name = "新密碼")]
        [Required(ErrorMessage = "請輸入 {0}。")]
        [RegularExpression(@"^(([a-z]+)|([A-Z]+)).([0-9]+)", ErrorMessage = "密碼只能包含英文、數字(必須以字母開頭)")]
        [StringLength(18, MinimumLength = 6, ErrorMessage = "密碼長度限制在6-18個字符")]
        public string NewPwd {
            get;
            set;
        }

        [Display(Name = "重復新密碼")]
        [Required(ErrorMessage = "請再次輸入 新密碼。")]
        //[Remote("ValidateRepeatPwd", "UserInfo", HttpMethod = "post", AdditionalFields = "NewPwd", ErrorMessage = "兩次密碼不一致,請重新輸入")]
        [Compare("NewPwd", ErrorMessage = "兩次密碼不一致,請重新輸入")]
        public string RepeatPwd {
            get;
            set;
        }
    }

沒錯，我把頁面上的基本元素做成了一個模型，這樣可以很方便的使用mvc數據驗證,其中Remote節里的參數分別代表action,controller,請求方式(Post/Get),錯誤提示信息ErrorMessage,action代碼如下：

        /// <summary>
        /// 驗證舊密碼是否正確
        /// </summary>
        /// <param name="Password">舊密碼</param>
        /// <returns>如果舊密碼正確,返回true;反之，返回false</returns>
        [HttpPost]
        public JsonResult Validate(string OldPwd) {
            var str = this.db.Users.Where(p => p.ID == 1 && p.Password == OldPwd).FirstOrDefault();
            bool isvalidate = false;
            if (str != null)
            isvalidate = true;
            return Json(isvalidate, JsonRequestBehavior.AllowGet);
        }

        /// <summary>
        /// 驗證兩次密碼是否相同
        /// </summary>
        /// <param name="NewPwd">初始化新密碼</param>
        /// <param name="RepeatPwd">重復輸入新密碼</param>
        /// <returns>返回兩次密碼比較結果，若相等，返回true;反之,返回false</returns>
        [HttpPost]
        public JsonResult ValidateRepeatPwd(string NewPwd, string RepeatPwd) {
            bool isvalidate = false;
            if (NewPwd.Trim().ToLower() == RepeatPwd.Trim().ToLower())
                isvalidate = true;
            return Json(isvalidate, JsonRequestBehavior.AllowGet);
        }

2、下面我們創建強類型視圖(創建過程省略...)

@model GraduateMISX.ViewModels.UserInfo.UserPwdEditModel
@{
    ViewBag.Title = "PasswordEdit";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@using (Html.BeginForm("PasswordEdit", "UserInfo", FormMethod.Get, new {
    @id = "formOfBettersoft"
})) {
    <div class="tree-add-group">
        <div class="tree-add-title">
                @Html.LabelFor(model => model.OldPwd)
        </div>
        <div class="tree-add-text">
            @Html.PasswordFor(model => model.OldPwd)
            @Html.ValidationMessageFor(model => model.OldPwd)
        </div>
    </div>
    <div class="tree-add-group">
        <div class="tree-add-title">
                @Html.LabelFor(model => model.NewPwd)
        </div>
        <div class="tree-add-text">
            @Html.PasswordFor(model => model.NewPwd)
            @Html.ValidationMessageFor(model => model.NewPwd)
        </div>
    </div>
    <div class="tree-add-group">
        <div class="tree-add-title">
                @Html.LabelFor(model => model.RepeatPwd)
        </div>
        <div class="tree-add-text">
            @Html.PasswordFor(model => model.RepeatPwd)
            @Html.ValidationMessageFor(model => model.RepeatPwd)
        </div>
    </div>
    <div class="tree-add-group">
        <input type="submit" value="保存" style="left: 200px" id="btnSubmit"/>
    </div>     
}

注：在使用Remote驗證的時候應在Web.config文件下配置appsetting節

 <appSettings>
    <add key="ClientValidationEnabled" value="true" />
    <add key="UnobtrusiveJavaScriptEnabled" value="true" />
  </appSettings>

三、運行截圖

運行程序，點擊提交按鈕后將會看到模型驗證已經生效