首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

即使在插入值之后,TextFormField也会显示错误消息(使用表单颤动)

TextFormField是Flutter框架中的一个小部件,用于在表单中创建一个文本输入字段。它可以用于接收用户的输入,并进行验证和错误处理。即使在插入值之后,TextFormField也会显示错误消息,这是因为它具有表单颤动的功能。

表单颤动是一种用户界面设计技术,用于在用户提交表单时,对输入字段进行验证并显示错误消息。当用户尝试提交表单时,如果某个字段的值不符合预期,表单颤动会将该字段标记为错误,并显示相应的错误消息。

TextFormField的错误消息可以通过设置validator属性来定义。validator是一个回调函数,它接收用户输入的值作为参数,并返回一个字符串,表示错误消息。如果返回的字符串为空,则表示输入有效,没有错误消息显示。

下面是一个示例代码,演示了如何在TextFormField中使用表单颤动来显示错误消息:

代码语言:txt
复制
String _errorMessage;

Widget build(BuildContext context) {
  return Form(
    child: Column(
      children: [
        TextFormField(
          validator: (value) {
            if (value.isEmpty) {
              return '该字段不能为空';
            }
            return null;
          },
          onChanged: (value) {
            setState(() {
              _errorMessage = null;
            });
          },
        ),
        if (_errorMessage != null)
          Text(
            _errorMessage,
            style: TextStyle(color: Colors.red),
          ),
        RaisedButton(
          onPressed: () {
            if (Form.of(context).validate()) {
              // 表单验证通过,可以提交数据
            } else {
              setState(() {
                _errorMessage = '请修复表单中的错误';
              });
            }
          },
          child: Text('提交'),
        ),
      ],
    ),
  );
}

在上面的代码中,TextFormField的validator回调函数检查输入值是否为空,并返回相应的错误消息。当用户输入发生变化时,onChanged回调函数会清除错误消息。在提交按钮被点击时,通过Form.of(context).validate()方法来触发表单验证。如果验证通过,可以执行提交操作;否则,会将错误消息赋值给_errorMessage变量,并在界面上显示出来。

腾讯云提供了一系列与云计算相关的产品,包括云服务器、云数据库、云存储等。具体推荐的产品和产品介绍链接地址可以根据具体需求和场景来选择,可以参考腾讯云官方文档或咨询腾讯云的客服人员获取更详细的信息。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Flutter Form表单控件超全总结

FormField FormField是一个表单控件,此控件包含表单的状态,方便更新UI,通常情况下,我们不会直接使用FormField,而是使用TextFormField。...validator验证函数,输入的不匹配的时候返回的字符串显示TextField的errorText属性位置,返回null,表示没有错误。...使用Form的时候需要设置其key,通过key获取当前的FormState,然后可以调用FormState的save、validate、reset等方法,一般通过如下方法设置: final _formKey...,此方法会调用每一个FormField的validator回调,此回调需要字符串表示数据验证不通过,将会在改表单显示返回的字符串,具体可查看下TextFormField介绍。...当然我非常希望您关注我个人的公众号,里面有各种福利等着大家哦。

3.1K00

Flutter Form表单控件超全总结

FormField FormField是一个表单控件,此控件包含表单的状态,方便更新UI,通常情况下,我们不会直接使用FormField,而是使用TextFormField。...validator验证函数,输入的不匹配的时候返回的字符串显示TextField的errorText属性位置,返回null,表示没有错误。...使用Form的时候需要设置其key,通过key获取当前的FormState,然后可以调用FormState的save、validate、reset等方法,一般通过如下方法设置: final _formKey...,此方法会调用每一个FormField的validator回调,此回调需要字符串表示数据验证不通过,将会在改表单显示返回的字符串,具体可查看下TextFormField介绍。...我们希望用户输入表单时点击返回按钮提示用户"确认退出吗?"

2.1K20

Flutter 入门指北之输入处理(登录界面实战)

}, child: Text('获取输入内容'))), // 展示输入的内容,点击按钮显示...,但是还有个更加方便的方法,可以直接使用部件 TextFormField 来实现,不过需要我们在外层加一个 Form 部件,接下来,就要准备通过 TextFormField 来撸一个登录界面,但是这之前...,不知道的小伙伴通过链接打开,然后需要注册个账户,可以直接通过 Github 等三方登录,然后就可以搜索我们需要的图标了,接下来需要撸一个登录,那我们就找一个 用户 和 密码 的图标吧,选择喜欢的图标...好在有很多现成的插件已经开源,可以通过 FlutterPackage 搜索到,例如等我们需要用到 FlutterToast 这个插件,用来做提醒用, FlutterPackage 中搜索到插件后,...的 validator的条件不符合,则会显示错误文字的提示 ?

1.9K50

Play For Scala 开发指南 - 第8章 用户界面

</h1> ()用于插入单行代码,插入结果为当前表达式的;而{}用于插入多行代码,插入结果为最后一行表达式的。 由于模板文件参与编译过程,并且是类型安全的,所以编译器帮你拦住大部分错误。...层使用模板页面, Service 层一样可以使用。...大家可能觉得奇怪,没有了上下文,模板中如何获取当前的请求呢?答案很简单:通过参数传递喽!利用Scala的隐式参数的特性,调用模板函数时不需要显示传入,编译器自动传入。...@defining(user.firstName + " " + user.lastName) { fullName =>   你好 @{fullName} } 使用函数可以实现可重用...message 错误消息提示或错误消息对应的key。 args 用于填充错误消息的参数。 Form.globalErrors包含在Form.errors中,其key为空,无对应的表单项。

1.5K20

HTML 表单和约束验证的完整指南

即使这样做,不能保证浏览器验证数据。任何知道如何打开浏览器开发工具的人可以绕过您精心制作的 HTML 和 JavaScript。...例如: 尝试提交空阻止表单提交并在 Chrome 中显示以下消息: 微调器不允许 1 到 100...第一次提交后或更改显示验证错误将提供更好的体验。...你可以: 停止验证,直到用户与字段交互或提交表单 使用自定义样式显示错误消息 提供仅在 HTML 中无法实现的自定义验证。...表单验证 使用 API 之前,您的代码应该通过将表单的noValidate属性设置为true(与添加novalidate属性相同)来禁用默认验证和错误消息: const myform = document.getElementById

8.2K40

JavaScript(十三)

重置表单时,所有表单字段都会恢复到页面刚加载完毕时的初始。如果某个字段的初始为空,就会恢复为空; 而带有默认的字段,恢复为默认。...用户单击重置按钮重置表单时,触发 reset 事件,利用这个机会,我们可以必要时取消重置操作。 表单字段 可以像访问页面中的其他元素一样,使用原生 DOM 方法访问表单元素。...浏览器自己根据标记中的规则执行验证,然后自己显示适当的错误消息(完全不用 JavaScript 插手)。 只有某些情况下表单字段才能进行自动验证。...如果所有表单字段都有效,这个方法返回 true,即使有一个字段无效,这个方法返回 false。...即使 value 特性的是空字符串,同样遵循此条规则 如果有一个选中项,但该项的 value 特性 HTML 中未指定,则选择框的 value 属性等于该项的文本 如果有多个选中项,则选择框的 value

3.3K20

Flutter | 常用组件

,样式如下: 字体 flutter 中使用字体需要两个步骤,首先是 pubspec.yaml文件中声明,然后通过 textStyle 属性使用字体 flutter: fonts:...,使用 FadeInImage 之后会在图片的加载过程中显示一个占位符,图片加载完成之后显示淡入 ICON Flutter 中,可以直接使用 字体图标,它是将图标做成字体文件,然后通过指定不同的字符而现实不同的图片...因此,我们自定义组件是应该思考一下那种方式最为合理 输入框和表单 Material 组件库中提供了输入框组件 TextField 和表单组件 From ,下面来具体看一下 TextField 用于文本输入...,//TODO 这里设置的不生效,日后解决 表单 Form 实际开发中,在请求接口之前会对输入框中的数据进行校验,如果对每个 TextField 都进行校验非常麻烦,为此,Flutter 提供了一个...}) 复制代码 为了方便使用,Flutter 提供了一个 TextFormField 组件,他继承自 FormField 类,也是一个包装类,所以除了 FormField 之后,它还包括 TextField

11.4K30

《Flutter》-- 4.Flutter组件基础

Flutter中Widget不仅可以表示UI元素,可以布局元素、动画、装饰效果。 Widget不是最终显示设备屏幕上的显示元素,而是一个描述显示元素的配置数据。...当创建一个StatefulWidget组件时,同时创建一个State对象,StatefulWidget就是通过与State对象进行关联来管理组件状态树的。...initState():状态组件被插入视图树时调用,状态组件的生命周期中只被调用一次。...; BoxFit.cover:默认填充规则,保证长宽比不变的情况下缩放以适应当前显示空间,图片不会变形; BoxFit.fitWidth:从宽度上充满空间,高度按比例缩放,图片不会变形,超出显示空间部分会被剪裁...表单组件由FormField及其子类构成,最常用的表单组件有DropdownButtonFormField和TextFormField两个。

12.4K30

Spread for Windows Forms高级主题(8)---通过暂停布局提高性能

如果你一个代码块中对表单做了大量的变动,使用SuspendLayout方法可以避免控件每一次变动发生时对布局对象所做的多余的中间计算,在所有变动完成之后使用ResumeLayout(true)方法重新计算布局对象...,控件显示一个通知“布局处于暂停状态”。...这些只会在使用SuspendLayout方法暂停布局时才会发生,然后对控件状态所做的改变会生效,控件以某种方式使用非法的布局对象进行再次绘制。...可能存在这样的异常,它导致上述消息显示,但却与暂停布局无关;例如,IRenderer.PaintCell方法调用过程中由自定义单元格类型对象抛出的异常。...即使布局被暂停,Spread控件仍然可以使用之前的正确布局信息来绘制控件;但之后Spread控件可能产生不可预知的情况,例如,当你想要滚动页面而控件却没有反应,也没有显示异常通知。

1.7K60

Flutter TextField详解

以上就是图标的介绍,其实除了图标之外,对应的位置可以显示文字或者自定义显示其他widget 比如出了prefixIcon之外还有其他3个属性,用法跟上面介绍到的自定义计数器是一样的。...labelText,聚焦之后显示hintText,所以labelText是可以取代hintText的。...helperStyle: TextStyle(color: Colors.blue) ), ), 一直显示左下方...regExp.hasMatch(value)) { return "手机号格式不正确"; } return null; } 以上只是我们一般的校验,表单的话还是建议使用...From包裹TextFormField 异常 软键盘弹出之后遮盖 软键盘弹出之后高度溢出 解决办法:用滑动组件包裹起来(ListView等),这样软键盘弹出的时候,输入框自动向上滑。

4K40

flask web开发实战 入门 pdf_常用的web开发框架

然后我们使用route()装饰器告诉Flask应该触发我们的函数的URL。 该函数被赋予一个名称,该名称用于为该特定函数生成URL,并返回我们想要在用户的浏览器中显示消息。...test_request_context()告诉Flask,即使我们使用Python shell,它也像处理请求一样行事。...同样,OPTIONS自动为您实施。 为了演示URL路由中使用POST方法,首先让我们创建一个HTML表单,并使用POST方法将表单数据发送到URL。 将以下脚本另存为login.html <!...Flask中,对响应对象设置cookie的方法: 使用make_response()函数从视图函数的返回获取响应对象。之后使用响应对象的set_cookie()方法来存储cookie。...如果出现错误,则会重新显示登录模板,并显示错误消息

7.1K10

小白Java从入门到放弃

(2)数据格式 1)请求数据包 a,请求行:请求方式 请求资源路径 协议类型和版本 b,若干消息头: 一般是由w3c定义的一些健对,浏览器与web服务器之间可以通过发送这些消息头来传递一些特定的信息...200: 正确 500: 系统错误 404: 依据请求地址找不到对应的资源 b,若干消息头 服务器可以发送一些消息头给浏览器,比如,"content-type"消息头,告诉浏览器服务器返回的数据类型...2)get请求的特点 a,会将请求参数添加到请求资源路径的后面,只能提交少量的数据(因为请求行最多只能存放大约2k左右的数据) b,会将请求参数显示浏览器地址栏,不安全,比如,路由器记录请求地址...b,不会将请求参数显示浏览器地址栏,相对安全(要注意,不管是什么请求,都不会对请求数据加密,一般使用https协议)。 3,servlet如何输出中文?...当表单提交时,浏览器检查请求参数值,如果是中文,按照打开该表单所在的页面时的字符集来编码(比如,按照"utf-8"来编码)。服务器默认情况下,会使用"iso-8859-1"来解码。

94260

Java从入门到放弃

(2)数据格式 1)请求数据包 a,请求行:请求方式 请求资源路径 协议类型和版本 b,若干消息头: 一般是由w3c定义的一些健对,浏览器与web服务器之间可以通过发送这些消息头来传递一些特定的信息。...200: 正确 500: 系统错误 404: 依据请求地址找不到对应的资源 b,若干消息头 服务器可以发送一些消息头给浏览器,比如,"content-type"消息头,告诉浏览器服务器返回的数据类型。...,只能提交少量的数据(因为请求行最多只能存放大约2k左右的数据) b,会将请求参数显示浏览器地址栏,不安全,比如,路由器记录请求地址。...b,不会将请求参数显示浏览器地址栏,相对安全(要注意,不管是什么请求,都不会对请求数据加密,一般使用https协议)。 3,servlet如何输出中文?...当表单提交时,浏览器检查请求参数值,如果是中文,按照打开该表单所在的页面时的字符集来编码(比如,按照"utf-8"来编码)。服务器默认情况下,会使用"iso-8859-1"来解码。

91350

AngularDart4.0 指南- 表单

使用跟踪控件状态的特殊CSS类提供视觉反馈。 向用户显示验证错误并启用/禁用表单控件。 使用模板引用变量HTML元素之间共享信息。 您可以Plunker中运行实例(查看源代码)并从那里下载代码。...显示和隐藏验证错误消息使用ngSubmit处理表单提交。 禁用窗体的提交按钮,直到窗体有效。 建立 按照设置说明创建一个名为表单的新项目。...每个input元素都有一个ngControl指令,Angular表单需要用这个指令表单上注册控件。 如果您现在运行应用程序并更改每个英雄model属性,表单可能显示如下: ?...显示错误消息。 您可以通过根据名称控制的状态设置的隐藏属性来控制错误消息的可见性。...如果您忽略原始状态,则只有有效时才会隐藏该消息。 如果您使用新(空白)英雄或无效英雄到达此组件,则在您执行任何操作之前,您将立即看到错误消息

17.4K30

Flask表单之WTForms和flask-wtf

当浏览器向服务器提交表单数据时,通常会使用POST请求(实际上用GET请求可以,但这不是推荐的做法)。之前的“Method Not Allowed”错误正是由于视图函数还未配置允许POST请求。...不过,一旦有任意一个字段未通过验证,这个实例方法就会返回False,引发类似GET请求那样的表单的渲染并返回给用户。稍后我会在添加代码以实现在验证失败的时候显示一条错误消息。...flash()函数是向用户显示消息的有效途径。 许多应用使用这个技术来让用户知道某个动作是否成功。我将使用这种机制作为临时解决方案,因为我没有基础架构来真正地登录用户。...如果你尝试过提交无效的数据,相信你注意到,虽然验证机制查无遗漏,却没有给出表单错误的具体线索。下一个任务是通过验证失败的每个字段旁边添加有意义的错误消息来改善用户体验。....errors来渲染错误信息。 一个字段的验证错误信息结果是一个列表,因为字段可以附加多个验证器,并且多个验证器都可能提供错误消息显示给用户。

3.9K20

富Web应用的架构与转化方法:Web应用系列第二篇

快速入门演示了使用jQuery注册新成员时显示消息。 如何在页面上放置一个组件,例如列出当前库存的表格,并在库存发生变化时自动更新,即使库存交易不是来自你? 使用RichFaces推送。...有关上面代码段的注意事项: 使用一些jQuery逻辑输出Javascript,以根据事件的内容显示消息。...如果字段参与Ajax表单提交,则进行验证。 快速入门使用客户端验证,使用JSF页面中的标记和相应成员实体bean属性上的JSR-303 bean验证注释。...需要能够JSF生命周期中的某个点应用验证,我们知道所有属性已成功存储支持页面的托管bean中。 可以使用RichFaces图验证器。 使用图形验证器分为两步。...我们确保对象验证消息将与其他全局消息一起显示面板顶部: gv“匹配的id。

3.5K20

Laravel Validation 表单验证(二、验证表单请求)

这些错误会被闪存到 session 中,以便这些错误都可以页面中显示出来。如果传入的请求是 AJAX,向用户返回具有 422 状态代码和验证错误信息的 JSON 数据的 HTTP 响应。...添加表单请求后钩子 如果你想在表单请求「之后」添加钩子,可以使用 withValidator 方法。...他们自动被 Laravel 提供的 [服务容器]自动解析。. 自定义错误消息 你可以通过重写表单请求的 messages 方法来自定义错误消息。...如果验证失败,则可以使用 withErrors 方法把错误消息闪存到 Session 。使用这个方法进行重定向后, $errors 变量自动和视图共享,你可以把这些消息显示给用户。...has 方法可以被用来判断指定字段是否存在错误信息: if ($errors->has('email')) { // } 自定义错误消息 如果有需要,你可以使用自定义错误信息代替默认进行验证

29.1K10

带你认识 flask web 表单

当浏览器向服务器提交表单数据时,通常会使用POST请求(实际上用GET请求可以,但这不是推荐的做法)。之前的“Method Not Allowed”错误正是由于视图函数还未配置允许POST请求。...不过,一旦有任意一个字段未通过验证,这个实例方法就会返回False,引发类似GET请求那样的表单的渲染并返回给用户。稍后我会在添加代码以实现在验证失败的时候显示一条错误消息。...flash()函数是向用户显示消息的有效途径。许多应用使用这个技术来让用户知道某个动作是否成功。我将使用这种机制作为临时解决方案,因为我没有基础架构来真正地登录用户。...如果你尝试过提交无效的数据,相信你注意到,虽然验证机制查无遗漏,却没有给出表单错误的具体线索。下一个任务是通过验证失败的每个字段旁边添加有意义的错误消息来改善用户体验。....errors来渲染错误信息。一个字段的验证错误信息结果是一个列表,因为字段可以附加多个验证器,并且多个验证器都可能提供错误消息显示给用户。

2.2K20

form表单提交的几种方式

,但进入了error ,使用console打印error时出现 parsererror 错误原因:ajax的datatype设置问题 我之前设置为 json ,这种只能是接收后台传回来的json 传回其他就会出现这种错误...formtarget 属性规定的名称或关键词指示提交表单何处显示接收到的响应。 formtarget 属性覆盖 元素的 target 属性。...placeholder 属性规定用以描述输入字段预期的提示(样本或有关格式的简短描述)。 该提示会在用户输入之前显示输入字段中。...对于通常的表单应用来说,这样多一两个参数并没有问题,因为我们接收端中都是按照指定的名称来处理参数, 所以即使多了两个参数不会有任何问题。...但是在做支付接口的时候(例如:支付宝接口)你就会发现,多出两个隐藏参数带来很麻烦的问题, 因为在在提交表单之后,接收端会对参数名称进行MD5校验,想想多两个参数带来什么问题。

6.4K20

Tapestry 教程(六)使用BeanEditForm来创建用户表单

不把提交按钮的label直接放到模板里面,而是给label提供一个引用;实际的label将会被放在消息清单中。 Tapestry中,每当要绑定一个参数,你所提供的可能包含一个前缀。...就在点击Create Address的一瞬间:所有输入域都已经完成了验证并显示错误提示。每个验证出问题的输入域都以红色高亮显示,并添加了错误消息。...现代浏览器表单被提交时自动验证正则表达式,如上所示。老一点的浏览器并没有这种自动化的支持,不过仍然验证输入框,必填的输入域上使用跟之前的截图相同的样式装饰。...无论如何,这都是正确的验证行为,但反馈的消息错误的。你的用户不会想要知道、并不关心什么正则表达式。 幸运的是,自定义验证消息很容易。...现在你也许会对表单成功提交(没有验证错误之后会发生生么感到好奇,这就是我们接下需要关心的事情了。 接下来是:Tapestry中一起使用Hibernate

85520
领券