自定义UI控件:电话号码的输入时自动格式化

  1. 对String进行扩展,字符串增加下表索引功能
import Foundation

// インデックスを文字列に追加
extension String
{
    subscript(index:Int) -> String
    {
        get{
            return String(self[self.index(self.startIndex, offsetBy: index)])
        }
        set{
            let tmp = self
            self = ""
            for (idx, item) in tmp.characters.enumerated() {
                if idx == index {
                    self += "\(newValue)"
                }else{
                    self += "\(item)"
                }
            }
        }
    }
}

  1. 提取共通部分,使得此控件可以使用于不同的需求

为了防止粘贴导致光标设置无效,需要在设置光标位置时(66, 78行)加上:
DispatchQueue.main.asyncAfter(deadline: .now()) {}
参考链接:https://stackoverflow.com/questions/53151401/how-to-place-cursor-at-the-end-of-formatted-number-after-copy-paste

import Foundation
import UIKit

class AutoFillTextField: UITextField {
    
    // 追加記号の位置
    var insertPosition:[Int]!
    // 追加記号のタイプ
    var insertStr: String!
    // 最大長
    var maxStr: Int!
    // カーソル位置
    var cursorPostionOffset: Int!
    
    // 前回のテキスト内容
    var previousText: String!
    // 前回のレンジ
    var previousRange: UITextRange!
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        
        setupField()
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        
        setupField()
    }
    
    private func setupField() {
        // 数字キーボードのタイプを設定
        self.keyboardType = .numberPad
        
        //テキストフィールド値変更の監視
        self.addTarget(self, action: #selector(format), for: .editingChanged)
    }
    
    @objc func format() {
        // 現在のカーソル位置
        var cursorPostion = self.offset(from: self.beginningOfDocument, to: self.selectedTextRange!.start)
        
        // 数字を取得
        let digitsText = getDigitsText(string: self.text!, cursorPosition: &cursorPostion)
        
        // 最大長の制限
        if digitsText.count > maxStr {
            let str = digitsText.prefix(maxStr)
            self.text = getHyphenOrSpaceText(string: String(str), cursorPosition: &cursorPostion, insertPosition: insertPosition, insertStr: insertStr)
            
            if cursorPostion < maxStr + insertPosition.count {
                 cursorPostionOffset = cursorPostion
            } else {
                 cursorPostionOffset = maxStr + insertPosition.count
            }
            
            let targetPostion = self.position(from: self.beginningOfDocument, offset: cursorPostionOffset)!
            DispatchQueue.main.asyncAfter(deadline: .now()) {
                self.selectedTextRange = self.textRange(from: targetPostion, to: targetPostion)
            }
            return
        }
        
        // 文字列に区切り記号を追加
        let hyphenText = getHyphenOrSpaceText(string: digitsText, cursorPosition: &cursorPostion, insertPosition: insertPosition, insertStr: insertStr)
        self.text = hyphenText
        
        // カーソル位置を設定
        let targetPostion = self.position(from: self.beginningOfDocument, offset: cursorPostion)!
        DispatchQueue.main.asyncAfter(deadline: .now()) {
            self.selectedTextRange = self.textRange(from: targetPostion, to: targetPostion)
        }
        previousText = self.text!
        previousRange = self.selectedTextRange!
    }
    
    // 数字を取得
    private func getDigitsText(string: String, cursorPosition:inout Int) -> String {
        // カーソル開始位置を記録
        let originalCursorPosition = cursorPosition
        var result = ""

        var i = 0
        for uni in string.unicodeScalars {
            if CharacterSet.decimalDigits.contains(uni) {
                result.append(string[i])
            } else {
                // リセットカーソル位置
                if i < originalCursorPosition {
                    cursorPosition = cursorPosition - 1
                }
            }
            i = i + 1
        }
         
        return result
    }
    
    // 文字列に区切り記号を追加
    private func getHyphenOrSpaceText(string: String, cursorPosition:inout Int, insertPosition: [Int], insertStr: String) -> String {
        // カーソル開始位置を記録
        let originalCursorPosition = cursorPosition
        var result = ""
         
        for i in 0 ..< string.count  {
            for j in 0 ..< insertPosition.endIndex {
                if i == insertPosition[j] {
                    result.append(insertStr)
                    // リセットカーソル位置
                    if i < originalCursorPosition {
                        cursorPosition = cursorPosition + 1
                    }
                }
            }
            result.append(string[i])
        }
         
        return result
    }
}

  1. 定义电话号码的UI控件
    如果要适应不同的需求,只需要更改setValue()中的值即可
import Foundation
import UIKit

/// 010-1234-5678型の電話番号を整形
class PhoneNumTextField: AutoFillTextField {
     
    override init(frame: CGRect) {
        super.init(frame: frame)
        
        setValue()
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        
        setValue()
    }
    
    func setValue() {
        // 追加記号の位置
        self.insertPosition = [3, 7]
        // 追加記号のタイプ
        self.insertStr = "-"
        // 最大長
        self.maxStr = 11
    }
}

参考链接:https://www.hangge.com/blog/cache/detail_1610.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
注意:由于文件大小为111MB,但本人的上传权限只有60MB,所以分开两部分压缩上传。解压前必须与part2一起解压。part2在本人的资源里可以找到:http://download.csdn.net/user/lxm0918 第1章 服务器控件概述及开发环境部署 .1 1.1 自定义服务器控件 1 1.2 服务器控件在软件开发过程中的作用 1 1.3 在控件开发中提升自己 2 1.4 可继承控件基类介绍 2 1.5 运行一个简单的控件 7 1.5.1 开发一个简单控件 7 1.5.2 部署和运行 11 1.6 控件生命周期 12 1.6.1 概述 12 1.6.2 用代码跟踪控件生命周期过程 14 1.7 本章总结 17 第2章 服务器控件开发中的调试技术 18 2.1 预置代码示例 18 2.2 调试页面服务端代码 19 2.3 服务器控件的调试 20 2.3.1 运行模式下的调试方法 20 2.3.2 设计模式下的调试方法 20 2.4 javascript脚本调试方法 22 2.4.1 调试页面中的javascript脚本(方法一) 22 .2.4.2 调试页面中的javascript脚本(方法二) 23 2.4.3 调试非嵌入式javascript脚本文件 23 2.4.4 调试嵌入式javascript脚本资源文件 24 2.4.5 高效率调试的技巧 24 2.5 ajax library对javascript调试支持 26 2.6 本章总结 26 第3章 从零开始开发服务器控件 27 3.1 选择基类 27 3.2 控件呈现顺序 28 3.3 render呈现控件的几种方式 30 3.3.1 使用htmltextwriter类输出 30 3.3.2 直接输出html标签 32 3.3.3 使用服务器控件的rendercontrol方法 33 3.4 addattributestorender方法 34 3.5 createchildcontrols方法 35 3.6 inamingcontainer接口 36 3.7 实现复合控件 38 3.7.1 createchildcontrols方法 39 3.7.2 childcontrolscreated属性 39 3.7.3 ensurechildcontrols方法 39 3.7.4 recreatechildcontrols方法 39 3.7.5 controls属性 40 3.7.6 hascontrols方法 40 3.7.7 hasevents方法 40 3.7.8 findcontrol方法 41 3.7.9 实现复合控件示例 41 3.8 常用开发技巧 51 3.8.1 designmode属性 51 3.8.2 屏蔽基类控件中的属性 52 3.8.3 page.request.browser属性 53 3.8.4 设置控件id规范 53 3.8.5 增强findcontrol功能 54 3.8.6 映射服务端控件值到客户端 55 3.8.7 禁止派生自compositecontrol的控件创建子控件 56 3.8.8 使用createchildcontrols的注意事项 56 3.8.9 不要误解设计元属性defaultvalue 57 3.8.10 在render方法中利用基类资源 57 3.8.11 件编译&件属性 60 3.9 本章总结 61 第4章 服务器控件属性 62 4.1 控件属性的作用 62 4.1.1 系统属性 62 4.1.2 自定义属性 62 4.2 简单属性 63 4.3 属性的设计特性 64 4.4 复杂属性 67 4.4.1 概述 67 4.4.2 复杂属性的几种标记形式 67 4.4.3 深入研究——复杂属性分析器 79 4.5 深入研究——定制自己的属性编辑器 85 4.5.1 系统属性编辑器 85 4.5.2 定制属性编辑器 91 4.6 类型转换器 126 4.6.1 系统类型转换器 126 4.6.2 定制自己的类型转换器 128 4.7 实现自定义属性 138 4.8 本章总结 145 第5章 事件和数据回发机制 146 5.1 控件事件和数据回发概述 146 5.1.1 事件及其意义 146 5.1.2 数据回发机制 147 5.2 事件和数据回发机制的实现 148 5.2.1 客户端回传事件接口ipostbackeventhandler 148 5.2.2 客户端回发/回调揭密 150 5.2.3 回传数据处理接口ipostbackdatahandler 153 5.2.4 正确处理继承基类中控件的事件 159 5.2.5 扩展kingtextbox控件功能(kingtextboxcanpostevent控件) 161 5.3 复合控件的事件处理机制 168 5.3.1 高效率事件集合对象 168 5.3.2 定制自己的委托和事件参数类 170 5.3.3 复合控件的事件处理 175 5.3.4 自动完成功能控件searchcontrolintelligent 185 5.4 本章总结 193 第6章 页面状态机制 194 6.1 页面状态概述 194 6.2 视图状态机制 195 6.2.1 istatemanager接口 195 6.2.2 控件生命周期中的装载和保存视图阶段 196 6.2.3 简单类型视图状态应用 197 6.2.4 实现自定义类型视图状态 205 6.3 控件状态机制 217 6.4 视图状态和控件状态的关系 221 6.4.1 在禁用视图状态的情况下仍然使用viewstate对象 221 6.4.2 istatemanager接口仍然可以在控件状态中使用 223 6.4.3 视图状态和控件状态组合使用规则 225 6.5 加密页面状态 225 6.6 清除页面状态 226 6.7 对动态添加控件的视图状态分析 228 6.8 自定义类型转换器实现高效率序列化 231 6.9 页面状态性能优化策略 238 6.9.1 存储位置优化——把视图状态信息保存在服务端而非客户端 238 6.9.2 体积优化——压缩视图状态数据 240 6.9.3 分块存储视图状态数据 243 6.10 视图状态和控件状态的总结 243 6.11 本章总结 244 第7章 定制自定义控件主题样式 245 7.1 控件样式概述 245 7.2 asp.net对样式的支持 245 7.2.1 style类的工作原理及使用 245 7.2.2 webcontrol基类对样式的支持功能及其工作原理 249 7.2.3 htmltextwriter类对控件样式的支持 252 7.2.4 定义控件内部的样式属性规则 253 7.2.5 两个常用转换方法 256 7.3 应用示例 260 7.3.1 复合控件样式及视图状态 260 7.3.2 控件结构与样式分离方案 268 7.4 本章总结 295 第8章 控件客户端编程模型 297 8.1 asp.net服务端控件对客户端的支持 297 8.2 clientscriptmanager类功能详解 301 8.2.1 registerarraydeclaration方法 301 8.2.2 registerclientscriptblock方法 302 8.2.3 registerclientscriptinclude方法 303 8.2.4 registerclientscriptresource方法 304 8.2.5 registerstartupscript方法 305 8.2.6 registerexpandoattribute方法 305 8.2.7 registerhiddenfield方法 306 8.2.8 getcallbackeventreference方法 307 8.2.9 getpostbackclienthyperlink方法 307 8.2.10 getpostbackeventreference方法 308 8.2.11 getwebresourceurl方法 308 8.2.12 registeronsubmitstatement方法 309 8.3 客户端回调 309 8.4 客户端控件应用示例 323 8.4.1 封装js客户端对象 323 8.4.2 封装htc客户端对象 343 8.4.3 在线签名控件示例应用 371 8.5 常用的一些javascript框架 385 8.6 本章总结 387 第9章 定制用户控件 388 9.1 用户控件概述 388 9.1.1 用户控件的作用.. 388 9.1.2 了解system.web.ui.usercontrol基类 388 9.2 用户控件应用示例 389 9.2.1 简单用户控件 389 9.2.2 复杂数据绑定用户控件 394 9.3 用户控件缓存 419 9.3.1 asp.net缓存介绍 419 9.3.2 用户控件缓存 420 9.4 本章总结 421 第10章 开发验证控件 422 10.1 验证控件的工作原理 422 10.1.1 内置验证控件简述 422 10.1.2 验证控件的工作机制解析 423 10.2 实现自定义验证控件 443 10.3 本章总结 451 第11章 在控件中使用嵌入资源 452 11.1 在控件中嵌入资源的原理 452 11.2 在控件中应用嵌入资源 453 11.2.1 在控件中使用嵌入资源 453 11.2.2 常用嵌入资源类型及用法 455 11.3 浏览器常用工具 460 11.3.1 httpwatch 460 11.3.2 ie develper toolbar 461 11.3.3 fiddler 461 11.4 本章总结 462 第12章 开发模板数据绑定控件 463 12.1 asp.net模板属性控件机制 463 12.1.1 模板属性介绍 463 12.1.2 asp.net对模板控件的支持 464 12.1.3 repeater控件模板实现机制解析 466 12.2 自定义控件应用示例 469 12.2.1 模板控件功能 469 12.2.2 应用示例 470 12.3 本章总结 489 第13章 数据绑定和数据源控件 490 13.1 数据绑定控件 490 13.1.1 数据绑定控件概述 490 13.1.2 asp.net对数据绑定控件的支持 491 13.2 数据绑定控件示例应用 501 13.2.1 控件实现功能 501 13.2.2 应用示例 502 13.3 数据源控件 508 13.3.1 数据源控件概述 508 13.3.2 asp.net对数据源控件的支持 508 13.4 数据源控件示例应用 515 13.4.1 控件实现功能 515 13.4.2 应用示例 516 13.5 本章总结 522 第14章 扩展控件方案——gridview 523 14.1 扩展控件概述 523 14.2 任意定制gridview多表头 523 14.2.1 功能概述 523 14.2.2 代码实现 524 14.3 固定gridview表头并增加滚动支持 527 14.3.1 功能概述 527 14.3.2 代码实现 528 14.4 本章总结 533 第15章 自定义控件设计模式下编程汇总 534 15.1 .net框架对设计支持 534 15.2 设计元数据支持 535 15.3 复杂属性序列化 539 15.4 类型转换器 539 15.5 属性编辑器 540 15.6 设计模式可用基类介绍 541 15.7 设计控件呈现的支持 543 15.7.1 概述 543 15.7.2 应用示例 543 15.8 自动套用格式 546 15.8.1 概述 546 15.8.2 应用示例 547 15.9 模板ui设计器 551 15.10 智能操作列表 552 15.10.1 概述 552 15.10.2 应用示例 552 15.11 控件设计器区域 558 15.11.1 概述 558 15.11.2 应用示例 558 15.12 本章总结 562 第16章 asp.net ajax控件开发——客户端 563 16.1 asp.net ajax框架概述 563 16.2 ajax library对客户端面向对象功能支持 564 16.2.1 命名空间及type和function类 565 16.2.2 接口类型 568 16.2.3 类类型以及面向对象继承特征 569 16.2.4 枚举类型 570 16.2.5 反射功能 570 16.3 ajax library中的常用类型 571 16.3.1 ajax library对javascript基类型的扩展 571 16.3.2 sys.stringbuilder类 576 16.4 ajax library请求服务端和webservices 577 16.4.1 sys.net命名空间中的类 577 16.4.2 请求过程解析 578 16.4.3 webrequest请求示例 579 16.4.4 使用代理实现ajax调用服务端示例 581 16.5 ajax library对控件客户端类开发的支持 584 16.5.1 客户端控件基成员(类/接口) 584 16.5.2 asp.net ajax控件客户端生命周期 589 16.6 客户端控件示例应用 592 16.7 调试和跟踪 603 16.8 本章总结 605 第17章 asp.net ajax控件开发——服务端 606 17.1 asp.net ajax服务器控件概述 606 17.2 ajax服务器控件 607 17.2.1 ajax服务器控件 607 17.2.2 asp.net ajax扩展程序控件 612 17.3 asp.net ajax对服务器控件支持的基类 612 17.3.1 ajax控件支持的基类 612 17.3.2 ajax控件应用示例 623 17.4 本章总结 636 附录a .net 3.5技术教程系列——collection/asp.net ajax/ silverlight/jquery ...646
第1章 服务器控件概述及开发环境部署 .1 1.1 自定义服务器控件 1 1.2 服务器控件在软件开发过程中的作用 1 1.3 在控件开发中提升自己 2 1.4 可继承控件基类介绍 2 1.5 运行一个简单的控件 7 1.5.1 开发一个简单控件 7 1.5.2 部署和运行 11 1.6 控件生命周期 12 1.6.1 概述 12 1.6.2 用代码跟踪控件生命周期过程 14 1.7 本章总结 17 第2章 服务器控件开发中的调试技术 18 2.1 预置代码示例 18 2.2 调试页面服务端代码 19 2.3 服务器控件的调试 20 2.3.1 运行模式下的调试方法 20 2.3.2 设计模式下的调试方法 20 2.4 javascript脚本调试方法 22 2.4.1 调试页面中的javascript脚本(方法一) 22 .2.4.2 调试页面中的javascript脚本(方法二) 23 2.4.3 调试非嵌入式javascript脚本文件 23 2.4.4 调试嵌入式javascript脚本资源文件 24 2.4.5 高效率调试的技巧 24 2.5 ajax library对javascript调试支持 26 2.6 本章总结 26 第3章 从零开始开发服务器控件 27 3.1 选择基类 27 3.2 控件呈现顺序 28 3.3 render呈现控件的几种方式 30 3.3.1 使用htmltextwriter类输出 30 3.3.2 直接输出html标签 32 3.3.3 使用服务器控件的rendercontrol方法 33 3.4 addattributestorender方法 34 3.5 createchildcontrols方法 35 3.6 inamingcontainer接口 36 3.7 实现复合控件 38 3.7.1 createchildcontrols方法 39 3.7.2 childcontrolscreated属性 39 3.7.3 ensurechildcontrols方法 39 3.7.4 recreatechildcontrols方法 39 3.7.5 controls属性 40 3.7.6 hascontrols方法 40 3.7.7 hasevents方法 40 3.7.8 findcontrol方法 41 3.7.9 实现复合控件示例 41 3.8 常用开发技巧 51 3.8.1 designmode属性 51 3.8.2 屏蔽基类控件中的属性 52 3.8.3 page.request.browser属性 53 3.8.4 设置控件id规范 53 3.8.5 增强findcontrol功能 54 3.8.6 映射服务端控件值到客户端 55 3.8.7 禁止派生自compositecontrol的控件创建子控件 56 3.8.8 使用createchildcontrols的注意事项 56 3.8.9 不要误解设计元属性defaultvalue 57 3.8.10 在render方法中利用基类资源 57 3.8.11 件编译&件属性 60 3.9 本章总结 61 第4章 服务器控件属性 62 4.1 控件属性的作用 62 4.1.1 系统属性 62 4.1.2 自定义属性 62 4.2 简单属性 63 4.3 属性的设计特性 64 4.4 复杂属性 67 4.4.1 概述 67 4.4.2 复杂属性的几种标记形式 67 4.4.3 深入研究——复杂属性分析器 79 4.5 深入研究——定制自己的属性编辑器 85 4.5.1 系统属性编辑器 85 4.5.2 定制属性编辑器 91 4.6 类型转换器 126 4.6.1 系统类型转换器 126 4.6.2 定制自己的类型转换器 128 4.7 实现自定义属性 138 4.8 本章总结 145 第5章 事件和数据回发机制 146 5.1 控件事件和数据回发概述 146 5.1.1 事件及其意义 146 5.1.2 数据回发机制 147 5.2 事件和数据回发机制的实现 148 5.2.1 客户端回传事件接口ipostbackeventhandler 148 5.2.2 客户端回发/回调揭密 150 5.2.3 回传数据处理接口ipostbackdatahandler 153 5.2.4 正确处理继承基类中控件的事件 159 5.2.5 扩展kingtextbox控件功能(kingtextboxcanpostevent控件) 161 5.3 复合控件的事件处理机制
注意:由于文件大小为111MB,但本人的上传权限只有60MB,所以分开两部分压缩上传。解压前必须与part2一起解压。part2在本人的资源里可以找到:http://download.csdn.net/user/lxm0918 第1章 服务器控件概述及开发环境部署 .1 1.1 自定义服务器控件 1 1.2 服务器控件在软件开发过程中的作用 1 1.3 在控件开发中提升自己 2 1.4 可继承控件基类介绍 2 1.5 运行一个简单的控件 7 1.5.1 开发一个简单控件 7 1.5.2 部署和运行 11 1.6 控件生命周期 12 1.6.1 概述 12 1.6.2 用代码跟踪控件生命周期过程 14 1.7 本章总结 17 第2章 服务器控件开发中的调试技术 18 2.1 预置代码示例 18 2.2 调试页面服务端代码 19 2.3 服务器控件的调试 20 2.3.1 运行模式下的调试方法 20 2.3.2 设计模式下的调试方法 20 2.4 javascript脚本调试方法 22 2.4.1 调试页面中的javascript脚本(方法一) 22 .2.4.2 调试页面中的javascript脚本(方法二) 23 2.4.3 调试非嵌入式javascript脚本文件 23 2.4.4 调试嵌入式javascript脚本资源文件 24 2.4.5 高效率调试的技巧 24 2.5 ajax library对javascript调试支持 26 2.6 本章总结 26 第3章 从零开始开发服务器控件 27 3.1 选择基类 27 3.2 控件呈现顺序 28 3.3 render呈现控件的几种方式 30 3.3.1 使用htmltextwriter类输出 30 3.3.2 直接输出html标签 32 3.3.3 使用服务器控件的rendercontrol方法 33 3.4 addattributestorender方法 34 3.5 createchildcontrols方法 35 3.6 inamingcontainer接口 36 3.7 实现复合控件 38 3.7.1 createchildcontrols方法 39 3.7.2 childcontrolscreated属性 39 3.7.3 ensurechildcontrols方法 39 3.7.4 recreatechildcontrols方法 39 3.7.5 controls属性 40 3.7.6 hascontrols方法 40 3.7.7 hasevents方法 40 3.7.8 findcontrol方法 41 3.7.9 实现复合控件示例 41 3.8 常用开发技巧 51 3.8.1 designmode属性 51 3.8.2 屏蔽基类控件中的属性 52 3.8.3 page.request.browser属性 53 3.8.4 设置控件id规范 53 3.8.5 增强findcontrol功能 54 3.8.6 映射服务端控件值到客户端 55 3.8.7 禁止派生自compositecontrol的控件创建子控件 56 3.8.8 使用createchildcontrols的注意事项 56 3.8.9 不要误解设计元属性defaultvalue 57 3.8.10 在render方法中利用基类资源 57 3.8.11 件编译&件属性 60 3.9 本章总结 61 第4章 服务器控件属性 62 4.1 控件属性的作用 62 4.1.1 系统属性 62 4.1.2 自定义属性 62 4.2 简单属性 63 4.3 属性的设计特性 64 4.4 复杂属性 67 4.4.1 概述 67 4.4.2 复杂属性的几种标记形式 67 4.4.3 深入研究——复杂属性分析器 79 4.5 深入研究——定制自己的属性编辑器 85 4.5.1 系统属性编辑器 85 4.5.2 定制属性编辑器 91 4.6 类型转换器 126 4.6.1 系统类型转换器 126 4.6.2 定制自己的类型转换器 128 4.7 实现自定义属性 138 4.8 本章总结 145 第5章 事件和数据回发机制 146 5.1 控件事件和数据回发概述 146 5.1.1 事件及其意义 146 5.1.2 数据回发机制 147 5.2 事件和数据回发机制的实现 148 5.2.1 客户端回传事件接口ipostbackeventhandler 148 5.2.2 客户端回发/回调揭密 150 5.2.3 回传数据处理接口ipostbackdatahandler 153 5.2.4 正确处理继承基类中控件的事件 159 5.2.5 扩展kingtextbox控件功能(kingtextboxcanpostevent控件) 161 5.3 复合控件的事件处理机制 168 5.3.1 高效率事件集合对象 168 5.3.2 定制自己的委托和事件参数类 170 5.3.3 复合控件的事件处理 175 5.3.4 自动完成功能控件searchcontrolintelligent 185 5.4 本章总结 193 第6章 页面状态机制 194 6.1 页面状态概述 194 6.2 视图状态机制 195 6.2.1 istatemanager接口 195 6.2.2 控件生命周期中的装载和保存视图阶段 196 6.2.3 简单类型视图状态应用 197 6.2.4 实现自定义类型视图状态 205 6.3 控件状态机制 217 6.4 视图状态和控件状态的关系 221 6.4.1 在禁用视图状态的情况下仍然使用viewstate对象 221 6.4.2 istatemanager接口仍然可以在控件状态中使用 223 6.4.3 视图状态和控件状态组合使用规则 225 6.5 加密页面状态 225 6.6 清除页面状态 226 6.7 对动态添加控件的视图状态分析 228 6.8 自定义类型转换器实现高效率序列化 231 6.9 页面状态性能优化策略 238 6.9.1 存储位置优化——把视图状态信息保存在服务端而非客户端 238 6.9.2 体积优化——压缩视图状态数据 240 6.9.3 分块存储视图状态数据 243 6.10 视图状态和控件状态的总结 243 6.11 本章总结 244 第7章 定制自定义控件主题样式 245 7.1 控件样式概述 245 7.2 asp.net对样式的支持 245 7.2.1 style类的工作原理及使用 245 7.2.2 webcontrol基类对样式的支持功能及其工作原理 249 7.2.3 htmltextwriter类对控件样式的支持 252 7.2.4 定义控件内部的样式属性规则 253 7.2.5 两个常用转换方法 256 7.3 应用示例 260 7.3.1 复合控件样式及视图状态 260 7.3.2 控件结构与样式分离方案 268 7.4 本章总结 295 第8章 控件客户端编程模型 297 8.1 asp.net服务端控件对客户端的支持 297 8.2 clientscriptmanager类功能详解 301 8.2.1 registerarraydeclaration方法 301 8.2.2 registerclientscriptblock方法 302 8.2.3 registerclientscriptinclude方法 303 8.2.4 registerclientscriptresource方法 304 8.2.5 registerstartupscript方法 305 8.2.6 registerexpandoattribute方法 305 8.2.7 registerhiddenfield方法 306 8.2.8 getcallbackeventreference方法 307 8.2.9 getpostbackclienthyperlink方法 307 8.2.10 getpostbackeventreference方法 308 8.2.11 getwebresourceurl方法 308 8.2.12 registeronsubmitstatement方法 309 8.3 客户端回调 309 8.4 客户端控件应用示例 323 8.4.1 封装js客户端对象 323 8.4.2 封装htc客户端对象 343 8.4.3 在线签名控件示例应用 371 8.5 常用的一些javascript框架 385 8.6 本章总结 387 第9章 定制用户控件 388 9.1 用户控件概述 388 9.1.1 用户控件的作用.. 388 9.1.2 了解system.web.ui.usercontrol基类 388 9.2 用户控件应用示例 389 9.2.1 简单用户控件 389 9.2.2 复杂数据绑定用户控件 394 9.3 用户控件缓存 419 9.3.1 asp.net缓存介绍 419 9.3.2 用户控件缓存 420 9.4 本章总结 421 第10章 开发验证控件 422 10.1 验证控件的工作原理 422 10.1.1 内置验证控件简述 422 10.1.2 验证控件的工作机制解析 423 10.2 实现自定义验证控件 443 10.3 本章总结 451 第11章 在控件中使用嵌入资源 452 11.1 在控件中嵌入资源的原理 452 11.2 在控件中应用嵌入资源 453 11.2.1 在控件中使用嵌入资源 453 11.2.2 常用嵌入资源类型及用法 455 11.3 浏览器常用工具 460 11.3.1 httpwatch 460 11.3.2 ie develper toolbar 461 11.3.3 fiddler 461 11.4 本章总结 462 第12章 开发模板数据绑定控件 463 12.1 asp.net模板属性控件机制 463 12.1.1 模板属性介绍 463 12.1.2 asp.net对模板控件的支持 464 12.1.3 repeater控件模板实现机制解析 466 12.2 自定义控件应用示例 469 12.2.1 模板控件功能 469 12.2.2 应用示例 470 12.3 本章总结 489 第13章 数据绑定和数据源控件 490 13.1 数据绑定控件 490 13.1.1 数据绑定控件概述 490 13.1.2 asp.net对数据绑定控件的支持 491 13.2 数据绑定控件示例应用 501 13.2.1 控件实现功能 501 13.2.2 应用示例 502 13.3 数据源控件 508 13.3.1 数据源控件概述 508 13.3.2 asp.net对数据源控件的支持 508 13.4 数据源控件示例应用 515 13.4.1 控件实现功能 515 13.4.2 应用示例 516 13.5 本章总结 522 第14章 扩展控件方案——gridview 523 14.1 扩展控件概述 523 14.2 任意定制gridview多表头 523 14.2.1 功能概述 523 14.2.2 代码实现 524 14.3 固定gridview表头并增加滚动支持 527 14.3.1 功能概述 527 14.3.2 代码实现 528 14.4 本章总结 533 第15章 自定义控件设计模式下编程汇总 534 15.1 .net框架对设计支持 534 15.2 设计元数据支持 535 15.3 复杂属性序列化 539 15.4 类型转换器 539 15.5 属性编辑器 540 15.6 设计模式可用基类介绍 541 15.7 设计控件呈现的支持 543 15.7.1 概述 543 15.7.2 应用示例 543 15.8 自动套用格式 546 15.8.1 概述 546 15.8.2 应用示例 547 15.9 模板ui设计器 551 15.10 智能操作列表 552 15.10.1 概述 552 15.10.2 应用示例 552 15.11 控件设计器区域 558 15.11.1 概述 558 15.11.2 应用示例 558 15.12 本章总结 562 第16章 asp.net ajax控件开发——客户端 563 16.1 asp.net ajax框架概述 563 16.2 ajax library对客户端面向对象功能支持 564 16.2.1 命名空间及type和function类 565 16.2.2 接口类型 568 16.2.3 类类型以及面向对象继承特征 569 16.2.4 枚举类型 570 16.2.5 反射功能 570 16.3 ajax library中的常用类型 571 16.3.1 ajax library对javascript基类型的扩展 571 16.3.2 sys.stringbuilder类 576 16.4 ajax library请求服务端和webservices 577 16.4.1 sys.net命名空间中的类 577 16.4.2 请求过程解析 578 16.4.3 webrequest请求示例 579 16.4.4 使用代理实现ajax调用服务端示例 581 16.5 ajax library对控件客户端类开发的支持 584 16.5.1 客户端控件基成员(类/接口) 584 16.5.2 asp.net ajax控件客户端生命周期 589 16.6 客户端控件示例应用 592 16.7 调试和跟踪 603 16.8 本章总结 605 第17章 asp.net ajax控件开发——服务端 606 17.1 asp.net ajax服务器控件概述 606 17.2 ajax服务器控件 607 17.2.1 ajax服务器控件 607 17.2.2 asp.net ajax扩展程序控件 612 17.3 asp.net ajax对服务器控件支持的基类 612 17.3.1 ajax控件支持的基类 612 17.3.2 ajax控件应用示例 623 17.4 本章总结 636 附录a .net 3.5技术教程系列——collection/asp.net ajax/ silverlight/jquery ...646
非常感谢您的提问,这是一个比较复杂的项目,需要涉及到前端页面设计、后端逻辑开发以及数据库设计等多个方面。以下是我给出的一些参考思路,具体实现可能需要根据您的实际需求进行调整。 1. 页面设计 首先,需要设计一个表单页面,其中包含各个输入框、按钮等元素。可以使用 HTML 和 CSS 进行页面布局和样式设计,也可以使用现有的前端框架(如 Bootstrap)进行快速开发。 在输入框中添加提示内容可以使用 HTML 的 `placeholder` 属性,例如: ```html <input type="text" placeholder="请输入您的姓名"> ``` 清空输入框可以使用 JavaScript 中的 `value` 属性,例如: ```javascript let input = document.getElementById("name-input"); input.addEventListener("focus", function() { input.value = ""; }); ``` 2. 校验功能 根据要求,需要对密码、电话号码、邮箱等进行格式校验。可以使用正则表达式来判断输入是否符合要求。例如,判断密码是否符合要求可以使用以下代码: ```javascript let passwordInput = document.getElementById("password-input"); passwordInput.addEventListener("blur", function() { let password = passwordInput.value; let pattern = /^(?=.*[0-9])(?=.*[a-z])(?=.*[A-Z])(?=.*[@#$%^&+=]).{8,}$/; if (!pattern.test(password)) { alert("密码必须包含数字、大小写字母和特殊字符,且长度不少于8位。"); passwordInput.value = ""; } }); ``` 校验电话号码和邮箱可以使用类似的方法,例如: ```javascript let phoneInput = document.getElementById("phone-input"); phoneInput.addEventListener("blur", function() { let phone = phoneInput.value; let pattern = /^1[3-9]\d{9}$/; if (!pattern.test(phone)) { alert("请输入正确的电话号码。"); phoneInput.value = ""; } }); let emailInput = document.getElementById("email-input"); emailInput.addEventListener("blur", function() { let email = emailInput.value; let pattern = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/; if (!pattern.test(email)) { alert("请输入正确的邮箱地址。"); emailInput.value = ""; } }); ``` 3. 日期控件 可以使用现有的日期控件库(如 jQuery UI Datepicker)来实现日期选择功能。例如,在 HTML 中添加一个日期输入框: ```html <input type="text" id="birthdate-input"> ``` 然后在 JavaScript 中初始化日期控件: ```javascript $(function() { $("#birthdate-input").datepicker({ dateFormat: "yy-mm-dd" }); }); ``` 4. 地址联动选择 可以使用现有的地址选择器库(如 jQuery CitySelect)来实现地址联动选择功能。例如,在 HTML 中添加一个地址选择器: ```html <input type="text" id="address-input"> ``` 然后在 JavaScript 中初始化地址选择器: ```javascript $(function() { $("#address-input").citySelect(); }); ``` 5. 附件上传 可以使用 HTML5 中的 `input` 元素的 `type="file"` 属性来实现附件上传功能。例如,在 HTML 中添加一个附件上传输入框: ```html <input type="file" id="attachment-input"> ``` 然后在 JavaScript 中监听上传事件: ```javascript let attachmentInput = document.getElementById("attachment-input"); attachmentInput.addEventListener("change", function() { let file = attachmentInput.files[0]; let fileName = file.name; let fileExt = fileName.substr(fileName.lastIndexOf(".") + 1); let fileSize = file.size; let maxSize = 1024 * 1024; // 1MB if (fileSize > maxSize) { alert("附件大小不能超过1MB。"); attachmentInput.value = ""; } else { let fileInfo = `${fileName} (${fileExt})`; let fileInfoInput = document.getElementById("attachment-info-input"); fileInfoInput.value = fileInfo; } }); ``` 6. 跳转到登录页面 最后,在提交按钮上添加点击事件,跳转到登录页面: ```javascript let submitButton = document.getElementById("submit-button"); submitButton.addEventListener("click", function() { location.href = "login.html"; }); ``` 在登录页面中,可以使用类似的方式获取表单数据,并进行登录校验和处理。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值