類似的文章園子里已有，請看這里，個(gè)人感覺稍顯復(fù)雜，日前也打算寫一個(gè)簡單的給項(xiàng)目用，一些關(guān)鍵點(diǎn)記錄于此。最終效果如下：
后端使用Asp.net mvc5，前端框架有：jquery.validate、jquery.validate.unobtrusive、requirejs、Bootstrap，都是當(dāng)前最/較新版本。jquery.validate就不用說了，目前比較流行的前端校驗(yàn)組件；jquery.validate.unobtrusive基于jquery.validate，是為了配合Asp.net mvc，微軟自己寫的，NuGet下可查找Microsoft.jQuery.Unobtrusive.Validation安裝，具體怎么用請繼續(xù)往下看。
首先在后臺(tái)我們定義實(shí)體類：
實(shí)體定義
實(shí)體各屬性上面有Attribute形式的校驗(yàn)規(guī)則，當(dāng)用戶提交一個(gè)Model到后端Action時(shí)，MVC框架會(huì)據(jù)此自動(dòng)幫我們完成校驗(yàn)工作，于是后端開發(fā)就很開心。然而在數(shù)據(jù)提交之前，前端也有必要進(jìn)行第一輪的校驗(yàn)，如果使用jquery.validate，那么需要在js或標(biāo)簽里再寫一遍類似的規(guī)則，能不能復(fù)用后端已有的代碼呢？我們以屬性EnterpriseNo為例，在cshtml中寫：
@Html.TextBoxFor(m => m.BasicInfo.EnterpriseNo, new { placeholder = "必填項(xiàng)", @class = "form-control" })
最終生成的html如下：
<input class="form-control" data-val="true" data-val-maxlength="字段 EnterpriseNo 必須是最大長度為“30”的字符串或數(shù)組類型。" data-val-maxlength-max="30" data-val-required="信用代碼/注冊號不能為空" id="BasicInfo_EnterpriseNo" name="BasicInfo.EnterpriseNo" placeholder="必填項(xiàng)" value="" data-original-title="" title="" type="text">
標(biāo)簽里面自動(dòng)加上了很多data-開頭的屬性，data-val表示該控件需要校驗(yàn)，其它data-開頭的就是一系列校驗(yàn)規(guī)則和失敗時(shí)的錯(cuò)誤信息，錯(cuò)誤信息可以自定義，否則框架會(huì)給你生成類如“字段 EnterpriseNo 必須是最大長度為30的字符串或數(shù)組類型?！边@種機(jī)器翻譯語言。當(dāng)然這些屬性jquery.validate是不認(rèn)的，要讓jquery.validate認(rèn)識(shí)，就需要jquery.validate.unobtrusive出馬了。
現(xiàn)在我們來說這些js如何配合使用。
新版本的jquery.validate已經(jīng)支持AMD模式，所以可以直接使用requirejs加載，jquery.validate.unobtrusive
