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框架的“第五个预览版”.你可以在这里 ...
随机推荐
- jlink烧写Nor Flash时出错正确解决方法汇总：PC of target system has unexpected value after programming
成都国嵌的课程:国嵌体验入门班-2-1(开发板系统安装-Jlink方式).rar毒害了不少人,那种直接烧写nor flash,不进行任何配置的方法,能够成功纯属偶然,他自己在视频中烧写时也出现了两次错 ...
- VME总线
简介 诞生于25年前的VME(VersaModule Eurocard)总线是一种通用的计算机总线,结合了Motorola公司Versa总线的电气标准和在欧洲建立的Eurocard标准的机械形状因子, ...
- flask中jinjia2模板引擎使用详解5
接上文 宏 可以理解为函数,即把一些常用的模板片段做好封装,以便于重用,减少工作量和维护难度. 宏的定义很简单: {%macro xxx()%} ##这里写内容 {%endmacro%} 下面引用 ...
- winfrom如何在listview中添加控件
private Button btn = new Button(); private void Form1_Load(object sender, EventArgs e) { ListViewIte ...
- springtest-junit-jidi--测试接口
一,问题分析 假如在一个项目中要测试一个接口,但是这个项目没有对外开放url地址,话句话就是说浏览器访问不了里面的资源,自己造的数据不能测试接口,那么只能等别人来调用自己的接口,而且自己也不能测试,假 ...
- [mysql] 2进制安装和简单优化
##################################mysql 2进制安装和简单优化################################################## ...
- swing 之简单登录窗体实现
swing之简单登陆窗体的实现 import java.awt.*; import java.awt.event.ActionEvent; import java.awt.event.ActionLi ...
- Python基础__函数
本节将进入函数的介绍,函数是Python基础中最精彩的部分之一,接下来将对函数做详细介绍.函数 函数就是对代码进行一个封装.把实现某一功能的代码进行封装到一起.下次需要使用时不需要进行编写代码直接调用 ...
- [BZOJ4372]烁烁的游戏
题面戳我 题意: 给一颗n个节点的树,边权均为1,初始点权均为0,m次操作: Q x:询问x的点权. M x d w:将树上与节点x距离不超过d的节点的点权均加上w. \(1≤n≤10^5\) sol ...
- [BZOJ1014] [JSOI2008] 火星人prefix (splay & 二分答案)
Description 火星人最近研究了一种操作:求一个字串两个后缀的公共前缀.比方说,有这样一个字符串:madamimadam,我们将这个字符串的各个字符予以标号:序号: 1 2 3 4 5 6 7 ...