zoukankan html css js c++ java

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>

查看全文

相关阅读:
laydate日期插件弹出闪退和多次闪退问题解决
 IconFont 图标的3种引用方式
 jquery操作select下拉框的多种方法(选中,取值,赋值等)
jquery获取select选中项自定义属性的值
 Centos查看端口占用、开启端口
 IaaS，PaaS，SaaS 的区别
 IOS手机使用Fiddler抓包（HTTPS）（二）
Android手机使用Fiddler抓包（HTTPS）（二）
Fiddler使用详解（一）
python2.x和python3.x中raw_input( )和input( )区别

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