MVVM架构~knockoutjs系列之验证信息自定义输出~再续

<div class="editor-label">
        账号：
    </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相关配置
                insertMessages: false,//不自动插入错误消息
                errorElementClass: 'errorElementClass',/*元素的ＣＳＳ样式*/
                errorMessageClass: 'errorMessageClass',/*提示信息ＣＳＳ的样式*/
            });

            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);