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框架的“第五个预览版”.你可以在这里 ...
随机推荐
- dojo实现省份地市级联---省份数据源
province.json: { "identifier": "id", "label": "name", " ...
- FusionCharts Marimekko图
1.Marimekko静态页面 Marimekko.html: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//E ...
- php中静态变量和静态方法。
在php类的内部当使用static进行修饰了类的属性或者方法,则改属性或者方法被成为类的静态属性或者静态访问, 静态属性和非静态属性的区别 php官方的解释 声明类成员或方法为static,就可以不实 ...
- 【mongodb系统学习之五】mongodb启动最常用参数
五.mongodb启动时其他常用参数的使用(都是选用): 1).--logappend,指定日志的写入方式为追加,强烈建议使用: 2).--port,指定mongodb的端口号,当不使用这个参数的时候 ...
- 错误代码： 1449 The user specified as a definer ('root'@'%') does not exist
1. 错误描述 1 queries executed, 0 success, 1 errors, 0 warnings 查询:call analyse_use('20150501','20150601 ...
- Error Code: 1175. You are using safe update mode and you tried to update a table
错误描述 11:14:39 delete from t_analy_yhd Error Code: 1175. You are using safe update mode and you tried ...
- Caused by: java.lang.ClassNotFoundException: org.objectweb.asm.commons.EmptyVisitor
1.错误描述 2014-7-13 1:45:53 org.apache.struts2.spring.StrutsSpringObjectFactory info 信息: ... initialize ...
- java.lang.NullPointerException: No FileItemFactory has been set.
1.错误描述 java.lang.NullPointerException: No FileItemFactory has been set. at org.apache.commons.fileup ...
- Gearman研习笔记（1） ------ 官网介绍要点摘录
之前的项目里使用过消息中间件(公司提供的MQ服务)来做分发,因为MQ是基于消息的,并不是专业的任务分发器,在一些复杂场景上使用起来并不恰当. 后来听组长说了下Gearman(听名字还以为是Ironma ...
- 【BZOJ4199】【NOI2015】品酒大会（后缀数组）
[BZOJ4199][NOI2015]品酒大会 题面 BZOJ Uoj 洛谷 题解 考虑最裸的暴力 枚举每次的长度 以及两个开始的位置 检查以下是否满足条件,如果可以直接更新答案 复杂度\(O(n^3 ...