之前整理了三篇帖子:

Knockout: 使用CSS绑定和event的blur失去焦点事件, 给未通过校验的输入框添加红色边框突出显示. http://www.cnblogs.com/liuzhendong/p/3596267.html
Knockout: 实践CSS绑定和jQuery的blur失去焦点事件, 给未通过校验的输入框添加红色边框突出显示. http://www.cnblogs.com/liuzhendong/p/3595949.html
Knockout: 实践CSS绑定和afterkeydown事件, 给未通过校验的输入框添加红色边框突出显示; 使用afterkeydown事件自动将输入转大写字母. http://www.cnblogs.com/liuzhendong/p/3595845.html

这三篇讲述的都是同一个主题, 虽然分别用了不同的技术实现, 但大方向都是自己写校验程序的, 今天使用knockout validation插件来做同样的校验工作, 正好可以比较一下可以节省多少代码!

首先要去https://github.com/Knockout-Contrib/Knockout-Validation下载knockout.validation.js, 然后引入自己的代码, 具体如下:

1.htm

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

     <script src="Lib/require/require.js" data-main="JsDemo5_Main"></script>

       <style type="text/css">

        .error {

            border: 2px solid red;

        }

        input {

            border: 1px solid #AAA;

            padding: 4px;

        }

    </style>

</head>

<body>

    <input id="txtFirstName" type="text" data-bind="value:firstName, validationElement: firstName" /><br />

    <input id="txtLastName" type="text" data-bind="value:lastName, validationElement: lastName" /><br />

    <input id="txtScore" type="text" data-bind="value:score, validationElement: score" /><br />

    <button id="btn" data-bind="click:SubmitClick" >btn</button>

    <br /><br />

    <!--显示错误提示信息 start-->

    <font color="red">

    <b>

        <span data-bind="validationMessage: firstName"></span>

        <span data-bind="validationMessage: lastName"></span>

        <span data-bind="validationMessage: score"></span>

    </b>

    </font>

    <!--显示错误提示信息 end-->

</body>

</html>

　　

2.JsDemo5_Main.js

require.config({

    paths: {

        "knockout": "Lib/knockout/knockout-2.3.0",

        "jquery": "Lib/jquery/jquery-1.9.1.min",

        "knockvalidation": "Lib/knockout/knockout.validation"

    }

});

require(['knockout', 'jquery','knockvalidation'], function ( ko, $, kovalidation) {

    //数据绑定

    ko.validation.configure({

        decorateElement: false,

        registerExtenders: true,

        messagesOnModified: true,

        insertMessages: false,

        parseInputAttributes: true,

        messageTemplate: null,

        errorClass : 'error'

    });

    var viewModel = {

        firstName: ko.observable().extend({ required: { message: '请输入firstName' } }),

        lastName: ko.observable().extend({ required: { message: '请输入lastName' } }).extend({ minLength: 2, maxLength: 10 }),

        score: ko.observable().extend({

            validation: {

                validator: function (val, someOtherVal) {

                    if (val != null && val.length >= someOtherVal)

                    {

                        return true;

                    }

                    else

                    {

                        return false;

                    }

                },

                message: '最少要输入6位数字',

                params: 6

            }

        }),

        SubmitClick: function () {

            if (viewModel.errors().length == 0) {

                //可以提交数据了.

                alert("ok");

                return true;

            } else {

                alert("fail");

                viewModel.errors.showAllMessages();

                return false;

            }

        }

    };

    viewModel.errors = ko.validation.group(viewModel);

    $(document).ready(function () {

        ko.applyBindings(viewModel);

    });

});

3.截图

4.总结

使用了knockout.validation插件，确实大大节省了代码量，而且knockout.validation插件也支持写自定义的校验函数，扩展性非常好，因此，值得推荐使用！

Knockout: 使用knockout validation插件进行校验, 给未通过校验的输入框添加红色边框突出显示.的更多相关文章

  1. Knockout: 使用CSS绑定和event的blur失去焦点事件, 给未通过校验的输入框添加红色边框突出显示.

    目的:使用knockout提供的机制实现输入框失去焦点后的校验工作,并使用CSS绑定给未通过校验的输入框添加红色边框突出显示. 步骤: 先在htm中添加.error的css样式, 并在输入框中的dat ...

  2. Knockout: 实践CSS绑定和jQuery的blur失去焦点事件, 给未通过校验的输入框添加红色边框突出显示.

    目的: 实践一下Knockout提供的CSS绑定功能和JQuery的blur失去焦点事件, 这次不使用Knockout的afterkeydown事件了． 步骤: 先在htm中添加.error的css样 ...

  3. Knockout: 实践CSS绑定和afterkeydown事件, 给未通过校验的输入框添加红色边框突出显示; 使用afterkeydown事件自动将输入转大写字母.

    目的: 实践一下Knockout提供的CSS绑定功能和afterkeydown事件． 步骤: 先在htm中添加.error的css样式, 并在输入框中绑定css: { error: !firstNam ...

  4. springboot使用validation 插件做数据校验

    不多说废话. 首先,我们需要在入参实体对象中,使用注解,控制 @Datapublic class UpdateShufflingRequest { private String shuffling_l ...

  5. 使用jQuery的validation插件实现表单校验

    前端表单校验: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  6. jQuery插件之validation插件

    前面的话 最常使用javascript的场合就是表单的验证,而jQuery作为一个优秀的javascript库,也提供了一个优秀的表单验证插件——Validation.Validation是历史最悠久 ...

  7. jQuery常用插件与jQuery使用validation插件实现表单验证实例

    jQuery常用插件 1,jQuery特别容易扩展,开发者可以基于jQuery开发一些扩展动能 2,插件:http://plugins.jquery.com 3,超厉害的插件:validation . ...

  8. jQuery的validation插件(验证表单插件)

    更完整的参考:http://www.runoob.com/jquery/jquery-plugin-validate.html 验证隐藏字段的使用(验证通过后ajax提交表单):http://www. ...

  9. (转)struts2：数据校验，通过XWork校验框架实现（validation.xml）

    转载自:http://www.cnblogs.com/nayitian/p/3475661.html struts2:数据校验,通过XWork校验框架实现(validation.xml)   根据输入 ...

随机推荐

  1. Linux（CentOS）中使用Mono+jexus部署Asp.net4.5网站

    一.效果: 二.安装步骤: 1.安装系统CentOS,我这是用CentOs7测试的. 2.接下来安装libgdiplus.Mono.Jexus有问题可以参考安装工具的官网: Libgdiplus下载官 ...

  2. 通过实例看懂diff命令输出

    摘自:http://blog.sina.com.cn/s/blog_612144f30100nkpt.html ############################### 实例: 有这样两个文件: ...

  3. Intellij IDEA连接Spark集群

    1. 首先安装Scala插件,File->Settings->Plugins,搜索出Scla插件,点击Install安装: 2. File->New Project->mave ...

  4. android形状drawable

    1.在res目录下新建drawable目录. 2.新建一个xml文件. 3.採用drawable来定义资源. <? xml version="1.0" encoding=&q ...

  5. resultType、resultMap

    resultType: 作用: 将查询结果按照sql列名pojo属性名一致性映射到pojo中. 场合: 常见一些明细记录的展示,比如用户购买商品明细,将关联查询信息全部展示在页面时,此时可直接使用re ...

  6. 〖Android〗Nexus 7 flo (razor) 刷入Recovery/CM-11.0后卡在开机动画的解决方法

    操作日志: 起因:Nexus 7 flo 华硕平板,刷了一个CWM Recovery之后变成了砖机: 尝试1:使用CWM Recovery清除数据,开机失败 尝试2:刷入CM 11 Snapshot的 ...

  7. Android开发之使用Handler刷新UI控件

    一.为什么必须使用Handler 线程安全问题 这个问题要理解的话很容易,如果没有这个约束,那么同时有两个线程对一个UI控件进行调整,那么控件自然就没法正常的工作,而为了解决这种二义性(就是一个东西同 ...

  8. 如何在eclipse中创建.properties文件

    打开file--new--other 选择general--file--next 选择要建在哪个文件名下,然后在底部的file name后输入properities文件名,finish即可

  9. SVM 推到期间 遇到的 表背景知识 （间隔最大化）

    背景,在看原理的时候,发现很多地方一知半解的,补充如下. 其他补充: 注:以下的默认为2分类 1.SVM原理: (1)输入空间到特征空间得映射 所谓输入空间即是输入样本集合,有部分情况输入空间与特征空 ...

  10. iOS中CGRectDividede中布局用法

    - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typica ...