4

confirmPassword如何使用 tcomb-form-native 库验证我的字段？

电子邮件和密码字段非常琐碎，但我不知道如何与模型中另一个字段的现有值进行比较。

这是我的代码。

const Email = t.refinement(t.String, (email) => {
  const reg = /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/;
  return reg.test(email);
});

const Password = t.refinement(t.String, (password) => {
  const reg = /^(?=\S+$).{8,}$/;
  return reg.test(password);
});

const RegistrationData = t.struct({
  email: Email,
  password: Password,
  confirmPassword: t.String // Need some equality check
});

我调查了文档https://github.com/gcanti/tcomb-form-native#disable-a-field-based-on-another-fields-value但我无法理解。

4

1 回答 1

10

这是我的解决方案：

首先，在类构造函数中定义一个this.samePassword用于密码检查的类型。

this.samePassword = t.refinement(t.String, (s) => {
    return s == this.state.person.user_password;
});

比，this.samePassword在表单定义中使用类型

this.Person = t.struct({
    user_id:          t.String,
    user_password:    t.String,
    reenter_password: this.samePassword,
});

接下来，准备一个onChange函数来处理文本更改并保存到状态。 this.validate是一个变量，指示表单是否已输入。

onChange(person) {
    this.setState({ person });
    if(person.reenter_password != null && person.reenter_password != "") {
        this.validate = this.refs.form.getValue();
    }
}

最后， hook this.state, this.onChange... on<Form>

<Form
    ref="form"
    type={this.Person}
    value={this.state.person}
    onChange={(v) => this.onChange(v)}
    options={this.options}
/>

完整代码如下：

import React from "react";
import {View, TouchableOpacity, Text} from "react-native";
import * as t from "tcomb-form-native";

let Form = t.form.Form;

export default class CreateUser extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            person: {}
        };

        this.samePassword = t.refinement(t.String, (s) => {
            return s == this.state.person.user_password;
        })
        this.Person = t.struct({
            user_id:          t.String,
            user_password:    t.String,
            reenter_password: this.samePassword,
        });
        this.options = {
            fields: {
                user_password: {
                    password: true,
                    secureTextEntry: true,
                    error: "",
                },
                reenter_password: {
                    password: true,
                    secureTextEntry: true,
                    error: "different password",
                },
            }
        };
        this.validate = null;
    }
    onChange(person) {
        this.setState({ person });
        if(person.reenter_password != null && person.reenter_password != "") {
            this.validate = this.refs.form.getValue();
        }
    }


    render() {
        return (
            <View>
                <Form
                    ref="form"
                    type={this.Person}
                    value={this.state.person}
                    onChange={(v) => this.onChange(v)}
                    options={this.options}
                />
                <View>
                    <TouchableOpacity
                        style={{backgroundColor: this.validate ? "blue": "red"}}
                        activeOpacity={this.validate ? 0.5 : 1}
                        disabled={this.validate? false: true}
                        onPress={() => this.doNext()}>
                        <Text> NEXT MOVE </Text>
                    </TouchableOpacity>
                </View>
            </View>
        );
    }
}

希望这可以帮助！

于 2017-12-13T08:55:42.303 回答