@4lolo/knockout.validation 中文文档教程

Question

Knockout Validation

用于模型和属性验证的 KnockoutJS 插件

贡献者：

• Eric Barnard
• Steve Greatrex
• Cristian Trifan
• Andy Booth
• Michal Poreba
• and many others!

许可证：MIT

Install

Bower

bower install knockout-validation --save

NuGet

PM> Install-Package Knockout.Validation

NPM

npm install knockout.validation --save

CDN

cdnjs

• https://cdnjs.cloudflare.com/ajax/libs/knockout-validation/2.0.4/knockout.validation.js
• https://cdnjs.cloudflare.com/ajax/libs/knockout-validation/2.0.4/knockout.validation.min.js

jsdelivr

• https://cdn.jsdelivr.net/npm/knockout.validation@2.0.4/dist/knockout.validation.js
• https://cdn.jsdelivr.net/npm/knockout.validation@2.0.4/dist/knockout.validation.min.js

Getting Started

//start using it!
var myValue = ko.observable().extend({ required: true });

//oooh complexity
var myComplexValue = ko.observable().extend({
                     required: true,
                     minLength: 3,
                     pattern: {
                          message: 'Hey this doesnt match my pattern',
                          params: '^[A-Z0-9].$'
                     }
                 });

//or chaining if you like that
var myComplexValue = ko.observable()

myComplexValue.extend({ required: true })
            .extend({ minLength: 3 })
            .extend({ pattern: {
                 message: 'Hey this doesnt match my pattern',
                 params: '^[A-Z0-9].$'
            }});

//want to know if all of your ViewModel's properties are valid?
var myViewModel = ko.validatedObservable({
   property1: ko.observable().extend({ required: true }),
   property2: ko.observable().extend({ max: 10 })
});

console.log(myViewModel.isValid()); //false

myViewModel().property1('something');
myViewModel().property2(9);

console.log(myViewModel.isValid()); //true

在 Fiddle 上查看更多示例：http:// jsfiddle.net/KHFn8/5424/

Native Validation Rules

必需：

var myObj = ko.observable('').extend({ required: true });

Min：

var myObj = ko.observable('').extend({ min: 2 });

Max：

var myObj = ko.observable('').extend({ max: 99 });

MinLength：

var myObj = ko.observable('').extend({ minLength: 3 });

MaxLength：

var myObj = ko.observable('').extend({ maxLength: 12 });

电子邮件：

var myObj = ko.observable('').extend({ email: true });

......和更多

非常感谢 jQuery Validation Plug-In 团队在许多规则上所做的工作

Custom Validation Rules

Custom Rules

自定义规则可以使用下面的简单示例创建。 您所需要的只是定义一个验证器函数和一条默认消息。 验证器函数接受可观察对象的值，以及您通过 extend 方法传入的 params。

ko.validation.rules['mustEqual'] = {
    validator: function (val, params) {
        return val === params;
    },
    message: 'The field must equal {0}'
};
ko.validation.registerExtenders();

//the value '5' is the second arg ('params') that is passed to the validator
var myCustomObj = ko.observable().extend({ mustEqual: 5 });

在 WIKI 上了解有关自定义规则的更多信息

或者查看我们的 < a href="https://github.com/Knockout-Contrib/Knockout-Validation/wiki/User-Contributed-Rules">用户贡献的自定义规则!

HTML5 Validation Attributes

必需:

<input type="text" data-bind="value: myProp" required />

Min:

<input type="number" data-bind="value: myProp" min="2" />
<input type="week" data-bind="value:myWeek" min="2012-W03" />
<input type="month" data-bind="value:myMonth" min="2012-08" />

Max:

<input type="number" data-bind="value: myProp" max="99" />
<input type="week" data-bind="value:myWeek" max="2010-W15" />
<input type="month" data-bind="value:myMonth" min="2012-08" />

Pattern:

<input type="text" data-bind="value: myProp" pattern="^[a-z0-9].*" />

Step:

<input type="text" data-bind="value: myProp" step="3" />

特别注意，'MinLength'属性是在 HTML5 规范完全支持之前删除

Knockout Bindings

ValidationMessage

如果您想自定义对象验证消息的显示，请使用 validationMessage 绑定：

<div>
   <input type="text" data-bind="value: someValue"/>
   <p data-bind="validationMessage: someValue"></p>
<div>

查看更多信息 验证绑定

Remote Validation Rules

查看我们的异步验证 和 jQuery AJAX V alidation

Localization

在 Knockout Validation 插件

<script type="text/javascript" src="knockout.validation.js"></script>
<script type="text/javascript" src="el-GR.js"></script>
<script type="text/javascript" src="fr-FR.js"></script>
<script type="text/javascript" src="de-DE.js"></script>

应用本地化消息后添加对本地化 js 文件的引用

ko.validation.locale('el-GR');