中文字幕精品亚洲无线码二区,国产黄a三级三级三级看三级,亚洲七七久久桃花影院,丰满少妇被猛烈进入,国产小视频在线观看网站

MVVM架構~knockoutjs系列之(zhi)驗證信息(xi)自定義(yi)輸(shu)出

返回目錄

這個文章非(fei)常重要(yao),也是非(fei)常必(bi)要(yao)的,在我們(men)進行項目(mu)開(kai)發時,后臺(tai)(tai)無所(suo)謂,對(dui)樣式無要(yao)求,而網(wang)站前(qian)臺(tai)(tai)來說,對(dui)樣式要(yao)求嚴格,你的驗證信息都是前(qian)臺(tai)(tai)設計好的,所(suo)以,不能使用knockoutjs自帶的了,我們(men)需要(yao)將驗證的消(xiao)息輸(shu)出到指(zhi)定的元素上(shang)!

在(zai)寫(xie)這(zhe)個文章之前(qian),我(wo)一直(zhi)沒有(you)(you)找到(dao)好的(de)(de)辦(ban)法來實現這(zhe)種(zhong)功能(neng),但(dan)我(wo)沒有(you)(you)放棄,終于今(jin)天找到(dao)了比較(jiao)不錯的(de)(de)解決方案,對于一個元(yuan)素(su)的(de)(de)驗證我(wo)們可以使用(yong)isValid()方法,而(er)對于它(ta)(ta)的(de)(de)錯誤消息的(de)(de)顯示,我(wo)們可以使用(yong)error()方法,注意是error()不是errors(),從這(zhe)一點上我(wo)們可以看到(dao),它(ta)(ta)是針對某點元(yuan)素(su)來說的(de)(de),因為它(ta)(ta)是單數(shu),呵呵.

功能實現

Html代碼

<div class="fcs-item clearfix">
    <p class="thd"><span class="rstar">*</span>&nbsp;班級圈名稱：</p>
    <p class="t-name">
        <input class="cname" style="width: 356px;" type="text" name="Title" data-bind="value:title" />
    </p>
    <p class="item-warn" data-bind="visible:!title.isValid(),text:title.error()"></p>
    <p class="item-warn item-r" data-bind="visible:title.isValid()">&nbsp;</p>
</div>

<div class="fcs-item clearfix">
    <p class="thd"><span class="rstar">*</span>&nbsp;班級圈價格：</p>
    <p class="t-name">
        <input class="cname" style="width: 356px;" type="text" name="price" data-bind="value:price" />
    </p>
    <p class="item-warn" data-bind="visible:!price.isValid(),text:price.error()"></p>
    <p class="item-warn item-r" data-bind="visible:price.isValid()">&nbsp;</p>
</div>

JS代碼

 var model = function () {

        $(".validationMessage").hide();//關閉自動輸出功能
        var self = this;
     
        self.id = ko.observable('@Model.TeacherInfoExtID');

        self.title = ko.observable('@Model.Title').extend({
            
            required: { params: true, message: "請輸入班級(ji)圈名稱" },
            minLength: { params: 1, message: "班級圈名稱(cheng)最少為1個字" },
            maxLength: { params: 20, message: "班級圈名(ming)稱最多為20個字" }
        });

        self.price = ko.observable('@Model.TeacherPrice.Price').extend({
            required: { params: true, message: "請輸入班級圈價格(ge)" },
            min: { params: 300, message: "班級圈(quan)價格(ge)最小(xiao)為300" },
            max: { params: 500, message: "班級圈價格最大為500" }
        });
};
  var M = new model();
   ko.applyBindings(M);

網頁載圖

返回目錄

posted @ 2014-04-11 17:59  張占嶺  閱讀(1391)  評論(0)    收藏  舉報