首页 > 代码库 > Konckout开发实例：简单的表单提交页面

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

2024-09-17 06:33:33   218人阅读

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


联系
我们