分享你的 Coding 新鮮事

前言

一般電子商務網站的註冊表單最常見的資料驗證莫過於：帳號密碼不能超過12個字、生日欄位是必須輸入的....等，而在 ASP.NET MVC 中只要透過 Model 資料驗證搭配 Jquery-Validate 的套件就能輕鬆達到前端的驗證，但是如果今天老闆或客戶告訴你：「我希望當使用者輸入的字元超過資料庫欄位大小就沒辦法在輸入了！」，這時候我們又該如何解決呢 ? 不過我們不用怕先請出三大金言：「莫慌、莫急、莫害怕」來為我們祈禱，再來看看該如何解決此問題！

事前準備

1.首先我們先在 Model 內新增一個類別來為資料欄位加上驗證，下面範例先將 Name 欄位的長度設定為10個字

[MetadataType(typeof(ProductMD))]
    public partial class Product
    {
        public class ProductMD
        {
            [Required]
            [Display(Name = "產品代號")]
            public int Id { get; set; }

            [StringLength(10)]
            [Display(Name = "產品名稱")]
            public string Name { get; set; }
        }
    }

2.建立 View ，如果是使用 MVC 4 的話可以在頁面上加入下面程式瑪片段來掛入 jQuery Vailidate 的 Plug-in 

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

或是在頁面上引用 jquery.validate.js、jquery.validate.unobtrusive.js 這兩個檔案。

3.透過瀏覽器的偵錯工具可以發現，再有加入 StringLength 驗證屬性的欄位，其 HTML 會產生 data-val-length-max 的屬性，如下:

<input class="text-box single-line input-validation-error" data-val="true" data-val-length="欄位 產品名稱 必須是最大長度為 10 的字串。" data-val-length-max="10" id="Name" name="Name" type="text" value=""></span>

4.而在 input 中有一個 maxlength 的屬性可以限制欄位輸入的字數，所以我們可以透過 Jquery Vailidate 為我們產生的 data-val-length-max 的屬性搭配 maxlength 屬性來達到限制 input 的限制輸入字數，所以我們透過 jQuery 的選擇器來對頁面上每個符合的 input 欄位加上 maxlength 的屬性，如下:

       $(document).ready(function () {
            $("input[data-val-length-max]").each(function (index, element) {
                var length = parseInt($(this).attr("data-val-length-max"));
                $(this).prop("maxlength", length);
            });
        });

總結

重整頁面後就會發現，Name 欄位再輸入10個字元之後就會無法繼續輸入，其實原理非常簡單只是透過 MVC 的 Model 驗證所產生的欄位格式搭配 jQuery 來做到此效果，當然這絕對不是唯一的方法，其他像是可以透過自定義的 HtmlHelper 或是自定義的 Atribute 來做到類似的效果，不過繞來繞去還是脫離不瞭 maxlength 這個屬性，也提醒大家有時候很多方法我們未必需要繞很大圈來做到同樣的效果，當初老闆丟出這個問題時我還在思考難道我要用 javascript 來判斷輸入的字元的長度來做嗎 ? 後面查了一下 w3c 才看到這個屬性，當然問題也就順利的交差了。

 

---

 

新手發文，如有錯誤煩請告知，感謝。
如果喜歡我的文章請按推薦，有任何問題歡迎下面留言~~~

 

簽名：

學習這條路很廣，喜歡什麼技術不重要，重要的是你肯花時間去學習