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

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

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

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

源码下载

Knockout.js Validations

第 1 段（可获 1.23 积分）

CY24周前

创建 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 函数进行绑定。

第 2 段（可获 1.09 积分）

CY24周前

$(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>

第 3 段（可获 0.08 积分）

CY24周前

如果打开此页面就能看到视图上已经显示了我们之前在视图模型中定义的数据（你还记得使用 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"));
});

第 4 段（可获 1.16 积分）

CY24周前

这个代码 .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>

第 5 段（可获 0.73 积分）

CY24周前

每个可观测值有其独立的 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"));
});

第 6 段（可获 1.06 积分）

CY24周前

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

<!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>

第 7 段（可获 0.33 积分）

CY24周前

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

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

参考资料

另请参阅

Articles related to Knockout.js