Flutter表单验证插件br_validators的使用

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

Flutter表单验证插件br_validators的使用

Descrição

BRValidators 是一个用于验证在巴西常用数据类型的Flutter插件。它可以验证的数据类型包括CPF(个人税号)、CNPJ(企业税号)、PIS/PASEP、CEP(邮政编码)、固定电话和移动电话号码,以及CNH(驾驶证号码)。此外,该插件还提供输入掩码功能,以确保数据格式的一致性。

此插件适用于多种场景,如人员或企业注册系统、需要验证CEP的在线销售系统,或需要验证CNH的司机管理系统。

安装

要安装插件,请在您的Dart或Flutter项目的 pubspec.yaml 文件中添加以下行:

dependencies:
  br_validators: ^latest_version

请将 latest_version 替换为当前插件版本号。

然后执行以下命令下载并安装插件:

  • 对于Flutter项目:flutter pub get
  • 对于纯Dart项目:pub get

如何使用

BRValidators

首先,在代码中导入插件:

import 'package:br_validators/br_validators.dart';

接下来,可以使用提供的验证函数。以下是几个示例:

bool isValidCPF = BRValidators.validateCPF('123.456.789-09');
bool isValidCNPJ = BRValidators.validateCNPJ('12.345.678/0001-95');
bool isValidPISPASEP = BRValidators.validatePISPASEP('123.45678.90-1');
bool isValidCEP = BRValidators.validateCEP('12345-678');
bool isValidLandlinePhone = BRValidators.validateLandlinePhone('(11) 1234-5678');
bool isValidMobileNumber = BRValidators.validateMobileNumber('(11) 91234-5678');
bool isValidPhoneNumber = BRValidators.validatePhoneNumber('(11) 91234-5678');
bool isValidCNH = BRValidators.validateCNH('12345678909');

每个验证函数返回 true 表示值有效,否则返回 false

BRMasks

除了验证函数外,插件还包括 BRMasks 类,提供多种输入掩码来格式化输入文本。这些掩码可用于保证输入数据格式一致。

首先导入 BRMasks

import 'package:br_validators/package:br_validators.dart';

以下是可用的掩码及其使用方法:

var cpfMask = BRMasks.cpf;
var cepMask = BRMasks.cep;
var cnhMask = BRMasks.cnh;
var cnpjMask = BRMasks.cnpj;
var mobilePhoneMask = BRMasks.mobilePhone;
var landlineMask = BRMasks.landlinePhone;
var pisPasepMask = BRMasks.pisPasep;
var dateMask = BRMasks.date;

每个掩码都可以与Flutter的 TextField 组件一起使用,以自动格式化输入文本。例如:

TextField(
  inputFormatters: [BRMasks.cpf],
),

示例Demo

以下是一个完整的示例应用,展示如何使用 br_validators 插件进行CPF和CNPJ的验证和格式化:

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  TextEditingController cpfController = TextEditingController();
  TextEditingController cnpjController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const SizedBox(height: 16),
            ElevatedButton(
              onPressed: () {
                bool isCpfValid = BRValidators.validateCPF(cpfController.text);
                print('Is CPF valid? $isCpfValid');

                bool isCnpjValid = BRValidators.validateCNPJ(cnpjController.text);
                print('Is CNPJ valid? $isCnpjValid');
              },
              child: const Text('Validate Documents'),
            ),
            const SizedBox(height: 16),
            TextFormField(
              controller: cpfController,
              decoration: InputDecoration(
                labelText: 'CPF',
              ),
              inputFormatters: [BRMasks.cpf],
            ),
            TextFormField(
              controller: cnpjController,
              decoration: InputDecoration(
                labelText: 'CNPJ',
              ),
              inputFormatters: [BRMasks.cnpj],
            ),
          ],
        ),
      ),
    );
  }
}

此示例展示了如何使用 br_validators 插件验证和格式化CPF和CNPJ输入。通过点击“Validate Documents”按钮,可以检查输入的有效性,并在控制台打印结果。


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

1 回复

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


当然,以下是如何在Flutter中使用br_validators插件进行表单验证的代码示例。br_validators是一个流行的Flutter插件,用于验证巴西(Brazil)特定的表单字段,如CPF(Cadastro de Pessoas Físicas)、CNPJ(Cadastro Nacional da Pessoa Jurídica)和CEP(Código de Endereçamento Postal)。

首先,确保你已经在pubspec.yaml文件中添加了br_validators依赖:

dependencies:
  flutter:
    sdk: flutter
  br_validators: ^x.y.z  # 替换为最新版本号

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

以下是一个简单的Flutter应用示例,展示了如何使用br_validators进行表单验证:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Form Validation with br_validators',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyFormPage(),
    );
  }
}

class MyFormPage extends StatefulWidget {
  @override
  _MyFormPageState createState() => _MyFormPageState();
}

class _MyFormPageState extends State<MyFormPage> {
  final _formKey = GlobalKey<FormState>();
  String _cpf = '';
  String _cnpj = '';
  String _cep = '';
  String _errorMessage = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Form Validation'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Form(
          key: _formKey,
          child: Column(
            children: <Widget>[
              TextFormField(
                decoration: InputDecoration(labelText: 'CPF'),
                keyboardType: TextInputType.number,
                validator: (value) {
                  if (value.isEmpty || !CpfValidator().isValid(value)) {
                    return 'CPF inválido';
                  }
                  return null;
                },
                onChanged: (value) {
                  setState(() {
                    _cpf = value;
                  });
                },
              ),
              TextFormField(
                decoration: InputDecoration(labelText: 'CNPJ'),
                keyboardType: TextInputType.number,
                validator: (value) {
                  if (value.isEmpty || !CnpjValidator().isValid(value)) {
                    return 'CNPJ inválido';
                  }
                  return null;
                },
                onChanged: (value) {
                  setState(() {
                    _cnpj = value;
                  });
                },
              ),
              TextFormField(
                decoration: InputDecoration(labelText: 'CEP'),
                keyboardType: TextInputType.number,
                validator: (value) {
                  if (value.isEmpty || !CepValidator().isValid(value)) {
                    return 'CEP inválido';
                  }
                  return null;
                },
                onChanged: (value) {
                  setState(() {
                    _cep = value;
                  });
                },
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: () {
                  if (_formKey.currentState!.validate()) {
                    setState(() {
                      _errorMessage = '';
                    });
                    // Perform form submission logic here
                    print('CPF: $_cpf');
                    print('CNPJ: $_cnpj');
                    print('CEP: $_cep');
                  } else {
                    setState(() {
                      _errorMessage = 'Por favor, corrija os campos inválidos.';
                    });
                  }
                },
                child: Text('Submeter'),
              ),
              SizedBox(height: 10),
              Text(
                _errorMessage,
                style: TextStyle(color: Colors.red),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

在这个示例中,我们创建了一个包含CPF、CNPJ和CEP字段的表单。每个字段都有一个验证器,该验证器使用br_validators插件中的相应验证器类来检查输入值的有效性。如果输入值无效,验证器将返回一个错误消息;否则,返回null

当用户点击“Submeter”(提交)按钮时,表单状态将被验证。如果所有字段都有效,则执行表单提交逻辑(在这个示例中,只是打印字段值)。如果有无效字段,将显示一个错误消息。

这个示例展示了如何使用br_validators插件进行巴西特定的表单验证,希望对你有所帮助!

回到顶部