Knockout-Validation

A validation library for Knockout JS

Github星跟蹤圖

Knockout Validation

A KnockoutJS Plugin for model and property validation

Build Status
Build status
Bower version
npm version
NuGet version

Contributors:

License: MIT

Install

Bower

bower install knockout-validation --save

NuGet

PM> Install-Package Knockout.Validation

NPM

npm install knockout.validation --save

CDN

cdnjs
jsdelivr

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

see more examples on the Fiddle: http://jsfiddle.net/KHFn8/5424/

Native Validation Rules

Required:

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

Email:

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

... and MANY MORE

Much thanks to the jQuery Validation Plug-In team for their work on many of the rules

Custom Validation Rules

Custom Rules

Custom Rules can be created using the simple example below. All you need is to define a validator function and a default message.
The validator function takes in the observable's value, and the params that you pass in with the extend method.

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

Learn more about Custom Rules on the WIKI

Or Check out our User-Contributed Custom Rules!

HTML5 Validation Attributes

Required:

<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" />

Special Note, the 'MinLength' attribute was removed until the HTML5 spec fully supports it

Knockout Bindings

ValidationMessage

If you want to customize the display of your objects validation message, use the validationMessage binding:

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

Check out more on Validation Bindings

Remote Validation Rules

Check out our Async Validation and jQuery AJAX Validation

Localization

Add a reference to the localization js files after the Knockout Validation plugin

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

Apply localized messages

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

主要指標

概覽
名稱與所有者Knockout-Contrib/Knockout-Validation
主編程語言JavaScript
編程語言JavaScript (語言數: 3)
平台
許可證
所有者活动
創建於2011-10-24 21:03:14
推送於2022-07-27 14:27:26
最后一次提交2019-10-08 09:54:43
發布數7
最新版本名稱2.0.4 (發布於 )
第一版名稱v0.9 (發布於 2012-01-30 14:57:29)
用户参与
星數1k
關注者數71
派生數373
提交數429
已啟用問題?
問題數437
打開的問題數113
拉請求數120
打開的拉請求數24
關閉的拉請求數100
项目设置
已啟用Wiki?
已存檔?
是復刻?
已鎖定?
是鏡像?
是私有?