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

Posted 2020-09-21 星火卓越

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Knockout.js 数据验证之插件版和无插件版相关的知识，希望对你有一定的参考价值。

本文我们将介绍使用 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", "[email protected]"));
});

接下来创建视图：

<!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 = /^(([^<>()\[\]\\.,;:\[email protected]"]+(\.[^<>()\[\]\\.,;:\[email protected]"]+)*)|(".+"))@((\[[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", "[email protected]"));
});

这个代码 .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", "[email protected]"));
});

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

<!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 数据验证之插件版和无插件版的主要内容，如果未能解决你的问题，请参考以下文章

带有 require.js 的 Knockout.js 映射插件

KnockOut.js 验证始终为真/errors.length = 0

如何有条件地绑定到 knockout.js 中的“valueUpdate”？

devexpress的注册版和破解版有什么quiet

Elasticsearch之中文分词器插件es-ik的热更新词库

清除敲除验证错误