找回密码
 立即注册

QQ登录

只需一步,快速开始

AlexZ 讲师达人认证 悬赏达人认证 SpreadJS 开发认证
超级版主   /  发表于:2023-5-26 17:21  /   查看:750  /  回复:0
本帖最后由 AlexZ 于 2023-6-15 14:35 编辑

背景
输入掩码是一串字符,它定义了用户期望的输入格式。屏蔽输入可减少数据出错的可能性,并有助于保持数据库的一致性,从而更容易分析和处理数据。您可以使用由模式、占位符、屏蔽字符等组成的用户生成规则来创建屏蔽。

输入掩码对于表单录入、单元格编辑是一个非常有用的特性。通过输入掩码将用户输入限制在一组格式中,确保数据完整性,同时防止输入错误,例如输入格式化的电话号码。该模式可以是字符串模式或日期模式,并且可以与公式结合使用以产生特定结果。

同时,相对于数据验证的功能,输入掩码在录入的同时就能帮助用户纠正输入错误,同时还具备格式提示的功能。
input-mask.gif

SpreadJS 提供了一个掩码属性和一个模式选项来设置输入掩码。您可以使用占位符选项来指定占位符。占位符是显示在输入字段中的一串字符,代表预期的输入格式,引导用户按照格式进行输入。如果用户没有指定占位符,SpreadJS 默认使用“_”。您可以使用excludePlaceholder选项选择是否在输入字符串中显示占位符。
例如,如果屏蔽模式为“000000”,“_”为占位符,则空白输入字段显示“______”以指示所需的 6 位格式。如果 excludePlaceholder 选项设置为 false(默认值)并且用户输入“1234”,则在退出编辑模式后输入将保存为“1234____”。当该选项为真时,输入存储为“1234”,即排除占位符。
image.png709628600.png

同样,您也可以通过将excludeLiteral设置为 true 来排除文字字符。文字是在特定位置显示的字符,不能被任何其他字符替换。电话号码中使用的括号和连字符或日期格式中的正斜杠就是几个例子。
以下代码显示了如何设置输入掩码:
image.png114383849.png

如果用户在光标位于占位符处时输入字符,则新字符将替换占位符字符。在其他情况下,插入新字符。如果用户输入与模式不匹配,SpreadJS 会从左到右保留与模式匹配的部分,并丢弃剩余的无效部分。但是,当用户删除某些文本时,它只会删除当前的限制内容。例如,在模式 'a{3}0{3}' 的情况下,如果用户从输入的最左边的字符开始删除,SpreadJS 允许删除当前限制的前三个字符。要删除剩余的输入,用户必须将光标放在下一个限制的开头。
为了确认模式是否有效,SpreadJS 提供了一个静态方法validatePattern。以下代码显示了如何使用 validatePattern 方法来验证模式:
image.png316867369.png

字符串模式
字符串模式是定义输入格式的最简单方法,它是使用最小模式单元构造的。最小模式单元由字符限制和可选的字符长度限制组成。当没有指定字符长度限制时,它被认为是一个字符。下表定义了使用这两种类型的限制创建模式的各种规则。

限制类型类别图案字符解释样本模式显示('_'作为占位符)输入输出
字符长度字符A字符aaa___abcabc
>字母自动转换为大写>_AA
><<<<_____chrisChris
<字母自动转换为小写<_AA
数字0数字 (0-9)0___123123
___1212_
可选的()大括号 () 中的任何字符串都应该匹配。0{1,3}(千克|磅)_ 公斤12k12公斤
|字符串之间的分隔符。在大括号 () 中使用。braces() 中的字符是静态字符串;大括号内不需要转义字符。Aut\\horChris|Icey|Victor|Ian)
or
(Author)Chris|Icey|Victor|Ian)
Author:ChrisVAuthor:Victor
[]将关键字和文字组合为一个整体。[>0]{5}_____a7osnA7OSN
-表示字符范围。在方括号 [] 内使用。[\\a-f]_bb
特殊字符\(构造模式字符串时应使用“\\”)转义字符0\>0_>_323>2
#任何角色###___a1&a1&
字符长度限制动态的{n}"n" 次重复0{4}/0{2}/0{2}____/__/__202301012023/1/1
{n,m}最小“n”次和最大“m”次重复0{1,3}.0{1,3}.0{1,3}.0{1,3}_._._._1270.0.1127.0.0.1
[\\01]{0,}
10101010
{,m}最多重复“m”次0{,3}
123123
{n,}最少“n”次重复0{1,}.0{2}_.__1234.561234.56

在动态模式中:
  • 占位符仅代表所需的最小长度。例如:0{2,10} 显示“__”,0{0,1} 什么都不显示。
  • 如果未指定“m”,则动态模式的最大长度为 2147483648。


日期模式
日期模式是一种指定日期和时间值格式的方法。它是固定格式模式,不接受字符长度限制。对于日期模式,SpreadJS 会根据日期规则自动修复用户输入。但是,您不得在单个模式中重复日期时间项,例如 yyyy、MM 等。例如,“ yyyy/MM/dd yyyy ”是无效模式,因为“yyyy”被使用了两次。
下表描述了日期模式的各种掩码字符及其在示例模式帮助下的用法。

Pattern CharacterDescriptionSample PatternDisplay '_' as placeholderUser InputOutput
yYearsyy/MM/dd__/__/__233172023/3/17
yyyy/MM/dd____/__/__20233172023/3/17
MMonthsyyyy/M/dd____/_/__20233172023/3/17
yyyy/MM/dd____/__/__20233172023/3/17
dDaysyyyy/MM/d____/__/_2023372023/3/7
yyyy/MM/dd____/__/__2023372023/3/7
H24 HoursHH:mm:ss__:__:__227722:07:07
H:mm:ss_:__:__5775:07:07
h12 Hourshh:mm:ss (am|pm)__:__:__ am277 p2:07:07 下午
h:mm:ss (pm|am)_:__:__ pm277 a2:07:07 上午
mMinutesHH:mm:ss__:__:__227722:07:07
HH:m:ss__:_:__227722:07:07
sSecondsHH:mm:ss__:__:__227722:07:07
HH:mm:s__:__:_227722:07:07
tHour Formathh:mm:ss t__:__:__ A2277p22:07:07 P
hh:mm:ss tt__:__:__ AM2277p22:07:07 PM

命名模式
您还可以定义命名模式并在其他模式中重用它们。但是,如果模式中有一个字符串与 namedPatterns 中的任何名称匹配,则掩码会将其替换为命名模式。因此,建议使用具有最小重复机会的名称来定义模式。为了获取所有名称模式的列表,SpreadJS 提供了一个静态方法getNamedPatterns
image.png193449706.png

公式模式
SpreadJS 还支持公式模式,即以公式形式出现的以“=”开头的模式。例如,如果工作表的单元格 A1-A3 的作者姓名为“Chris”、“Icey”和“Ian”,则以下两种模式会给出相同的结果。
Formula PatternEquivalent Pattern
'="Aut\\hor"&TEXTJOIN("|",TRUE,A1:A3)&")"''Aut\\horChris|Icey|Ian)'

确认模式是否有效的静态方法 validatePattern 不支持公式模式
要评估公式模式,请在调用 validatePattern 方法之前使用GC.Spread.Sheets.CalcEngine.evaluateFormula
示例模式下表列出了常用的模式以供快速参考:
案件模式或选项展示输入输出
电子邮件[a0]{1,}@[a0]{1,}.(com|cn|gov|edu)_@_.comchris@grapecity.echris@grapecity.edu
姓名><{1,} ><{1,}__ __chris diaoChris Diao
长日期dd-MM-yyyy HH:mm__-__-____ __:__1672023162016-07-2023 16:20
短期约会日-月-年__-__-____167202316-07-2023
验证码[>0]{5}_____a7osnA7OSN
十进制数[\-]{,1}0{0,}[.]{,1}0{0,}
-12.34-12.34
12.3412.34
二进制数[\\01]{0,}
1010110101
美国电话号码[\\(]0{3}[\\)][-]0{3}[-]0{4}(___)-___-____1234567890(123)-456-7890

0 个回复

您需要登录后才可以回帖 登录 | 立即注册
返回顶部