发布于2026-07-22 阅读(0)
扫一扫,手机访问
在日常开发中,文本输入框的输入限制是个很常见的需求。Flex 的 TextInput 组件提供了一个非常实用的属性——restrict,它能在输入阶段就帮我们过滤掉不该出现的字符,省去后续的校验麻烦。今天就来详细聊聊它的用法,顺便看看一些容易踩坑的细节。
如果你想禁止用户输入某些字符,可以用 ^ 符号跟上要限制的字符列表。比如,限制输入波浪号 ~:
如果想同时限制多个字符,比如禁止输入 a 和 b:
反过来,你也可以直接列出允许输入的字符。比如只允许输入 a、b、c:
字符范围可以用 - 表示,比如只允许小写字母:
如果要同时允许小写字母、大写字母和数字,就是:
实际开发中,我们经常需要允许数字和某个特殊符号。比如只允许输入数字和点号 .:
注意,点号需要用反斜杠转义。同样,允许数字和正负号 +、-:
还有一种更灵活的组合:比如只允许输入除了 a 和 b 之外的所有小写字母。这相当于先允许小写字母范围,再用 ^ 排除:
如果想允许数字、英文字母和汉字,可以这样写(注意中文字符的 Unicode 范围):
下面列举几个最常见的用法,直接复制过去就能用。
场景1:纯数字输入框——限制只能输入0~9,同时限制最大长度20个字符:
这样,用户想输入字母都输不进去,后端根本不需要再校验。
场景2:允许数字和小数点——比如金额输入:
注意,小数点前面必须加反斜杠,否则会被当作范围符号处理。
场景3:允许数字和某些字母——比如允许0~9以及字母a、b:
场景4:只允许小写英文字母:
这里 - 表示区间,如果要输入 - 本身,必须转义为 \-。
使用 restrict 有一个很大的好处:它在前端输入阶段就完成了过滤,后续根本不需要再写正则校验。比如限制为 restrict="0-9",那么输入框里永远不可能出现非数字字符,校验逻辑自然省掉了。
另外,还可以结合 maxChars 属性控制最大字符数。例如,一个输入框只允许输入数字、正负号,且最多4个字符:
关于大小写的问题:restrict 属性是区分大小写的。如果设为 abc,那么用户输入大写 A 时,会自动被转为小写 a 输入;反之亦然。不过要注意,这个属性只影响用户的手动输入,通过脚本设置的文本不受限制。
最后,如果字符本身具有特殊含义(比如 -、^、\),需要用反斜杠转义。例如允许数字和反斜杠:
或者使用 Unicode 转义序列来指定允许的内容,比如禁止所有控制字符。这些技巧在需要精细控制输入时非常有用。
总结一下:restrict 是 Flex 开发中一个轻量又高效的输入过滤工具,用好它,能让你的代码少写很多校验,也让用户输入体验更流畅。下次遇到类似需求,不妨试试它。
售后无忧
立即购买>office旗舰店
售后无忧
立即购买>office旗舰店
售后无忧
立即购买>office旗舰店
售后无忧
立即购买>office旗舰店
正版软件
正版软件
正版软件
正版软件
正版软件
1
2
3
7
8