Knockout.js 数据验证之插件版和无插件版

时间：2017-06-08 01:34:26 阅读：340 评论：0 收藏：0 [点我收藏+]

标签：mini iter err head 属性 mode ima ide idt

本文我们将介绍使用 Knockout.js 实现一些基本的数据验证。就如我们在标题里提到的，我们会使用两种方法来创建数据验证方法。

使用自定义方法，不需要任何插件
最简单的方法是使用已有的插件

如果你刚刚接触 Knockout.js，强烈建议你阅读我之前的文章，那篇文章中我分享了一些关于 Knockout.js 的基本知识。本文我们使用 Visual Studio 进行开发，希望你能喜欢。现在开始。

源码下载

Knockout.js Validations

创建 HTML 页面

要使用 Knockout.js 首先需要一个页面。在此之前请先从 NuGet 上安装 Knockout.js 和 jQuery 。

技术分享

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
</head>
<body>
</body>
</html>

现在创建一个 JavaScript 文件，并在页面中引入：

 <script src="Validations-Without-Plugin.js"></script>

Knockout.js 数据验证之无插件版本

打开你的 JS 文件 (Validations-Without-Plugin.js)，这是我们编写脚本的地方。首先，创建视图模型，并使用 tje applyBindings 函数进行绑定。

$(function () {
    function myViewModel(firstName, lastName, email) {
        this.txtFirstName = ko.observable(firstName);
        this.txtLastName = ko.observable(lastName);
        this.txtEmail = ko.observable(email);
    };
    ko.applyBindings(new myViewModel("Sibeesh", "Venu", "sibikv4u@gmail.com"));
});

接下来创建视图：

<!DOCTYPE html>
<html>
<head>
    <title>KnockOut JS Validations</title>
    <meta charset="utf-8" />
    <script src="Scripts/jquery-3.1.1.min.js"></script>
    <script src="Scripts/knockout-3.4.1.js"></script>
    <script src="Scripts/Validations-Without-Plugin.js"></script>

</head>
<body>
    <table>
        <caption>Knockout JS Validation</caption>
        <tr>
            <td>
                First Name: <input type="text" id="txtFirstName" name="txtFirstName" data-bind=‘value: txtFirstName‘ />
            </td>
        </tr>
        <tr>
            <td>
                Last Name: <input type="text" id="txtLastName" name="txtLastName" data-bind=‘value: txtLastName‘ />
            </td>
        </tr>
        <tr>
            <td>
                Email: <input type="text" id="txtEmail" name="txtEmail" data-bind=‘value: txtEmail‘ />
            </td>
        </tr>
        <tr>
            <td>
                <input type="button" value="Submit" />
            </td>
        </tr>
    </table>
</body>
</html>

如果打开此页面就能看到视图上已经显示了我们之前在视图模型中定义的数据（你还记得使用 observable() 吗?)

技术分享

到目前为止一切都很好。接下来需要更新视图模型并创建一些填充剂。

Knockout.js extenders (填充剂) 是最简单的用来给观察值提供额外功能的方式。可以是任何东西，在这里我们为观察值或者是控制器创建一些验证器。

我们可以创建一个填充剂并使用如下代码来更新视图：

$(function () {
    ko.extenders.isRequired = function (elm, customMessage) {

        //add some sub-observables to our observable
        elm.hasError = ko.observable();
        elm.message = ko.observable();

        //This is the function to validate the value entered in the text boxes

        function validateValueEntered(valEntered) {
            elm.hasError(valEntered ? false : true);
            //If the custom message is not given, the default one is taken
            elm.message(valEntered ? "" : customMessage || "I am required ?? ");
        }

        //Call the validation function for the initial validation
        validateValueEntered(elm());

        //Validate the value whenever there is a change in value
        elm.subscribe(validateValueEntered);

        return elm;
    };

    ko.extenders.isEmail = function (elm, customMessage) {

        //add some sub-observables to our observable
        elm.hasError = ko.observable();
        elm.message = ko.observable();

        //This is the function to validate the value entered in the text boxes

        function validateEmail(valEntered) {
            var emailPattern = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
            //If the value entered is a valid mail id, return fals or return true
            elm.hasError((emailPattern.test(valEntered) === false) ? true : false);
            //If not a valid mail id, return custom message
            elm.message((emailPattern.test(valEntered) === true) ? "" : customMessage);
        }

        //Call the validation function for the initial validation
        validateEmail(elm());

        //Validate the value whenever there is a change in value
        elm.subscribe(validateEmail);

        return elm;
    };

    function myViewModel(firstName, lastName, email) {
        this.txtFirstName = ko.observable(firstName).extend({ isRequired: "You missed First Name" });
        this.txtLastName = ko.observable(lastName).extend({ isRequired: "" });
        this.txtEmail = ko.observable(email).extend({ isEmail: "Not a valid mail id" });
    };
    ko.applyBindings(new myViewModel("Sibeesh", "Venu", "sibikv4u@gmail.com"));
});

这个代码 .extend({ isRequired: “You missed First Name” }); 用来调用我们刚创建的填充剂。第一个参数是我们创建的填充剂的名称，第二个参数是一个自定义消息。我在注释里对代码进行了解释，如果你有任何问题或者疑问可以直接在评论里发表。现在是更新视图的时候了。

<!DOCTYPE html>
<html>
<head>
    <title>KnockOut JS Validations</title>
    <meta charset="utf-8" />
    <script src="Scripts/jquery-3.1.1.min.js"></script>
    <script src="Scripts/knockout-3.4.1.js"></script>
    <script src="Scripts/Validations-Without-Plugin.js"></script>
    <style>
        .error {
            color: #D8000C;
            background-color: #FFBABA;
            font-family: cursive;
        }
        table {
            border: 1px solid #c71585;
            padding: 20px;
        }
        td {
            border: 1px solid #ccc;
            padding: 20px;
        }
    </style>
</head>
<body>
    <table>
        <caption>Knockout JS Validation</caption>
        <tr>
            <td>
                First Name: <input type="text" id="txtFirstName" name="txtFirstName" data-bind=‘value: txtFirstName, valueUpdate: "afterkeydown"‘ />
                <span class="error" data-bind=‘visible: txtFirstName.hasError, text: txtFirstName.message‘></span>
            </td>
        </tr>
        <tr>
            <td>
                Last Name: <input type="text" id="txtLastName" name="txtLastName" data-bind=‘value: txtLastName, valueUpdate: "afterkeydown"‘ />
                <span class="error" data-bind=‘visible: txtLastName.hasError, text: txtLastName.message‘></span>
            </td>
        </tr>
        <tr>
            <td>
                Email: <input type="text" id="txtEmail" name="txtEmail" data-bind=‘value: txtEmail, valueUpdate: "afterkeydown"‘ />
                <span class="error" data-bind=‘visible: txtEmail.hasError, text: txtEmail.message‘></span>
            </td>
        </tr>
        <tr>
            <td>
                <input type="button" value="Submit" />
            </td>
        </tr>
    </table>
</body>
</html>

每个可观测值有其独立的 hasError 和消息属性。你是否注意到了我们在每个控件的 data-bind 事件中用了 valueUpdate: “afterkeydown” ？这是用于初始的数据验证。接下来我们运行程序并查看结果是否正确。

技术分享

使用插件实现 Knockout.js 验证

因为要用到插件，我们必须先从 NuGet 上安装这些插件。你可以从这里获得所需插件。

技术分享

现在创建视图模型

$(function () {
    function myViewModel(firstName, lastName, email) {
        this.txtFirstName = ko.observable(firstName).extend({ required: true });
        this.txtLastName = ko.observable(lastName).extend({ required: false });
        this.txtEmail = ko.observable(email).extend({ email: true });
    };
    ko.applyBindings(new myViewModel("Sibeesh", "Venu", "sibikv4u@gmail.com"));
});

你可以看到，有其他我们创建的文件相比较，这里只有简单数行代码。现在创建视图：

<!DOCTYPE html>
<html>
<head>
    <title>KnockOut JS Validations</title>
    <meta charset="utf-8" />
    <script src="Scripts/jquery-3.1.1.min.js"></script>
    <script src="Scripts/knockout-3.4.1.js"></script>
    <script src="Scripts/knockout.validation.js"></script>
    <script src="Scripts/Validations-Plugin.js"></script>
    <style>
        table {
            border: 1px solid #c71585;
            padding: 20px;
        }
        td {
            border: 1px solid #ccc;
            padding: 20px;
        }
    </style>
</head>
<body>
    <table>
        <caption>Knockout JS Validation</caption>
        <tr>
            <td>
                First Name: <input type="text" id="txtFirstName" name="txtFirstName" data-bind=‘value: txtFirstName‘ />
            </td>
        </tr>
        <tr>
            <td>
                Last Name: <input type="text" id="txtLastName" name="txtLastName" data-bind=‘value: txtLastName‘ />
            </td>
        </tr>
        <tr>
            <td>
                Email: <input type="text" id="txtEmail" name="txtEmail" data-bind=‘value: txtEmail‘ />
            </td>
        </tr>
        <tr>
            <td>
                <input type="button" value="Submit" />
            </td>
        </tr>
    </table>
</body>
</html>

别忘了在页面中引入 knockout.validation.js 脚本文件。如果一切准备就绪，就可以运行程序并查看输出结果。

技术分享

今天就讲这么多。你可以下载本文源码。

参考资料

另请参阅

Articles related to Knockout.js

Knockout.js 数据验证之插件版和无插件版

标签：mini iter err head 属性 mode ima ide idt

原文地址：http://www.cnblogs.com/amylis_chen/p/6959652.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行