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.java /** * 省份封装类 */ package com.you.model; import java.io.Serializable; /** * @author ...
- HighCharts之2D堆条状图
HighCharts之2D堆条状图 1.HighCharts之2D堆条状图源码 StackedBar.html: <!DOCTYPE html> <html> <head ...
- java字符串替换的问题
今天工作中遇到一个问题,需要输出mongodbObject中的部分内容,当我转换成字符串以后出现了好像无法替换的问题,经过验证,发现并非是不能替换,只是想法错误而已. package demo; /* ...
- 如何拼接FusionCharts的JSON格式的双轴图
1.问题背景 假如,项目中遇到这样一个问题:利用FusionCharts中的JSON格式拼接双轴图,并将JSON字符串转换成JSON对象传输到前台,在页面上展示出来. 2.设计源码 /** * * @ ...
- 【转载】[ORACLE]详解not in与not exists的区别与用法
在网上搜了下关于oracle中not exists和not in性能的比较,发现没有描述的太全面的,可能是问题太简单了,达人们都不屑于解释吧.于是自己花了点时间,试图把这个问题简单描述清楚,其实归根结 ...
- iOS - Quartz 2D 手势截屏绘制
1.绘制手势截屏 具体实现代码见 GitHub 源码 QExtension QTouchClipView.h @interface QTouchClipView : UIView /** * 创建手势 ...
- 【原】Spring源码浅析系列-导入源码到Eclipse
用了Spring几年,平时也断断续续在项目里看过一些源码,大多都是比较模糊的,因为一旦从一个地方进去就找不到方向了,只能知道它大概是做了什么事能达到这个功能或者效果,至于细节一般没有太深入去研究.后来 ...
- 配置maven环境出现ARP tomcat native library 版本安装跟需求版本不一致时的解决方法An incompatible version xxxx of the APR based Apache Tomcat Native library is installed, while Tomcat requires version xxxx
此地址下载你所需要的library版本http://archive.apache.org/dist/tomcat/tomcat-connectors/native/ 点击binaries 点win32 ...
- SQL Server 扩展事件
SQL Server 扩展事件(Extended Event)是用于服务器的常规事件处理系统,是追踪SQL Server系统运行状态的神器,同时也是一个日志记录工具,扩展事件完全可以取代SQL追踪(S ...
- 新的一年新的变化！IT的大变天
今天是一个特别的日子,祝女神朋友们,节日快乐,早点下班! 新的一年,大家又忙碌在加班加点的堆代码中,bug的陪伴使我快乐使我忧伤,想想想,也奋斗了五六百的岁月,实习期向往大城市的公司,梦想着有一天与自 ...