我想确保用户只能在 TextFormField Flutter 中输入 1 - 10 的数字

Question

这是我要限制的文本框的代码。用户应该只能输入 1-10 之间的值，但我找不到如何实现

       TextFormField(
                validator: (value) {
                  if (value.isEmpty) {
                    return 'Please enter the Overall Rating';
                  }
                  return null;
                },
                keyboardType: TextInputType.number,
                inputFormatters: <TextInputFormatter>[
                  FilteringTextInputFormatter.digitsOnly
                ], // Only numbers can be entered
                maxLength: 2,
                maxLengthEnforced: true,
                controller: overall,
                decoration: InputDecoration(
                    hintText: "Overall Rating  Out of /10",
                ),
              ),

Answer 1

您可以按如下方式更新您的验证器函数


validator: (value) {
   if (value.isEmpty) {
     return 'Please enter the Overall Rating';
   }
   if(int.parse(value) < 1 || int.parse(value) > 10) {
      return 'The rating must be between 1 and 10';
   }

   return null;
},

Answer 2

您可以尝试使用表单和数字验证，您需要将字符串解析为 int

Form(
        key: _formKey,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            TextFormField(
              keyboardType: TextInputType.number,
              inputFormatters: <TextInputFormatter>[
                FilteringTextInputFormatter.digitsOnly
              ],
              // Only numbers can be entered
              maxLength: 2,
              maxLengthEnforced: true,
              controller: overall,
              decoration: InputDecoration(
                hintText: "Overall Rating  Out of /10",
              ),
              validator: (text) {
                if (text == null || text.isEmpty) {
                  return 'Text is empty';
                }
                if (int.parse(text) < 1 || int.parse(text) > 10) {
                  return 'The rating must be between 1 and 10';
                }
                return null;
              },
            ),
            TextButton(
              onPressed: () {
                if (_formKey.currentState.validate()) {
                  // TODO submit
                }
              },
              child: Text('Submit'),
            )
          ],
        ),
      )

Answer 3

如果你想检查给定的字符串是否小于 11，你可以在验证器的帮助下完成。但是当使用验证器时，您需要执行触发器或需要发生的事件如果你想运行你的代码，你可以使用这个代码 ...

使用验证器的代码（使用 tigger 或 even）

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

class Textfi extends StatelessWidget {
  Textfi({Key? key}) : super(key: key);
  final _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Form(
        key: _formKey,
        child: Column(children: [
          const SizedBox(
            height: 70,
          ),
          TextFormField(
            validator: (value) {
              if (value!.isEmpty) {
                return 'Please enter the Overall Rating';
              } else if (int.parse(value) < 1 || int.parse(value) > 10) {
                return 'The rating must be between 1 and 10';
              }
              return null;
            },
            keyboardType: TextInputType.number,

            inputFormatters: <TextInputFormatter>[
              FilteringTextInputFormatter.digitsOnly
            ], // Only numbers can be entered
            maxLength: 2,
            maxLengthEnforced: true,

            decoration: const InputDecoration(
              hintText: "Overall Rating  Out of /10",
            ),
          ),
          GestureDetector(
            onTap: () {
              if (_formKey.currentState!.validate()) {
                ScaffoldMessenger.of(context).showSnackBar(
                  const SnackBar(content: Text('Validation done')),
                );
              }
            },
            child: Padding(
              padding: const EdgeInsets.all(20.0),
              child: Container(
                height: 30,
                width: 80,
                color: Colors.blue,
                child: const Center(child: Text("Submit")),
              ),
            ),
          )
        ]),
      ),
    );
  }
}

如果要实时查看数值

您不能使用验证器，您需要限制输入值，唯一的方法是使用 inputFormatters:

在您的情况下，您将 inputFormatter 用作：

 inputFormatters: <TextInputFormatter>[
              FilteringTextInputFormatter.digitsOnly
            ],

只会输入数字

If you want to input a restricted number you need to make use of Regex

为此改变你的

inputFormatters: <TextInputFormatter>[
              FilteringTextInputFormatter.digitsOnly
            ],

至


 inputFormatters: <TextInputFormatter>[    
              FilteringTextInputFormatter.allow(RegExp("^(1[0-0]|[1-9])$")),
            ],

这将帮助您只输入从 1 到 10 的数字：-

RegExp("^(1[0-0]|[1-9])$")

**完整代码**

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

class Textfi extends StatelessWidget {
  Textfi({Key? key}) : super(key: key);
  final _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Form(
        key: _formKey,
        child: Column(children: [
          const SizedBox(
            height: 70,
          ),
          TextFormField(
            validator: (value) {
              if (value!.isEmpty) {
                return 'Please enter the Overall Rating';
              } else if (int.parse(value) < 1 || int.parse(value) > 10) {
                return 'The rating must be between 1 and 10';
              }
              return null;
            },
            keyboardType: TextInputType.number,
            inputFormatters: <TextInputFormatter>[
              FilteringTextInputFormatter.allow(RegExp("^(1[0-0]|[1-9])$")),
            ],
            // inputFormatters: <TextInputFormatter>[
            //   FilteringTextInputFormatter.digitsOnly
            // ], // Only numbers can be entered
            maxLength: 2,
            maxLengthEnforced: true,

            decoration: const InputDecoration(
              hintText: "Overall Rating  Out of /10",
            ),
          ),
          GestureDetector(
            onTap: () {
              if (_formKey.currentState!.validate()) {
                ScaffoldMessenger.of(context).showSnackBar(
                  const SnackBar(content: Text('Validation done')),
                );
              }
            },
            child: Padding(
              padding: const EdgeInsets.all(20.0),
              child: Container(
                height: 30,
                width: 80,
                color: Colors.blue,
                child: const Center(child: Text("Submit")),
              ),
            ),
          )
        ]),
      ),
    );
  }
}

Answer 4

在 inputFormatters 中：您只需将其放在 express 下方，这应该可以工作...

// 正则表达式只接受 1-10 的数字

inputFormatters: [  
FilteringTextInputFormatter.allow(RegExp(r'^[1-9]$|^10$'),
),],

我想确保用户只能在 TextFormField Flutter 中输入 1 - 10 的数字

I want to make sure that users can put numbers only from 1 - 10 in TextFormField Flutter

validation

flutter