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

哈妹 lv.1

发布时间：2022-10-01 15:42:16 323

新浪截图

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

说明：表单元素为焦点时，自动提示要输入的信息，当元素失去焦点时，提示用户输出的正确性，这个功能使用了hasfocus属性，下面看一下代码

ＨＴＭＬ代码

账号：

请输入用户名账号，它由字母汉字数字组成．

Email：

请输入你的Email．

手机：

请输入你的电话．

ＪＳ代码

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

页面截图

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

返回目录

作者：仓储大叔，张占岭，
荣誉：微软MVP

文章来源： https://blog.51cto.com/u_15765017/5620928

特别声明：以上内容（图片及文字）均为互联网收集或者用户上传发布，本站仅提供信息存储服务！如有侵权或有涉及法律问题请联系我们。