表單資料驗證方法（二）——ASP.NET後台驗證

　　昨天寫了一下關於如何在前台快捷實現表單資料驗證的方法，今天接著昨天的，把後台實現資料驗證的方法記錄一下。先說明一下哈，我用的是asp.net，所以後台驗證方法也是基於.net mvc來做的。

　　好了，閑言少敘，我回到正題上來啦。

　　後台實現表單資料驗證的方法也是相當簡單的，下面看我一步一步的來做哈。（為了單純的說明表單驗證的方法，減少其他不必要的內容的說明，這裡我就不涉及資料庫了。）

1.建立一個.net mvc應用程式

這一步今天就不詳細講了，有時間的話再寫一篇關於如何建立項目和實現簡單增刪改查功能的部落格，鞏固自己，順便幫幫和我一樣入地無門的菜雞們。建好的應用程式，我的名字起為FormCheck：

 

 2.建立使用者資訊欄位實體資料類User816.cs

（這個命名各位不要去糾結他哈，因為我這裡用的不是剛寫的熱乎代碼，而是8月16日寫的冷代碼，因為晚上時間有限，就不重新寫了）

　　如所示，我在Models檔案夾中建立一個User816.cs的實體類，代碼如下：

 1 namespace FormCheck.Models 2 { 3     public class User816 4     { 5  6         public string userName { get; set; } 7  8         public string passWord { get; set; } 9 10         public string eMail { get; set; }11              12     }13 }

 

這裡我們寫了三個屬性，分別為使用者名稱、密碼和郵箱，下面將依次為這幾個資料添加校正方法。

主要添加[Required] ，[ StringLength] ，[RegularExpression] 三個吧，因為這三個是最常用的。

（1）Required

首先看看這個方法的定義：

這段代碼只需要看到能看懂的漢字就可以了，沒錯，就是那個 【指定的資料欄位的值是必須的】，好了現在我們知道這個是什麼意思了，那麼問題來了，這個東西怎麼用呢？看下面：

   [Required(ErrorMessage ="*必填項")]   public string userName { get; set; }

 

 在需要驗證的屬性上面用中括弧將Required包起來，然後可以添加上錯誤提示資訊。怎麼樣，是不是很簡單，哈哈。

（2）StringLength

 這個也是一樣的，直接看看這個東東的意思和用法，就一筆帶過了吧：

 

 用法如下：

 [StringLength(5,ErrorMessage ="*超過長度了") ] public string userName { get; set; }

 

上面的第一個參數【5】指的是字串的最大長度 ，當然這裡並不是只能設定最大長度，也可以設定最小長度，不止如此，還有很多其他的用法，這裡我就不細說了，具體的需要用到的同學可以在網上搜尋資料。

（3）RegularExpression

這個就比較牛逼了，驗證Regex：

 

用法如下：

 [RegularExpression(@"^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$", ErrorMessage = "*郵箱格式錯誤")] //Regex  public string eMail { get; set; }

 

 關於這幾個驗證方法就說到這啦，下面我們看看實際怎麼用咯。

3.驗證資料

（1）在相應屬性上添加想要的驗證：

代碼如下所示：

namespace FormCheck.Models{    public class User816    {        [StringLength(5,ErrorMessage ="*超過長度了") ]        [Required]        public string userName { get; set; }               [Required(ErrorMessage ="*必填項")]        [Range(100,1000000,ErrorMessage ="*數字大小超出範圍了")]        public string passWord { get; set; }        [Required]        [RegularExpression(@"^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$", ErrorMessage = "*郵箱格式錯誤")] //Regex        public string eMail { get; set; }                 }}

 

 （2）在前台頁面引用User816.cs

首先，在HomeController中建立一個方法，取名為GetInfo(),然後添加對應的視圖，然後引用User816：

：

 

 

 

 (3)建立表單

代碼如下：

<div>    @using (Html.BeginForm("GetInfoFunc", "Home", FormMethod.Post))    {        @Html.ValidationSummary(true)        <label class="btn-default">姓名</label>        @Html.TextBoxFor(model => model.userName);        @Html.ValidationMessageFor(model => model.userName)        <br>        <label class="btn-default">密碼</label>        @Html.TextBoxFor(model => model.passWord);        @Html.ValidationMessageFor(model => model.passWord)        <br>        <label class="btn-default">郵箱</label>        @Html.TextBoxFor(model => model.eMail);        @Html.ValidationMessageFor(model => model.eMail)        <button class="btn-info" id="submit">提交</button>    }</div>

 上面的代碼中，實現後台校正功能的主要是這一句哦，用的時候千萬記得不要搞漏了：

 @Html.ValidationMessageFor(model => model.userName) @Html.ValidationMessageFor(model => model.passWord) @Html.ValidationMessageFor(model => model.eMail)

 

 其實只需要這三步已經可以看到效果了，但是為了保證一個表單提交demo的完整性，我就再補上第四步啦，哈哈。

（4）前台提交資料，後台接收

ajax方式提交表單：

<script type="text/javascript">    $(function () {        $("#submit").click(function () {            var userName = $("#userName").val();            var passWord = $("#passWord").val();            var eMail = $("#eMail").val();            $.ajax({                url: "@Url.Action("GetInfoFunc", "Home")",                type: "post",                data: {                    userName: userName,                    passWord: passWord,                    eMail: eMail                },                success: function (data) {                    alert(data);                }            });        });    });</script>

 

後台建立控制器 GetInfoFunc()接收資料：

[HttpPost] public ActionResult GetInfoFunc() {            string userName = Request["userName"];            string passWord = Request["passWord"];            string eMail = Request["eMail"];            return Content(userName + "," + passWord + "," + eMail); }        

 

4.查看結果

 

 

 這裡實現的效果跟我昨天寫的前端js校正的方法差不多哦，而且也非常的簡單呢。

 

 好了，今天就寫到這裡啦，好好學習，天天向上，啊哈哈哈哈哈！

我的eMail:3074596466@qq.com