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>

相关阅读:
webstorm配置less解析的方法
 C#面试题（String和StringBuilder区别）
Winform控件输入的字母转换成大写
 C#之实参和形参
 我学React Native开发的经历(一) 第一周学习，环境搭建及demo1,一个导航跳转页面
 三、CSS样式——背景
 二、CSS选择器
 一、CSS介绍
 九、非主体机构元素——header元素、footer元素、address元素、网页编排
 八（第三篇）、主体结构元素——time元素、pubdate属性
原文地址：https://www.cnblogs.com/by-dxm/p/6761181.html