Knockout.Validation

最新推荐文章于 2024-03-15 09:30:55 发布

转载最新推荐文章于 2024-03-15 09:30:55 发布 · 120 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/NamiZone/blog/803159

文章标签：

#javascript #python #ViewUI

2019独角兽企业重金招聘Python工程师标准>>>

这个框架比较冷门，百度上相关的API比较少，找了好多天，写了一个简单的Demo，首先列出验证常用的方法：

以下方法来源：http://www.cnblogs.com/lori/p/3593807.html?utm_source=tuicool&utm_medium=referral

为空验证：

self.CategoryId = ko.observable().extend({
            required: true
});

最大最小值验证：

self.price = ko.observable().extend({
            required: { params: true, message: "请输入价格" },
            min: { params: 1, message: "请输入大于1的整数" },
            max: 100
});

长度验证：

self.name = ko.observable().extend({
            minLength: 2,
            maxLength: { params: 30, message: "名称最大长度为30个字符" },
            required: {
                params: true,
                message: "请输入名称",
            }
});

电话验证：

self.phone = ko.observable().extend({
            phoneUS: {
                params: true,
                message: "电话不合法",
            }
});

邮箱验证：

self.Email = ko.observable().extend({
            required: {
                params: true,
                message: "请填写Email"
            },
            email: {
                params: true,
                message: "Email格式不正确"
            }
});

数字验证：

self.age = ko.observable().extend({
            number: {
                params: true,
                message: "必须是数字",
            }
});

相等验证：

self.PayPassword = ko.observable().extend({
            required: {
                params: true,
                message: "请填写支付密码"
            },
            equal:{
                params:"zzl",
                message:"支付密码错误"
            }
});

然后是我自己写的一个简易Demo：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>吃兔纸不吐毛</title>
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="knockout-3.3.0.js"></script>
<script type="text/javascript" src="knockout.validation.min.js" ></script>
<style type="text/css">
b {color: red;}
</style>
</head>

<body>
<table>
	<tr>
		<td>账号：</td>
		<td><input type="text" data-bind="value:username, validationElement: username" /></td>
		<td><b data-bind="validationMessage: username"></b></td>
	</tr>
	<tr>
		<td>密码：</td>
		<td><input type="text" data-bind="value:password, validationElement: password" /></td>
		<td><b data-bind="validationMessage: password"></b></td>
	</tr>
	<tr>
		<td><button data-bind="click:submitClick" >提交</button></td>
		<td><b id="result" style="display:none">提交成功</b></td>
		<td></td>
	</tr>
</table>

<script type="text/javascript">
    ko.validation.init({
        decorateElement: false,
        registerExtenders: true,
        messagesOnModified: true,
        insertMessages: false,
        parseInputAttributes: true,
        messageTemplate: null,
        errorClass : 'error'
    });
 
    var viewModel = {
        username: ko.observable().extend({ 
			//required为空验证
			required: { params: true, message: '请输入账号' }, 
			minLength: { params: 6, message: "账号名称太短" }
		}),
		//这里贴了两种写法，这里的验证不定义message都会显示默认信息
        password: ko.observable().extend({ required: { message: '请输入密码' } }).extend({ minLength: 7, maxLength: 10 }),
        submitClick: function () {
            if (viewModel.errors().length == 0) {
                //通过验证
                $("#result").css("display", "block");
                return true;
            } else {
                viewModel.errors.showAllMessages();
                return false;
            }
        }
    };
 
    viewModel.errors = ko.validation.group(viewModel);

    ko.applyBindings(viewModel);
</script>
</body>
</html>

转载于:https://my.oschina.net/NamiZone/blog/803159