文档章节

Knockout.Validation

吃兔纸不吐毛
 吃兔纸不吐毛
发布于 2016/12/09 16:08
字数 476
阅读 6
收藏 0
点赞 0
评论 0

这个框架比较冷门,百度上相关的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>

 

© 著作权归作者所有

共有 人打赏支持
吃兔纸不吐毛
粉丝 1
博文 54
码字总数 28636
作品 0
杭州
MVVM架构~knockoutjs系列之验证成功提示显示

对于knockout.validation来说,我们已经知道了如何去验证大部分表单元素,而有时,我们的需求希望在每个元素验证成功后,去显示正确的提示,这个我们很容易的使用self.元素.isValid()方法来实...

mcy247 ⋅ 2017/12/06 ⋅ 0

TypeScript 类型定义--DefinitelyTyped

DefinitelyTyped 包含大量的高质量的 TypeScript 类型定义。 包括: Ace Cloud9 Editor (by Diullei Gomes) AmCharts (by Covobonomo) AngularJS (by Diego Vilar) (wiki) Arbiter (by Aras......

红薯 ⋅ 2013/07/18 ⋅ 1

没有更多内容

加载失败,请刷新页面

加载更多
uWSGI + Django @ Ubuntu

创建 Django App Project 创建后, 可以看到路径下有一个wsgi.py的问题 uWSGI运行 直接命令行运行 利用如下命令, 可直接访问 uwsgi --http :8080 --wsgi-file dj/wsgi.py 配置文件 & 运行 [u...

袁祾 ⋅ 32分钟前 ⋅ 0

JVM堆的理解

在JVM中,我们经常提到的就是堆了,堆确实很重要,其实,除了堆之外,还有几个重要的模块,看下图: 大 多数情况下,我们并不需要关心JVM的底层,但是如果了解它的话,对于我们系统调优是非常...

不羁之后 ⋅ 昨天 ⋅ 0

推荐:并发情况下:Java HashMap 形成死循环的原因

在淘宝内网里看到同事发了贴说了一个CPU被100%的线上故障,并且这个事发生了很多次,原因是在Java语言在并发情况下使用HashMap造成Race Condition,从而导致死循环。这个事情我4、5年前也经历...

码代码的小司机 ⋅ 昨天 ⋅ 1

聊聊spring cloud gateway的RetryGatewayFilter

序 本文主要研究一下spring cloud gateway的RetryGatewayFilter GatewayAutoConfiguration spring-cloud-gateway-core-2.0.0.RC2-sources.jar!/org/springframework/cloud/gateway/config/G......

go4it ⋅ 昨天 ⋅ 0

创建新用户和授予MySQL中的权限教程

导读 MySQL是一个开源数据库管理软件,可帮助用户存储,组织和以后检索数据。 它有多种选项来授予特定用户在表和数据库中的细微的权限 - 本教程将简要介绍一些选项。 如何创建新用户 在MySQL...

问题终结者 ⋅ 昨天 ⋅ 0

android -------- 颜色的半透明效果配置

最近有朋友问我 Android 背景颜色的半透明效果配置,我网上看资料,总结了一下, 开发中也是常常遇到的,所以来写篇博客 常用的颜色值格式有: RGB ARGB RRGGBB AARRGGBB 这4种 透明度 透明度...

切切歆语 ⋅ 昨天 ⋅ 0

CentOS开机启动subversion

建立自启动脚本: vim /etc/init.d/subversion 输入如下内容: #!/bin/bash## subversion startup script for the server## chkconfig: 2345 90 10# description: start the subve......

随风而飘 ⋅ 昨天 ⋅ 0

版本控制工具

CSV , SVN , GIT ,VSS

颖伙虫 ⋅ 昨天 ⋅ 0

【2018.06.19学习笔记】【linux高级知识 13.1-13.3】

13.1 设置更改root密码 13.2 连接mysql 13.3 mysql常用命令

lgsxp ⋅ 昨天 ⋅ 0

LVM

LVM: 硬盘划分分区成物理卷->物理卷组成卷组->卷组划分逻辑分区。 1.磁盘分区: fdisk /dev/sdb 划分几个主分区 输入t更改每个分区类型为8e(LVM) 使用partprobe生成分区的文件:如/dev/sd...

ZHENG-JY ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部