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