Konckout开发实例：简单的表单提交页面
Posted 党兴明
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>
以上是关于Konckout开发实例：简单的表单提交页面的主要内容，如果未能解决你的问题，请参考以下文章
表单（上）EasyUI Form 表单EasyUI Validatebox 验证框EasyUI Combobox 组合框EasyUI Combo 组合EasyUI Combotree 组合树((代码片