validation - 使用 tcomb-form-native 验证字符串相等性(确认密码)

Question

我将如何验证我的 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但我无法理解。

Answer 1

这是我的解决方案:

首先，在类构造函数中定义一个类型 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();
    }
}

最后，钩 this.state , this.onChange ... 在 <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>
        );
    }
}

希望这可以帮助!