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

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

返回目錄

對于(yu)一個(ge)項目的表單(dan)驗證，方式(shi)有(you)很(hen)多，效果也有(you)很(hen)多，具(ju)體使(shi)用哪種完成(cheng)取(qu)決于(yu)產(chan)品(pin)這邊，產(chan)品(pin)讓你(ni)用什(shen)(shen)么，你(ni)就要用什(shen)(shen)么，而做為(wei)開發(fa)人員，我們要做的就是＂整理(li)近可能(neng)多的架構方式(shi)＂，這樣才可以(yi)自由的應(ying)變(bian)．

對于表(biao)單驗證，我今天看了新浪(lang)的郵(you)箱注冊，覺得(de)效果還可以(yi)，所以(yi)，就寫了一個，它利用了knockoutjs里的hasfocus屬性，對文本框進(jin)行焦點捕捉來實現的．

新浪截圖

 

說明(ming)：表(biao)單元素為焦點時，自動提(ti)示要輸(shu)入的(de)信息(xi)，當元素失去(qu)焦點時，提(ti)示用戶(hu)輸(shu)出的(de)正確性(xing)，這個(ge)功能使(shi)用了hasfocus屬(shu)性(xing)，下面看一下代碼

ＨＴＭＬ代碼

<div class="editor-label">
        賬號(hao)：
    </div>
    <div class="editor-field">
        <input data-bind='value: name,validationElement:name,hasfocus:selName' />
        <span class="validationWarn" data-bind="visible:selName">請輸入用戶名賬號，它由字母漢字數字組成．</span>
        <span data-bind="visible:!selName()"><span class="validationError" data-bind="validationMessage:name"></span></span>
        <span data-bind="visible:!selName()"><span class="validationSuccess" data-bind="visible:name.isValid()"></span></span>
    </div>
    <div class="editor-label">
        Email：
    </div>
    <div class="editor-field">
        <input data-bind='value: Email,hasfocus:selEmail' />
        <span data-bind="visible:!selEmail()"><span class="validationError" data-bind="validationMessage:Email"></span></span>
        <span class="validationWarn" data-bind="visible:selEmail">請輸入你的Email．</span>
        <span data-bind="visible:!selEmail()"><span class="validationSuccess" data-bind="visible:Email.isValid()"></span></span>
    </div>
    <div class="editor-label">
        手機：
    </div>
    <div class="editor-field">
        <input data-bind='value: phone,hasfocus:selPhone' />
        <span data-bind="visible:!selPhone()"><span class="validationError" data-bind="validationMessage:phone"></span></span>
        <span class="validationWarn" data-bind="visible:selPhone">請輸入你的電話．</span>
        <span data-bind="visible:!selPhone()"><span class="validationSuccess" data-bind="visible:phone.isValid()"></span></span>
    </div>
    <div style="clear: both;"></div>
    <p>
        <input type="button" value="Create" data-bind="click:Register" />
    </p>

ＪＳ代碼

　　　　 var Product = function () {
            var self = this;

            ko.validation.configure({//ko.validation相關(guan)配置
                insertMessages: false,//不自動插入錯誤消(xiao)息
                errorElementClass: 'errorElementClass',/*元素(su)的ＣＳＳ樣(yang)式(shi)*/
                errorMessageClass: 'errorMessageClass',/*提(ti)示信(xin)息ＣＳＳ的樣式*/
            });

            self.name = ko.observable().extend({
                minLength: 2,
                maxLength: { params: 30, message: "名稱最大長度為30個字符" },
                required: {
                    params: true,
                    message: "請輸入名稱",
                }
            });
            self.selName = ko.observable(false);

            self.phone = ko.observable().extend({
                required: true,
                number: {
                    params: true,
                    message: "電話不合法",
                }
            });
            self.selPhone = ko.observable(false);

            self.Email = ko.observable().extend({
                required: {
                    params: true,
                    message: "請填寫Email"
                },
                email: {
                    params: true,
                    message: "Email格式不正確"
                }
            });
            self.selEmail = ko.observable(false);

            self.Register = function () {
                self.errors = ko.validation.group(self);
                if (self.isValid()) {
                    alert("驗證成功，數據可以提交");
                } else {

                    self.errors.showAllMessages();
                }
            };
        };
        product = new Product();
        ko.applyBindings(product);

頁面截圖

返回目錄

 

posted @ 2014-04-21 13:34  張占嶺  閱讀(1990)  評論(0)    收藏  舉報