react-native 表单错误提示

推荐使用 rc-form

---

ReactNative表单验证探究 https://juejin.im/entry/5b5536056fb9a04f9a5cd77b
react-native-gifted-form

react-native-gifted-form是一款非常棒的ReactNative表单验证插件，页面效果非常酷炫，上手也不是很难；但是该项目作者已经很长时间没有维护，并且表单控件只能使用该插件提供的一些控件。

tcomb-form-native

tcomb-form-native是一款非常容易上手的ReactNative表单验证插件，star也达到了将近3k；同样它的缺点也是表单控件只能使用该插件提供的一些控件，并且表单控件的效果与我们的需求差异很大。

tcomb-form-native https://github.com/gcanti/tcomb-form-native

rc-form

rc-form是antd所推荐的一款表单验证插件，它支持ReactNative，可以使用自己封装的表单控件；但是看完官方给出的demo之后，完全懵逼，瞬间感觉遇到了一块硬骨头。

rc-form https://github.com/react-component/form

---

rc-form 使用强制验证，两次密码不一致合理出现提示：

  validate_password2 = () => {
    this.props.form.validateFields(['password2'], { force: true, }, (error, value) => {
      if (error) {
        return;
      }
    });
  };

  check_password = (value, callback) => {
    let password = value;
    const { getFieldValue } = this.props.form;
    let repeat_password = getFieldValue('password2');
    if (password) {
      this.validate_password2();
    }
    let reg = /^(?=.*[a-zA-Z])(?=.*\d)[^]{8,20}$/;
    if (!password) {
      callback('请输入登录密码');
    } else if (!reg.test(password)) {
      callback('密码长度必须在8-20字符内，且必须包含英文字母和数字');
    } else if (repeat_password && password !== repeat_password) {
      callback('密码不一致');
    } else {
      callback();
    }
  }

  check_repeat_password = (value, callback) => {
    const { getFieldValue } = this.props.form;
    let repeat_password = value;
    let password = getFieldValue('password');
    if (!repeat_password) {
      callback('请确认您的登录密码');
    } else if (password !== repeat_password) {
      callback('密码不一致');
    } else {
      callback();
    }
  }