ARTICLE DETAIL

资讯详情

深耕郑州网站建设与运营推广的一线实战洞察。

Flet InputFilter 输入过滤器实战:用正则表达式精确约束 TextField 输入

Flet InputFilter 输入过滤器实战:用正则表达式精确约束 TextField 输入 前端跨平台桌面应用移动开发【免费下载链接】fletBuild realtime web, mobile and desktop apps in Python only. No frontend experience required.项目地址https://gitcode.com/gh_mirrors/fl/flet点击查看免费下载在 Flet 中InputFilter是一套面向文本输入控件的即时过滤/校验机制它利用正则表达式在用户键入的瞬间拦截非法字符或非法格式实现输入即约束。无论是让手机号输入框只接受数字、让用户名输入框只接受字母还是把粘贴进来的非法内容自动替换为合法字符都可以通过给TextField、CupertinoTextField等控件设置input_filter属性完成。读完本文你将掌握flet.InputFilter的全部参数语义、两个内置预定义过滤器NumbersOnlyInputFilter、TextOnlyInputFilter的用法以及它背后的 Flutter 层实现原理。本文内容以 inputfilter.md 为骨架并深入当前仓库的 Python 侧定义与 Flutter 侧实现进行补充说明。InputFilter 是什么从源码看InputFilter定义在 textfield.py 中官方类注释将其描述为An input filter that uses a regular expression to allow or deny/block certain patterns in the input.即一个用正则表达式来允许或拒绝/阻断输入中特定模式的过滤器。它通过TextField.input_filter属性见 textfield.py挂载到文本输入控件上提供逐键as-you-type的过滤与校验input_filter: Optional[InputFilter] None Provides as-you-type filtering/validation. Similar to the on_change callback, the input filters are not applied when the content of the field is changed programmatically. 需要特别留意源码中的这条说明过滤器只在用户键入时生效当字段内容被程序化修改programmatically时过滤器不会应用这一点与on_change回调的行为类似。参数详解六个字段控制过滤行为InputFilter是一个value修饰的数据类共包含六个字段全部定义在 textfield.py参数类型默认值说明regex_stringstr必填过滤用的正则表达式模式。官方建议使用原始字符串前缀r如rpatternallowboolTrue匹配到的模式是允许还是拒绝/阻断replacement_stringstr用于替换被禁止/阻断模式的字符串multilineboolFalse正则是否匹配多行。为True时^和$匹配每行的行首行尾为False时匹配整个输入的起始与结束位置case_sensitiveboolTrue正则是否区分大小写unicodeboolFalse正则是否使用 Unicode 模式dot_allboolFalse正则中的.是否匹配换行符行终止符其中dot_all与multiline作用于不同的模式字符两者互不影响可以单独使用也可以组合使用WhenFalse, the.character matches a single character, unless that character terminates a line. WhenTrue, then the.character will match any single character including line terminators.参数语义速查allowTrue默认输入文本整体必须匹配regex_string否则整个新输入被拒绝即白名单语义只放行匹配的文本。allowFalse凡是匹配到regex_string的内容都被视为非法然后使用replacement_string将其替换即黑名单语义用于剥离非法字符。内置预定义过滤器为避免重复编写常见正则仓库在 textfield.py 中内置了两个开箱即用的过滤器且均已通过 textfield.py 的模块导出列表对外暴露可直接通过ft.前缀使用class NumbersOnlyInputFilter(InputFilter): Allows only numbers. def __init__(self): super().__init__(regex_stringr^[0-9]*$, allowTrue, replacement_string) class TextOnlyInputFilter(InputFilter): Allows only text. def __init__(self): super().__init__(regex_stringr^[a-zA-Z]*$, allowTrue, replacement_string)NumbersOnlyInputFilter正则r^[0-9]*$只允许数字TextOnlyInputFilter正则r^[a-zA-Z]*$只允许英文字母a-z、A-Z。可以看到两个预定义过滤器本质上都是allowTrue的白名单式过滤——输入必须是完全由数字或字母组成的字符串否则键入被拒绝。注意TextOnlyInputFilter的正则只包含 ASCII 字母不包含空格、数字和标点也不含中文等多字节字符需要更宽松约束时请自行构造InputFilter。使用示例示例一只允许数字输入CupertinoTextField来自 inputfilter.md 的官方示例使用CupertinoTextField配合显式构造的InputFilterft.CupertinoTextField( placeholder_textOnly numbers are allowed, input_filterft.InputFilter(allowTrue, regex_stringr^[0-9]*$, replacement_string) )这里allowTrue、正则r^[0-9]*$的效果是用户输入的文本必须整体是零个或多个数字任何非数字字符的键入都会被即时拒绝。示例二只允许字母输入TextField官方示例同样展示了在 Material 风格TextField上直接使用预定义过滤器ft.TextField( labelOnly letters are allowed, input_filterft.TextOnlyInputFilter() )TextOnlyInputFilter()无需任何参数其内部已自带r^[a-zA-Z]*$正则。底层原理Flutter 侧的 CustomFilteringTextInputFormatterinput_filter属性最终会映射到 Flutter 的TextInputFormatter机制。在 utils/textfield.dart 中Flet 定义了parseInputFilter解析函数与CustomFilteringTextInputFormatter类该类继承自 Flutter 框架自带的FilteringTextInputFormatterfactory CustomFilteringTextInputFormatter.fromMap(Mapdynamic, dynamic value) { final pattern RegExp( value[regex_string]?.toString() ?? , multiLine: parseBool(value[multiline], false)!, unicode: parseBool(value[unicode], false)!, caseSensitive: parseBool(value[case_sensitive], true)!, dotAll: parseBool(value[dot_all], false)!, ); return CustomFilteringTextInputFormatter._(pattern, allow: parseBool(value[allow], true)!, replacementString: value[replacement_string]?.toString() ?? ); }可以看到Python 侧InputFilter的六个字段被逐一序列化为 map 键regex_string、multiline、unicode、case_sensitive、dot_all、allow、replacement_string与上一节参数表一一对应。随后构造出的RegExp选项也直接由multiline、unicode、case_sensitive、dot_all驱动。formatEditUpdate是每次编辑键入、粘贴、IME 输入时都会被调用的核心钩子其逻辑是命中即放行、否则整体拒绝override TextEditingValue formatEditUpdate( TextEditingValue oldValue, TextEditingValue newValue) { // Check if the new value matches the regex pattern and return it if it does if (_pattern.hasMatch(newValue.text)) { return newValue; } return oldValue; }即当newValue.text匹配正则时返回新值接受本次编辑否则返回oldValue回退到旧值拒绝本次编辑。过滤器在哪些控件上生效input_filter不仅适用于 Material 风格TextField从当前仓库的 Dart 源码看同样支持TextFieldtextfield.dart 中读取input_filter并将其加入inputFormatters列表CupertinoTextFieldcupertino_textfield.dart 中同样读取并加入inputFormattersDropdowndropdown.dart 在可编辑下拉场景中也会应用inputFilter。三者均通过control.getTextInputFormatter(input_filter)解析最终交给 Flutter 的TextInputFormatter管线执行。进阶灵活构造自定义过滤器官方内置的两个过滤器只是数字/字母白名单这一种形态。借助allow与replacement_string的组合你可以构造更多实用模式例如拒绝并替换特定字符黑名单禁止用户输入符号一旦出现就用_替换ft.TextField( labelNo allowed, input_filterft.InputFilter( regex_stringr, allowFalse, replacement_string_, ) )自定义白名单只允许数字与横线如电话号码、订单号ft.TextField( labelDigits and dashes only, input_filterft.InputFilter( regex_stringr^[0-9\-]*$, allowTrue, replacement_string, ) )需要说明的是replacement_string与allowFalse的替换行为最终交由 Flutter 框架的FilteringTextInputFormatter处理逐字符替换匹配到的非法片段而allowTrue时replacement_string通常留空即可。使用注意事项仅作用于用户键入input_filter是即时过滤程序化修改字段内容例如在代码中直接赋值value不会经过过滤器校验这一点在 textfield.py 的文档注释中有明确说明。白名单需整体匹配allowTrue时正则必须覆盖整个输入串典型写法是^...$锚定否则编辑会被拒绝。预定义过滤器正是采用r^[0-9]*$、r^[a-zA-Z]*$这种整体锚定写法。正则写法建议构造InputFilter时推荐使用 Python 原始字符串r...避免\d、\s等反斜杠序列被转义破坏。非输入校验替代品input_filter解决的是输入过程中不让非法内容进来如果需要在提交时校验合法性并给出错误提示应配合TextField的error_text、on_submit等校验机制使用两者是互补关系。参考路径类型文档website/docs/types/inputfilter.mdPython 侧类定义与预定义过滤器sdk/python/packages/flet/src/flet/controls/material/textfield.py#L190-L266Flutter 侧解析与实现packages/flet/lib/src/utils/textfield.dart#L6-L46TextField 应用过滤器packages/flet/lib/src/controls/textfield.dart#L182-L189CupertinoTextField 应用过滤器packages/flet/lib/src/controls/cupertino_textfield.dart#L187-L189赞分享前端跨平台桌面应用移动开发【免费下载链接】fletBuild realtime web, mobile and desktop apps in Python only. No frontend experience required.项目地址https://gitcode.com/gh_mirrors/fl/flet点击查看免费下载相关推荐ALTCHA革命性GDPR合规验证码替代方案如何彻底告别传统CAPTCHA烦恼ALTCHA革命性GDPR合规验证码替代方案如何彻底告别传统CAPTCHA烦恼 在当今数字化时代网站安全与用户体验之间的平衡一直是开发者面临的重大挑战。Nuclide任务输出过滤规则正则表达式与关键词Nuclide任务输出过滤规则正则表达式与关键词 在日常开发中你是否经常被大量的任务输出信息淹没难以快速定位关键内容Nuclide作为一款基于Atom的开发工具ReLLM用正则表达式精确控制语言模型输出ReLLM用正则表达式精确控制语言模型输出 项目介绍 在自然语言处理领域语言模型LLM的输出往往充满了不确定性难以精确控制。然而ReLLM项目的出现创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表