美文网首页
react-native 表单错误提示

react-native 表单错误提示

作者: 日不落000 | 来源:发表于2018-10-10 13:39 被阅读357次

    推荐使用 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();
        }
      }
    
    

    相关文章

      网友评论

          本文标题:react-native 表单错误提示

          本文链接:https://www.haomeiwen.com/subject/ktvpoftx.html