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

相关推荐
leluckys2 小时前
flutter 专题十二 Flutter Fair逻辑动态化架构设计与实现
flutter
sunly_2 小时前
Flutter:AnimatedIcon图标动画,自定义Icon通过延时Interval,实现交错式动画
flutter
嘟嘟叽2 小时前
初学 flutter 问题记录
flutter
__WanG2 小时前
Flutter将应用打包发布到App Store
前端·flutter·ios
leluckys2 小时前
flutter 专题十七 Flutter Flar动画实战
前端·flutter
sunly_3 小时前
Flutter:AnimatedBuilder自定义显示动画
flutter
leluckys4 小时前
flutter 专题十一 Fair原理篇Fair逻辑动态化架构设计与实现
flutter
Jinkey19 小时前
FlutterBasic - GetBuilder、Obx、GetX<Controller>、GetxController 有啥区别
android·flutter·ios
Summer不秃1 天前
Flutter之使用mqtt进行连接和信息传输的使用案例
前端·flutter
旭日猎鹰1 天前
Flutter踩坑记录(二)-- GestureDetector+Expanded点击无效果
前端·javascript·flutter