Flutter无验证插件validatorless的使用

发布于 1周前 作者 bupafengyu 来自 Flutter

Flutter无验证插件validatorless的使用

Validatorless简介

Pub Version

Validatorless 是一个用于Flutter中验证文本输入的包,它受到Yup的启发,提供了多种便捷的验证方法。你可以通过 Validatorless in pub.dev 查看更多详情。

如何使用

添加依赖

首先,在你的pubspec.yaml文件中添加validatorless依赖:

dependencies:
  # 使用最新版本
  validatorless: ^latest_version

请将^latest_version替换为pub.dev上显示的实际最新版本号。

示例代码

以下是一个完整的示例,展示了如何在表单中使用validatorless进行字段验证:

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

void main() {
  final formKey = GlobalKey<FormState>();

  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: Text('Validatorless Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Form(
          key: formKey,
          child: Column(
            children: [
              TextFormField(
                decoration: InputDecoration(
                  labelText: 'Name',
                ),
                validator: Validatorless.multiple([
                  Validatorless.required('Name is required'),
                  Validatorless.min(3, 'Name must be at least 3 characters'),
                  Validatorless.max(20, 'Name must be at most 20 characters'),
                ]),
              ),
              SizedBox(height: 16),
              TextFormField(
                decoration: InputDecoration(
                  labelText: 'Email',
                ),
                validator: Validatorless.multiple([
                  Validatorless.required('Email is required'),
                  Validatorless.email('Invalid email'),
                ]),
              ),
              SizedBox(height: 16),
              TextFormField(
                decoration: InputDecoration(
                  labelText: 'Password',
                ),
                validator: Validatorless.multiple([
                  Validatorless.required('Password is required'),
                  Validatorless.min(6, 'Password must be at least 6 characters'),
                  Validatorless.max(20, 'Password must be at most 20 characters'),
                ]),
              ),
              SizedBox(height: 24),
              ElevatedButton(
                onPressed: () {
                  if (formKey.currentState!.validate()) {
                    print('Form is valid');
                  } else {
                    print('Form is invalid');
                  }
                },
                child: Text('Submit'),
              ),
            ],
          ),
        ),
      ),
    ),
  ));
}

Validatorless选项

以下是validatorless提供的几种验证器:

  • Validatorless.multiple(List<Validatorless>):组合多个验证器。
  • Validatorless.required(String):检查是否为空,提供错误信息。
  • Validatorless.email(String):验证是否为有效的电子邮件格式。
  • Validatorless.min(int, String):验证最小长度。
  • Validatorless.max(int, String):验证最大长度。
  • Validatorless.between(int, int, String):验证值是否在两个数字之间。
  • Validatorless.number(String):验证是否为数字。
  • Validatorless.cpf(String):验证巴西CPF号码。
  • Validatorless.cnpj(String):验证巴西CNPJ号码。
  • Validatorless.date(String):验证日期格式。
  • Validatorless.compare(TextEditingController, String):比较两个文本控制器的内容。
  • Validatorless.numbersBetweenInterval(Double, Double, String):验证数值是否在指定区间内。
  • Validatorless.onlyCharacters(String):验证是否只包含字符(字母)。
  • Validatorless.regex(RegExp, String):自定义正则表达式验证。
  • Validatorless.length(int, String):验证字符串长度。
  • Validatorless.phone(String):验证电话号码格式。

通过上述方法,你可以轻松地为Flutter应用中的表单字段添加强大的验证逻辑。希望这些信息对你有帮助!如果你有任何问题或需要进一步的帮助,请随时提问。


更多关于Flutter无验证插件validatorless的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter无验证插件validatorless的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中,虽然直接称为“validatorless”的插件可能不存在,但如果你想要实现无需验证的表单输入(即没有验证逻辑的表单字段),你可以通过直接创建表单字段而不附加任何验证器来实现这一点。下面是一个简单的Flutter代码示例,展示了如何创建一个没有验证器的表单。

首先,确保你的Flutter环境已经设置完毕,并且你已经创建了一个Flutter项目。

示例代码

1. main.dart 文件

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Validatorless Form Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final _formKey = GlobalKey<FormState>();
  String _name = '';
  String _email = '';

  void _submit() {
    if (_formKey.currentState!.validate()) {
      // 实际上,因为没有添加验证器,validate() 总是返回 true
      _formKey.currentState!.save();
      print('Name: $_name');
      print('Email: $_email');
      // 这里可以添加提交逻辑,例如发送到服务器
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Validatorless Form'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Form(
          key: _formKey,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              TextFormField(
                decoration: InputDecoration(labelText: 'Name'),
                onSaved: (value) {
                  _name = value!;
                },
              ),
              TextFormField(
                decoration: InputDecoration(labelText: 'Email'),
                keyboardType: TextInputType.emailAddress,
                onSaved: (value) {
                  _email = value!;
                },
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: _submit,
                child: Text('Submit'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

说明

  1. main.dart 文件:这是你的Flutter应用的主入口文件。
  2. MyApp:这是你的应用的无状态小部件(Stateless Widget),它配置了应用的主题和主页。
  3. MyHomePage:这是你的主页的有状态小部件(Stateful Widget),它包含了表单和提交逻辑。
  4. _MyHomePageState:这是MyHomePage的状态类,它包含了表单字段的值(_name_email)以及提交表单的方法(_submit)。
  5. Form 小部件:使用GlobalKey来跟踪表单的状态。
  6. TextFormField 小部件:用于输入姓名和电子邮件地址。注意,这里我们没有添加任何验证器(validator)。
  7. onSaved 回调:当用户提交表单时,这些回调会被调用以保存表单字段的值。

由于我们没有为TextFormField添加validator属性,因此无论用户输入什么内容,_formKey.currentState!.validate()都会返回true,表单可以直接提交。

这个示例展示了如何在Flutter中创建一个没有验证逻辑的表单。如果你需要添加验证逻辑,只需在TextFormField中添加validator属性即可。

回到顶部