Flutter微框架Nylo(九):校验

在 Nylo 中,您可以使用validate来处理数据验证。它包含一些有用的验证规则,您可以在项目中使用。如果您需要添加自定义验证规则,也可以这样做。在本节中,我们将概述 Nylo 中的验证工作原理。

validate 校验错误时,可以向用户显示 Toast 通知,也可以手动处理它。

让我们来看看验证在 Nylo 中是如何工作的。

  • 验证电子邮件的示例
php 复制代码
class _ExampleState extends NyState<ExamplePage> {
  ...

  handleFormPass() {
    String textFieldPass = 'agordon@web.com';

    validate(rules: {
      "email address": "email" // validation rule 'email'
    }, data: {
      "email address": textFieldPass
    }, onSuccess: () {
      print('looks good');
      // do something...
    });
  }

  handleFormFail() {
    String textFieldFail = 'agordon.dodgy.data';

    validate(rules: {
      "email address": "email" // validation rule 'email'
    }, data: {
      "email address": textFieldFail
    }, onSuccess: () {
      // onSuccess would not be called
      print("success...");
    }, onFailure: (Exception exception) {
      /// handle the validation error
      print("failed validation");
    }, showAlert: false);
  }
}
  • 验证电话号码的示例
scala 复制代码
class _ExampleState extends NyState<ExamplePage> {
  TextEditingController _textFieldController = TextEditingController();
  ...

  handleForm() {
    String textFieldValue = _textFieldController.text;

    validate(rules: {
      "phone number": "phone_uk" // validation rule 'phone_uk'
    }, data: {
      "phone number": textFieldValue
    }, onSuccess: () {
      print('looks good');
      // do something...
    });
  }
}
  • 验证字段是否包含值的示例
scala 复制代码
class _ExampleState extends NyState<ExamplePage> {
  ...

  handleForm() {
    String textEmail = 'ferrari';

    validate(rules: {
      "car model": "contains:lamborghini,ferrari" // validation rule 'contains'
    }, data: {
      "car model": textEmail
    }, onSuccess: () {
      print("Success! It's a ferrari");
      // do something...
    }, onFailure: (Exception exception) {
        print('No match found');
    });
  }
}

选项:

css 复制代码
validate(
  rules: {
  "email address": "email|max:10" // 检查数据为电子邮件,最多 10 个字符
  }, data: {
    "email address": textEmail // 待验证数据
  }, message: {
    "email address": "oops|it failed" // 第一部分是标题,然后添加一个"|",然后提供说明
  },
  showAlert: true, // 是否希望 Nylo 显示警报,默认值:true
  alertStyle: ToastNotificationStyleType.DANGER // 选择SUCCESS, INFO, WARNING 或者 DANGER
);

如果要快速验证用户的数据并向用户显示一些反馈,则此方法非常方便。

1. 验证文本字段

您可以使用 NyTextField 小组件验证文本字段。您可以将验证规则传递到将用于验证的小部件中。

2. 验证规则

规则名称 用法 用法
Email email 检查数据是否为有效电子邮件
Contains contains:jeff,cup,example 检查数据是否包含值
URL url 检查数据是否为有效的网址
Boolean 布尔 boolean 检查数据是否为有效的布尔值
Min min:5 检查数据是否至少为 x 个字符
Max max:11 检查数据是否最多为 x 个字符
Not empty not_empty 检查数据是否不为空
Regex r'regex:([0-9]+)' r'regex:([0-9]+)' 检查数据是否与正则表达式模式匹配
Numeric numeric 检查数据是否为数字
Date date 检查数据是否为日期
Capitalized capitalized 检查数据是否大写
Lowercase lowercase 检查数据是否为小写
US Phone Number phone_number_us 检查数据是否为有效的电话美国电话号码
UK Phone Number phone_number_uk 检查数据是否为有效的英国电话号码
US Zipcode 美国邮政编码 zipcode_us 检查数据是否是美国的有效邮政编码
UK Postcode 英国邮政编码 postcode_uk 检查数据是否为英国的有效邮政编码

3. 自定义验证规则

您可以通过打开 config/valdiation_rules.dart 文件为项目添加自定义验证规则。

validationRules 变量包含所有自定义验证规则。

dart 复制代码
final Map<String, dynamic> validationRules = {
  /// Example
  // "simple_password": (attribute) => SimplePassword(attribute)
};

若要定义新的有效性规则,请首先创建一个扩展 ValidationRule 类的新类。验证类应实现如下例所示 handle 的方法。

scala 复制代码
class SimplePassword extends ValidationRule {
  SimplePassword(String attribute)
      : super(
      attribute: attribute,
      signature: "simple_password", // 验证者签名
      description: "$attribute字段的长度必须在 4-8 位数之间,并至少包含一位数字", // 发生错误时的提示
      textFieldMessage: "长度必须在 4-8 位数之间,其中包含一位数字"); // 出现错误时的 TextField 验证器描述

  @override
  handle(Map<String, dynamic> info) {
    super.handle(info);

    RegExp regExp = RegExp(r'^(?=.*\d).{4,8}$');
    return regExp.hasMatch(info['data']);
  }
}

Map<String, dynamic> info对象:

arduino 复制代码
/// info['rule'] = Validation rule i.e "max:12".
/// info['data'] = Data the user has passed into the validation rule.
/// info['message'] = Overriding message to be displayed for validation (optional).

该方法 handle 需要返回 boolean 类型,如果数据通过验证返回 false ,如果未通过验证返回 true

相关推荐
BG10 小时前
Flutter 简仿Excel表格组件介绍
flutter
zhangmeng14 小时前
FlutterBoost在iOS26真机运行崩溃问题
flutter·app·swift
恋猫de小郭15 小时前
对于普通程序员来说 AI 是什么?AI 究竟用的是什么?
前端·flutter·ai编程
卡尔特斯15 小时前
Flutter A GlobalKey was used multipletimes inside one widget'schild list.The ...
flutter
w_y_fan18 小时前
Flutter 滚动组件总结
前端·flutter
醉过才知酒浓19 小时前
Flutter Getx 的页面传参
flutter
火柴就是我2 天前
flutter 之真手势冲突处理
android·flutter
Speed1232 天前
`mockito` 的核心“打桩”规则
flutter·dart
法的空间2 天前
Flutter JsonToDart 支持 JsonSchema
android·flutter·ios
恋猫de小郭2 天前
Android 将强制应用使用主题图标,你怎么看?
android·前端·flutter