使用tcomb-form-native驗證字符串是否相等（確認密碼）

Question

如何使用tcomb-form-native庫驗證我的confirmPassword字段？

電子郵件和密碼字段是相當微不足道的，我不知道如何比較模型中的另一個字段的現有值。

這是我的代碼。

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

希望這有助於！