Flutter表单验证插件nex_validation的使用

Flutter表单验证插件nex_validation的使用

nexever logo

特性

姓名验证

  • 姓名长度:基于提供的参数(minmax)验证姓名字符串的长度。
  • 空值检查:确保姓名不能为空。
  • 字符验证:检查姓名是否只包含有效字符。

邮箱验证

  • 空值检查:确保邮箱地址不能为空。
  • 格式验证:验证邮箱地址是否符合有效格式。

手机号码验证

  • 空值检查:确保手机号码不能为空。
  • 长度验证:在指定范围内验证手机号码的长度(minmax)。

密码验证

  • 空值检查:确保密码不能为空。
  • 长度验证:在指定范围内验证密码的长度(minmax)。

安装

在你的 pubspec.yaml 文件中添加 nex_validations_extensions

dependencies:
  nex_validations_extensions: <最新版本>

使用

以下是一个完整的示例,展示如何使用 nex_validation 插件进行表单验证:

import 'package:nex_validation/nex_validation.dart';

void main() {
  String name = "John Doe";
  String email = "john.doe@example.com";
  String phoneNumber = "1234567890";
  String password = "password123";

  // 示例:使用姓名验证
  String nameError = name.nameValidations(
    min: 3,                  // 最小长度为3
    max: 20,                 // 最大长度为20
    emptyMsg: '姓名不能为空',   // 空值提示
    lengthMsg: '姓名必须在3到20个字符之间', // 长度提示
    validMsg: '姓名包含无效字符',     // 字符验证提示
  );

  // 示例:使用邮箱验证
  String emailError = email.emailValidations(
    emptyMsg: '邮箱地址不能为空',   // 空值提示
    validMsg: '邮箱地址格式无效',  // 格式验证提示
  );

  // 示例:使用手机号码验证
  String phoneError = phoneNumber.phoneNumberValidations(
    emptyMsg: '手机号码不能为空',   // 空值提示
    minLengthMsg: '手机号码至少需要5位数字', // 最小长度提示
    maxLengthMsg: '手机号码不能超过最大长度', // 最大长度提示
  );

  // 示例:使用密码验证
  String passwordError = password.passwordValidations(
    min: 6,                  // 最小长度为6
    max: 12,                 // 最大长度为12
    emptyMsg: '密码不能为空',   // 空值提示
    minLengthMsg: '密码至少需要6个字符', // 最小长度提示
    maxLengthMsg: '密码不能超过12个字符', // 最大长度提示
  );

  print('姓名验证错误: $nameError');
  print('邮箱验证错误: $emailError');
  print('手机号码验证错误: $phoneError');
  print('密码验证错误: $passwordError');
}

输出结果

运行上述代码后,控制台将输出以下内容:

姓名验证错误: null
邮箱验证错误: null
手机号码验证错误: null
密码验证错误: null

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

1 回复

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


nex_validation 是一个用于 Flutter 的表单验证插件,它可以帮助开发者轻松地实现表单字段的验证。以下是如何使用 nex_validation 插件的基本步骤:

1. 添加依赖

首先,你需要在 pubspec.yaml 文件中添加 nex_validation 插件的依赖:

dependencies:
  flutter:
    sdk: flutter
  nex_validation: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来安装依赖。

2. 导入包

在你的 Dart 文件中导入 nex_validation 包:

import 'package:nex_validation/nex_validation.dart';

3. 创建表单

接下来,你可以创建一个表单,并使用 NexValidation 来验证表单字段。

class MyForm extends StatefulWidget {
  [@override](/user/override)
  _MyFormState createState() => _MyFormState();
}

class _MyFormState extends State<MyForm> {
  final _formKey = GlobalKey<FormState>();
  final _emailController = TextEditingController();
  final _passwordController = TextEditingController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Form(
      key: _formKey,
      child: Column(
        children: [
          TextFormField(
            controller: _emailController,
            decoration: InputDecoration(labelText: 'Email'),
            validator: (value) => NexValidation.email(value),
          ),
          TextFormField(
            controller: _passwordController,
            decoration: InputDecoration(labelText: 'Password'),
            obscureText: true,
            validator: (value) => NexValidation.required(value),
          ),
          ElevatedButton(
            onPressed: () {
              if (_formKey.currentState!.validate()) {
                // 表单验证通过,执行提交操作
                print('Form is valid');
              }
            },
            child: Text('Submit'),
          ),
        ],
      ),
    );
  }
}

4. 使用验证规则

nex_validation 提供了多种内置的验证规则,例如:

  • NexValidation.required: 验证字段是否为空。
  • NexValidation.email: 验证字段是否为有效的电子邮件地址。
  • NexValidation.minLength: 验证字段的最小长度。
  • NexValidation.maxLength: 验证字段的最大长度。
  • NexValidation.match: 验证两个字段是否匹配。

你可以根据需要选择合适的验证规则。

5. 自定义验证规则

如果你需要自定义验证规则,可以使用 NexValidation.custom 方法:

validator: (value) => NexValidation.custom(
  value,
  (value) {
    if (value!.length < 6) {
      return 'Password must be at least 6 characters long';
    }
    return null;
  },
),

6. 处理表单提交

在表单提交时,调用 _formKey.currentState!.validate() 来验证所有字段。如果所有字段都通过验证,validate() 方法将返回 true,否则返回 false

7. 清理资源

dispose 方法中清理 TextEditingController

[@override](/user/override)
void dispose() {
  _emailController.dispose();
  _passwordController.dispose();
  super.dispose();
}

完整示例

以下是一个完整的示例,展示了如何使用 nex_validation 插件进行表单验证:

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Nex Validation Example')),
        body: MyForm(),
      ),
    );
  }
}

class MyForm extends StatefulWidget {
  [@override](/user/override)
  _MyFormState createState() => _MyFormState();
}

class _MyFormState extends State<MyForm> {
  final _formKey = GlobalKey<FormState>();
  final _emailController = TextEditingController();
  final _passwordController = TextEditingController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Form(
      key: _formKey,
      child: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextFormField(
              controller: _emailController,
              decoration: InputDecoration(labelText: 'Email'),
              validator: (value) => NexValidation.email(value),
            ),
            TextFormField(
              controller: _passwordController,
              decoration: InputDecoration(labelText: 'Password'),
              obscureText: true,
              validator: (value) => NexValidation.required(value),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                if (_formKey.currentState!.validate()) {
                  // 表单验证通过,执行提交操作
                  print('Form is valid');
                }
              },
              child: Text('Submit'),
            ),
          ],
        ),
      ),
    );
  }

  [@override](/user/override)
  void dispose() {
    _emailController.dispose();
    _passwordController.dispose();
    super.dispose();
  }
}
回到顶部