knockout-validation

来源：互联网发布：百度云视频网络不给力编辑：程序博客网时间：2024/06/05 19:15

1、引入<script src="~/Scripts/knockout.validation.js"></script>

2、在Scripts文件夹下创建zh-CN.js，用来汉化。

ko.validation.localize({

required: '必填字段',

min: '输入值必须大于等于 {0}',

max: '输入值必须小于等于 {0}',

minLength: '至少输入 {0} 个字符',

maxLength: '输入的字符数不能超过 {0} 个',

pattern: '请检查此值',

step: '每次步进值是 {0}',

email: 'email地址格式不正确',

date: '日期格式不正确',

dateISO: '日期格式不正确',

number: '请输入一个数字',

digit: '请输入一个数字',

phoneUS: '请输入一个合法的手机号(US)',

equal: '输入值不一样',

notEqual: '请选择另一个值',

unique: '此值应该是唯一的'

});

3、Knockout.Validation的基本验证

正则验证：

self.MobileNumber = ko.observable().extend({ pattern: { params: /^(?:04\d{2}|\({1}04\d{2}\){1})\s{0,1}(\d{3}(\s{0,1})\d{3})$/, message: "Invalid mobile number."} });

□ 必填

ViewBag.Title = "Index";

Layout = "~/Views/Shared/_Layout.cshtml";

}

.validationMessage {

color: red;

}

</style>

@section scripts

{

//使用构造函数创建一个View Model

var User = function() {

this.name = ko.observable("darren").extend({required:true});

};

ko.applyBindings(new User());

</script>

}

□ 最小值

this.name = ko.observable("darren").extend({ min: 2 });

□ 最大值

this.name = ko.observable("darren").extend({ max: 99 });

□ 最小长度

this.name = ko.observable("darren").extend({ minLength: 3 });

□ 最大长度

this.name = ko.observable("darren").extend({ maxLength: 12 });

□ 邮件

this.name = ko.observable("darren").extend({ email: true });

□ 正则表达式

this.name = ko.observable("darren").extend({ pattern: '^[a-z0-9].$' });

□ 相等

var otherObj = ko.observable();
var myObj = ko.observable().extend({ equal: otherObj });

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

□ 不等

var otherObj = ko.observable();
var myObj = ko.observable().extend({ notEqual: otherObj });

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

□ 日期

this.name = ko.observable("").extend({ date: true });

□ 数字，包括小数点

this.name = ko.observable("").extend({ number: true });

□ 整型

this.name = ko.observable("").extend({ digit: true });

□ 同时多个验证规则

            this.name = ko.observable().extend({
                required: true,
                maxLength: 3
            });

4、自定义验证规则

@ ：ko.validation有一个rules属性，专门用来存放验证规则，它是一个键值对集合类型，key就是自定义验证规则的名称，value是一个json对象。

例：

//自定义验证规则

ko.validation.rules["myCustomValidation"] = {

validator: function(val, otherVal) {

return val == otherVal;

message: '输入值必须和{0}相等'

};

//注册自定义规则

ko.validation.registerExtenders();

//使用构造函数创建一个View Model

var User = function() {

this.name = ko.observable().extend({

myCustomValidation: 3

});

};

//创建实例

var user =new User();

//绑定

ko.applyBindings(user);

$(function() {

});

</script>

@ ：把自定义规则以匿名函数的形式放在extend方法之内，还可以同时注册多个自定义验证规则。

例：

//使用构造函数创建一个View Model

var User = function () {

this.name = ko.observable().extend({

validation: [{

validator: function (val, someOtherVal) {

return val == someOtherVal;

message: '必须是 5',

params: 5

}]

});

};

//创建实例

var user =new User();

//绑定

ko.applyBindings(user);

$(function () {

});

</script>

Ajax的验证：

Model.oldPassword.extend({validation: {

async: true,

validator: function (val, params, callback) {

var options = {

url:‘’,

type: 'GET',

success: callback}

};

$.ajax(options);

message: '原密码输入错误，请重新输入！'

}

手机号码验证：

self.Phone = ko.observable('').extend({            validation: {                validator: function (val, someOtherVal) {                    var telReg = !!val.match(/^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/);                    if (val == "") {//如果为空，直接通过                        return true;                    }                        //如果手机号码不能通过验证                    else if (telReg == false) {                        return false;                    }                    else {                        return true;                    }                },                message: '请输入正确格式的号码',                params: 11            },            required: false        })

参考资料：
https://github.com/Knockout-Contrib/Knockout-Validation/wiki

阅读全文

0 0