码迷,mamicode.com
首页 > 其他好文 > 详细

Konckout开发实例:简单的表单提交页面

时间:2017-04-25 13:31:04      阅读:143      评论:0      收藏:0      [点我收藏+]

标签:oct   ret   nsca   model   err   add   UI   16px   提交   

<!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开发实例:简单的表单提交页面

标签:oct   ret   nsca   model   err   add   UI   16px   提交   

原文地址:http://www.cnblogs.com/by-dxm/p/6761181.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!