flutter 如何创建文本字段验证和条件？

qzwqbdag 于 2023-04-22 发布在 Flutter

关注(0)|答案(1)|浏览(122)

我正在创建“创建帐户”页面。它包含以下文本字段“名字，姓氏，电子邮件，密码”。如何创建下面的验证条件？
1.在空字段中显示文本“此字段是必填字段”
1.在电子邮件字段“输入有效的电子邮件”和“此电子邮件已被占用”中
验证码：

Column(
            children: [
              Padding(
                padding: const EdgeInsets.only(top: 35),
                child: Container(
                  width: 310,
                  child: TextFormField(
                    controller: _firstnameController,
                    decoration: InputDecoration(
                      label: RichText(
                        text: TextSpan(
                            text: 'First Name',
                            style: GoogleFonts.poppins(
                                color: Color(0xffc1c1c1),
                                fontSize: 17,
                                letterSpacing: 0.4),
                            children: const [
                              TextSpan(
                                  text: ' *',
                                  style: TextStyle(
                                    color: Colors.red,
                                    fontSize: 21,
                                  )),
                            ]),
                      ),
                    ),
                  ),
                ),
              ),
              Padding(
                padding: const EdgeInsets.only(top: 20),
                child: Container(
                  width: 310,
                  child: TextFormField(
                    controller: _lastnameController,
                    decoration: InputDecoration(
                      label: RichText(
                        text: TextSpan(
                            text: 'Last Name',
                            style: GoogleFonts.poppins(
                                color: Color(0xffc1c1c1),
                                fontSize: 17,
                                letterSpacing: 0.4),
                            children: const [
                              TextSpan(
                                  text: ' *',
                                  style: TextStyle(
                                    color: Colors.red,
                                    fontSize: 21,
                                  )),
                            ]),
                      ),
                    ),
                  ),
                ),
              ),
              Padding(
                padding: const EdgeInsets.only(top: 20),
                child: Container(
                  width: 310,
                  child: TextFormField(
                    controller: _emailController,
                    keyboardType: TextInputType.emailAddress,
                    decoration: InputDecoration(
                      label: RichText(
                        text: TextSpan(
                            text: 'Enter Your Email',
                            style: GoogleFonts.poppins(
                                color: Color(0xffc1c1c1),
                                fontSize: 17,
                                letterSpacing: 0.4),
                            children: const [
                              TextSpan(
                                  text: ' *',
                                  style: TextStyle(
                                    color: Colors.red,
                                    fontSize: 21,
                                  )),
                            ]),
                      ),
                    ),
                  ),
                ),
              ),
              Padding(
                padding: const EdgeInsets.only(top: 20),
                child: Container(
                  width: 310,
                  child: TextFormField(
                    controller: _passwordController,
                    obscureText: true,
                    decoration: InputDecoration(
                      label: RichText(
                        text: TextSpan(
                            text: 'Enter Your Password',
                            style: GoogleFonts.poppins(
                                color: Color(0xffc1c1c1),
                                fontSize: 17,
                                letterSpacing: 0.4),
                            children: const [
                              TextSpan(
                                  text: ' *',
                                  style: TextStyle(
                                    color: Colors.red,
                                    fontSize: 21,
                                  )),
                            ]),
                      ),
                      suffixIcon: Icon(CupertinoIcons.eye_slash_fill, size: 25),
                    ),
                  ),
                ),
              ),

flutter

来源：https://stackoverflow.com/questions/76042958/flutter-dart-how-to-create-text-field-validations-and-conditions

1条答案

按热度按时间

cngwdvgl1#

若要向文本字段添加验证条件，可以使用TextFormField的validator属性。

验证

validator: (value) {
        if (value.isEmpty) {
          return 'This field is required';
        }
        if (!RegExp(r'^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$').hasMatch(value)) {
          return 'Enter a valid email';
        }
        // add your own logic to check if email is already taken
        return null;
      },

对于Eg（完整源代码）：

Column(
  children: [
    Padding(
      padding: const EdgeInsets.only(top: 35),
      child: Container(
        width: 310,
        child: TextFormField(
          controller: _firstnameController,
          decoration: InputDecoration(
            label: RichText(
              text: TextSpan(
                  text: 'First Name',
                  style: GoogleFonts.poppins(
                      color: Color(0xffc1c1c1),
                      fontSize: 17,
                      letterSpacing: 0.4),
                  children: const [
                    TextSpan(
                        text: ' *',
                        style: TextStyle(
                          color: Colors.red,
                          fontSize: 21,
                        )),
                  ]),
            ),
          ),
          validator: (value) {
            if (value.isEmpty) {
              return 'This field is required';
            }
            return null;
          },
        ),
      ),
    ),
    Padding(
      padding: const EdgeInsets.only(top: 20),
      child: Container(
        width: 310,
        child: TextFormField(
          controller: _lastnameController,
          decoration: InputDecoration(
            label: RichText(
              text: TextSpan(
                  text: 'Last Name',
                  style: GoogleFonts.poppins(
                      color: Color(0xffc1c1c1),
                      fontSize: 17,
                      letterSpacing: 0.4),
                  children: const [
                    TextSpan(
                        text: ' *',
                        style: TextStyle(
                          color: Colors.red,
                          fontSize: 21,
                        )),
                  ]),
            ),
          ),
          validator: (value) {
            if (value.isEmpty) {
              return 'This field is required';
            }
            return null;
          },
        ),
      ),
    ),
    Padding(
      padding: const EdgeInsets.only(top: 20),
      child: Container(
        width: 310,
        child: TextFormField(
          controller: _emailController,
          keyboardType: TextInputType.emailAddress,
          decoration: InputDecoration(
            label: RichText(
              text: TextSpan(
                  text: 'Enter Your Email',
                  style: GoogleFonts.poppins(
                      color: Color(0xffc1c1c1),
                      fontSize: 17,
                      letterSpacing: 0.4),
                  children: const [
                    TextSpan(
                        text: ' *',
                        style: TextStyle(
                          color: Colors.red,
                          fontSize: 21,
                        )),
                  ]),
            ),
          ),
          validator: (value) {
            if (value.isEmpty) {
              return 'This field is required';
            }
            if (!RegExp(r'^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$').hasMatch(value)) {
              return 'Enter a valid email';
            }
            // add your own logic to check if email is already taken
            return null;
          },
        ),
      ),
    ),
    Padding(
      padding: const EdgeInsets.only(top: 20),
      child: Container(
        width: 310,
        child: TextFormField(
          controller: _passwordController,
          obscureText: true,
          decoration: InputDecoration(
            label: RichText(
              text: TextSpan(
                  text: 'Enter Your Password',
                  style: GoogleFonts.poppins(
                      color: Color(0xffc1c1c1),
                      fontSize: 17,
                      letterSpacing: 0.4),
                  children: const [
                    TextSpan(
                        text: ' *',
                        style: TextStyle(
                          color: Colors.red,
                          fontSize: 21,
                                  )),
                            ]),
                      ),
                      suffixIcon: Icon(CupertinoIcons.eye_slash_fill, size: 25),
                    ),
                  ),
                ),
              ),

赞(0）回复(0）举报 2023-04-22

我来回答

flutter 如何创建文本字段验证和条件？

1条答案

相关问题

热门标签

最新问答