雙重保險——前端bootstrapValidator驗證+後臺MVC模型驗證

又見阿郎發表於2018-07-04
前端bootMVC模型

我們在前端使用BoostrapValidator外掛驗證最基本的格式要求問題，同時在後臺中，使用MVC特有的模型驗證來做雙重保險。對於boostrapValidator我就不說了，具體請看《bootstrap登入註冊時表單驗證實現》。而對於後端的模型驗證這就是MVC的知識了，我也是好久以前研究過，現在都忘得差不多了，臨時撿起來了，在這裡我就詳細說說。首先是我們的前端Razor頁面也就是我們的cshtml頁面需要引入實體類，假設實體類是UserModel類，它記錄了最基本的使用者名稱，密碼，郵箱等。在前端的cshtml頁面中我們引用這個類，然後就是正常的html結合bootstrap樣式的前端程式碼編寫，但是在這裡建議使用UserModel類中的欄位來命令標籤的id和name屬性，如果亂取名，MVC框架怎麼來識別是哪個類？因此在這裡建議id和name值都取作UserModel類的欄位值。而後在標記了[HttpPost]的Action方法中，將UserModel用作引數傳遞進來，你就會發現前端的值已經繫結在了相應的欄位上了。那麼怎麼來做後端驗證呢？這就需要用到註解屬性了。我們在UserModel類上根據我們的需要標註[Required][RegularExpression()]等註解屬性。然後在action方法中使用：

ModelState.IsValid

來做判斷，如果不滿足要求，MVC框架的模型繫結會給我們將上面的值設定為false。接下來就是我們自己的判斷了。
但是在這裡要注意，前端的boostrapValidator外掛不能和表單的submit()事件同時使用，舉個例子：

$(function(){ 
$(form).boostrapValidator(....);

$(form).submit(); //這兩個不能同時使用，要不然不會提交表單到後臺.
})

bootstrapValidator外掛與form.submit()事件衝突，不知道為什麼就是驗證完之後就是不能提交表單，最好還是使用ajax提交吧。

同時在前端應該判斷好bootstrapValidator是否驗證通過再去提交表單。也就是說先判斷bootstrapValidator.IsValid()，再去提交表單。

最好銷燬bootstrapvalidator外掛並重新載入驗證的程式碼：

$("form").data("bootstrapValidator").destory();

$("form").data("bootstrapValidator", null);

參考：http://www.cnblogs.com/RegicideGod/archive/2013/02/04/2892451.html

相關文章