Konckout开发实例：简单的表单提交页面
<!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开发实例：简单的表单提交页面的更多相关文章
- 每天一个JavaScript实例-防止反复表单提交
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- Maven web项目(简单的表单提交) 搭建(eclipse)
我们将会搭建一个,基于Maven管理的,具有简单的表单提交功能的web项目,使用DAO--service--WEB三层结构,服务器使用Tomcat 1 项目基本结构的搭建 左上角File---> ...
- jQuery最简单的表单提交方式
第一步:绑定事件 常用的与ajax相关的事件参考如下: 1.$(selector).click(function) 2.$(selector).change(function) 3.$(selecto ...
- PHP开发之旅-提取表单提交内容发送邮件
在实际项目开发中,我们经常需要得到用户的反馈信息并及时回复.普通的留言板有一定的内容限制,而邮件则能满足这个需求.今天给大家演示一下怎么利用PHP发送电子邮件. 1.创建表单 <form nam ...
- [deviceone开发]-一个简单的表单示例
一.简介 这个例子我们用do_ScrollView+do_LinearLayout来实现,当没有输入相关的值而去保存的时候,则把隐藏的几个提示Label显示出来,然后调用do_LinearLayout ...
- PHP——简单的表单提交
<body> <form name="" method="post" action="CHULI.php"> < ...
- springmvc 表单提交
Spring MVC自带的表单标签比较简单,很多时候需要借助EL和JSTL来完成. 下面是一个比较简单的表单提交页面功能: 1.User model package com.my.controller ...
- [Spring MVC] - 表单提交
Spring MVC自带的表单标签比较简单,很多时候需要借助EL和JSTL来完成. 下面是一个比较简单的表单提交页面功能: 1.User model package com.my.controller ...
- （转）ASP.NET MVC 第五个预览版和表单提交场景
转自:http://ourlife.blog.51cto.com/708821/296171 上个星期四,ASP.NET MVC开发团队发布了ASP.NET MVC框架的“第五个预览版”.你可以在这里 ...
随机推荐
- linux下ffmpeg安装
1.ffmpeg下载地址: http://www.ffmpeg.org/download.html 2.解压 1 $ tar zvfj ffmpeg.tar.bz2 这里作者假设已经重命名为ffmpe ...
- （二十四）mongodb中group的问题二
今天的工作还是继续昨天没有完成的,由于对mongodb数据库的不熟悉,导致昨天的思路上也出了一点问题,我需要查询出同一个ruleID中不同的processingID的条数,然后根据条数来排列先后顺序, ...
- （十二）java嵌套类和内部类
嵌套类和内部类:在一个类里边定义的类叫做嵌套类,其中没有static修饰的嵌套类是我们通常说的内部类,而被static修饰的嵌套类不常用.有的地方没有嵌套类和内部类的区分,直接是嵌套类就称作内部类,没 ...
- SQL游标使用及实例
declare my_cursor cursor scroll dynamic for select * from t_msg open my_cursor declare @name sysname ...
- SPOJ D-QUERY
以前主席树学 kungbin 最近看了网上的版本 终于发现和我以前学的线段树差不多的了 希望最近能够加强 #include<bits/stdc++.h> using namespace ...
- trs.getElementsByTagName is not a function 出现原因及解决办法
好久没有操作dom元素了,在定义dom元素时, let tBo = document.getElementById('tBody') let trs = tBo.getElementsByTagNam ...
- 关于CS1061报错（XX不包含XXX的定义，并且找不到类型为XX的第一个参.....）的一种可能的解决的办法
在我编程中,我遇到了一个这样的报错, 可是我引用的product类中又确实定义了这么一个方法, protected void BindPageData(int categoryID) { Produc ...
- babel-runtime和babel-polyfill两者区别优缺点
先说两种方式的原理: babel-polyfill 使用场景 Babel 默认只转换新的 JavaScript 语法,而不转换新的 API.例如,Iterator.Generator.Set.Maps ...
- Linux性能分析工具top命令详解
top命令是Linux下常用的性能分析工具,能够实时显示系统中各个进程的资源占用状况,常用于服务端性能分析. top命令说明 [www.linuxidc.com@linuxidc-t-tomcat-1 ...
- [ZJOI2006]书架（树状数组水过）
这道题显然平衡树,splay,treap什么的随便切 然而我不想打,决定水过这道题 把空间开3倍,树状数组维护它前面的树的个数,开个id数组记录位置 找一个数排名直接二分加求前缀和,log^2的搞一搞 ...