<!doctype html>

<html >

  <head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

  <title>

    KNOCKOUT LESSON 4

  </title>

  <link rel="stylesheet" type="text/css" href="css/main.css" />

  <style>

  #content1{padding:16px;}

  .errors{color: red;}

  </style>

  <script type="text/javascript" src="scripts/knockout30.js"></script>

  <script type="text/javascript" src="scripts/knockout.validation.min.js"></script>

</head>

<body>

  <div id="content1">

        <form data-bind="submit:SubmitForm">

            <div><label>用户名：</label><input data-bind="value:Name" /></div>

            <div><label>电子邮件：</label><input data-bind="value:Email" /></div>

            <div><label>地址：</label>

                <select data-bind="options:CityList,optionsText:'Name',optionsValue:'Code',value:City,optionsCaption:'请选择城市'"></select>

                <select data-bind="options:CurrentAreaList,optionsText:'Name',optionsValue:'Code',value:Area,optionsCaption:'请选择区县'"></select>

            </div>

            <div>

                <label>爱好</label>

                <select multiple="multiple" data-bind="options:Hobbies,selectedOptions:MyHobbies"></select>

            </div>

            <p data-bind="html:MyHobbies"></p>

            <div>

                <input type="submit" value="提交" />

            </div>

        </form>

  </div>

    <script type="text/javascript" src="scripts/jQuery183.js"></script>

    <script>

        ko.validation.configure({

            registerExtender:true,

            insertMessages:true,

            errorClass:'errors'

        });

        $(document).ready(function(){

            var ViewModel = function(){

                var self = this;

                self.Name = ko.observable("").extend({required:{message:'请输入您的姓名'}});

                self.Email = ko.observable("").extend({required:{message:'请输入您的邮箱'}}).extend({pattern:{message:'邮箱格式非法',params:'^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$'}});

                self.City = ko.observable("");

                self.Area = ko.observable("");

                self.CityList = ko.observableArray([

                    {Name:'北京',Code:1001},

                    {Name:'上海',Code:1002}

                ]);

                self.AreaList = ko.observableArray([

                    {Name:'朝阳区',Code:1001001,CityCode:1001},

                    {Name:'宣武区',Code:1001002,CityCode:1001},

                    {Name:'海淀区',Code:1001003,CityCode:1001},

                    {Name:'通州区',Code:1001004,CityCode:1001},

                    {Name:'静安区',Code:1002001,CityCode:1002},

                    {Name:'徐汇区',Code:1002002,CityCode:1002},

                    {Name:'浦东区',Code:1002003,CityCode:1002}

                ]);

                self.CurrentAreaList = ko.computed(function(){

                    return ko.utils.arrayFilter(self.AreaList(),function(area){

                        return area.CityCode == self.City();

                    });

                },self);

                self.Hobbies = ko.observableArray([

                    "登山",

                    "篮球",

                    "电影",

                    "音乐"

                ]);

                self.MyHobbies = ko.observable("");

                self.SubmitForm = function(){

                    if(self.errors().length > 0){

                        self.errors.showAllMessages();

                        return false;

                    }else{

                        return true;

                    }

                }

            }

            var currentViewModel = new ViewModel();

            ko.applyBindings(currentViewModel);

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

        });

    </script>

</body>

</html>

将错误信息集中显示到一固定区域：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>index2</title>

        <style>

            .errors{color: red;}

            #content1{padding: 20px;}

        </style>

    </head>

    <body>

        <div id="content1">

            <form data-bind="submit:SubmitForm">

                <div><label>用户名：</label><input data-bind="value:Name" /></div>

                <div><label>电子邮件：</label><input data-bind="value:Email" /></div>

                <div><label>地址：</label>

                    <select data-bind="options:CityList,optionsText:'Name',optionsValue:'Code',value:City,optionsCaption:'请选择城市'"></select>

                    <select data-bind="options:CurrentAreaList,optionsText:'Name',optionsValue:'Code',value:Area,optionsCaption:'请选择区县'"></select>

                </div>

                <div><input type="submit" value="提交" /></div>

            </form>

            <div class="errors">

                <p data-bind="validationMessage:Name"></p>

                <p data-bind="validationMessage:Email"></p>

            </div>

        </div>

        <script src="scripts/jQuery183.js"></script>

        <script src="scripts/knockout30.js"></script>

        <script src="scripts/knockout.validation.min.js"></script>

        <script>

            ko.validation.configure({

                registerExtenders:true,

                insertMessages:false,

                errorClass:'errors'

            });

            $(function(){

                var ViewModel = function(){

                    var self = this;

                    self.Name = ko.observable("").extend({required:{message:'请输入您的姓名'}});

                    self.Email = ko.observable("").extend({required:{message:'请输入你的邮箱'}}).extend({pattern:{message:'邮箱格式非法',params:'^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$'}});

                    self.City = ko.observable("");

                    self.Area = ko.observable("");

                    self.CityList = ko.observableArray([

                        {Name:'北京',Code:1001},

                        {Name:'上海',Code:1002}

                    ]);

                    self.AreaList = ko.observableArray([

                        {Name:'朝阳区',Code:1001001,CityCode:1001},

                        {Name:'宣武区',Code:1001002,CityCode:1001},

                        {Name:'海淀区',Code:1001003,CityCode:1001},

                        {Name:'通州区',Code:1001004,CityCode:1001},

                        {Name:'静安区',Code:1002001,CityCode:1002},

                        {Name:'徐汇区',Code:1002002,CityCode:1002},

                        {Name:'浦东区',Code:1002003,CityCode:1002}

                    ]);

                    self.CurrentAreaList = ko.computed(function(){

                        return ko.utils.arrayFilter(self.AreaList(),function(area){//过滤数组，包含两个参数，第一个需要过滤的数组，第二个是匿名方法

                            return area.CityCode == self.City();

                        });

                    },self);

                    self.SubmitForm = function(){

                        if(self.errors().length > 0){

                            self.errors.showAllMessages();

                            return false

                        }else{

                            return true;

                        }

                    }

                }

                var currentViewModel = new ViewModel();

                ko.applyBindings(currentViewModel);

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

            });

        </script>

    </body>

</html>

Konckout开发实例：简单的表单提交页面的更多相关文章

  1. 每天一个JavaScript实例-防止反复表单提交

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  2. Maven web项目(简单的表单提交) 搭建(eclipse)

    我们将会搭建一个,基于Maven管理的,具有简单的表单提交功能的web项目,使用DAO--service--WEB三层结构,服务器使用Tomcat 1 项目基本结构的搭建 左上角File---> ...

  3. jQuery最简单的表单提交方式

    第一步:绑定事件 常用的与ajax相关的事件参考如下: 1.$(selector).click(function) 2.$(selector).change(function) 3.$(selecto ...

  4. PHP开发之旅-提取表单提交内容发送邮件

    在实际项目开发中,我们经常需要得到用户的反馈信息并及时回复.普通的留言板有一定的内容限制,而邮件则能满足这个需求.今天给大家演示一下怎么利用PHP发送电子邮件. 1.创建表单 <form nam ...

  5. [deviceone开发]-一个简单的表单示例

    一.简介 这个例子我们用do_ScrollView+do_LinearLayout来实现,当没有输入相关的值而去保存的时候,则把隐藏的几个提示Label显示出来,然后调用do_LinearLayout ...

  6. PHP——简单的表单提交

    <body> <form name="" method="post" action="CHULI.php"> < ...

  7. springmvc 表单提交

    Spring MVC自带的表单标签比较简单,很多时候需要借助EL和JSTL来完成. 下面是一个比较简单的表单提交页面功能: 1.User model package com.my.controller ...

  8. [Spring MVC] - 表单提交

    Spring MVC自带的表单标签比较简单,很多时候需要借助EL和JSTL来完成. 下面是一个比较简单的表单提交页面功能: 1.User model package com.my.controller ...

  9. （转）ASP.NET MVC 第五个预览版和表单提交场景

    转自:http://ourlife.blog.51cto.com/708821/296171 上个星期四,ASP.NET MVC开发团队发布了ASP.NET MVC框架的“第五个预览版”.你可以在这里 ...

随机推荐

  1. Android View绘制回调方法流程

    Android中View的性命周期,挪用 invalidate() 战 requestLayout() 会触收哪些方式,一张图就可以讲解的很详细. 该图确切一看便特别很是清楚.让人简略的懂得View的 ...

  2. thinkphp中使用phpexcel读取所有的行记录

    ThinkPHP3.2使用phpexcle 将phpexcel放到Think\Org\PHPExcel中 public function index() { import('Org.PHPExcel. ...

  3. R语言之内存管理

    转载于:http://blog.csdn.net/hubifeng/article/details/41113789 在处理大型数据过程中,R语言的内存管理就显得十分重要,以下介绍几种常用的处理方法. ...

  4. 使用串口下载vxworks映象的方法

    使用串口下载vxworks映象的方法 由于坛子里这方面的可行性文章比较少,不时有一些网友在询问这方面的问题,再加上通过这种方法可以调试网络驱动,所以我花了一点时间把整个下载过程试了一下. 1．配置co ...

  5. java.util.zip.ZipException:ZIP file must have at least one entry

    1.错误描述 java.util.zip.ZipException:ZIP file must have at least one entry 2.错误原因 由于在导出文件时,要将导出的文件压缩到压缩 ...

  6. MFC中CFileDialog用法

    用CFileDialog选择了一个文件后,使用FILE::fopen打开文件错误,使用 的是相对地址,和王工调试了半天,怎么跟踪也没发现错误,原来如此......... CFileDialog文件选择 ...

  7. Exynos4412从SD卡启动的简单网络文件系统制作

    Exynos4412从SD卡启动的简单网络文件系统制作 1. 简介 嵌入式系统能够在开发板上正常运行,需要先进行系统配置,一个完整的嵌入式系统应该包含的几个部分::uboot,kernel,rootf ...

  8. Codeforces Round #454 D. Seating of Students

    分三类 1 1: 一个就好了 3 3:特殊讨论下 或 : 第一行奇序号的数放前面,偶序号的数放后面,第二行奇序号的数放前面,偶序号的数放后面,第二行依次类推 有点难写,真的菜 #include< ...

  9. 关于js中 toFixed()的一个小坑

    作为一名前端,大家都应该知道,toFixed()的作用,toFixed()经常用于前台与后台数据格式的转换,套用下w3c上面的定义: 定义和用法toFixed(n) 方法可把 Number 四舍五入为 ...

  10. SpringMVC 框架系列之初识与入门实例

    微信公众号:compassblog 欢迎关注.转发,互相学习,共同进步! 有任何问题,请后台留言联系! 1.SpringMVC 概述 (1). MVC:Model-View-Control Contr ...