Flutter微框架Nylo（九）：校验

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

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

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

• 验证电子邮件的示例

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);
  }
}

• 验证电话号码的示例

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...
    });
  }
}

• 验证字段是否包含值的示例

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');
    });
  }
}

选项：

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 变量包含所有自定义验证规则。

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

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

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对象：

/// 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 。