Reactネイティブパッケージtcomb-form-nativeで検証する方法

Question

TextInputに電子メールを入力する際に​​、入力した電子メールが有効かどうかに基づいてエラーメッセージを検証して表示する必要がありますか？私はtcombフォームの検証を使用しています。 tcomb形式でメールの検証を追加するには？以下はコードです。

import React, { Component } from 'react'; 
import { 
    AppRegistry, 
    Text, 
    Image, 
    View, 
    Button, 
    StyleSheet, 
    TextInput, 
    Linking, 
    Alert, 
    Navigator 
} from 'react-native'; 
import t from 'tcomb-form-native'; 

const Form = t.form.Form; 

// here we are: define your domain model 
const LoginFields = t.struct({ 
    username: t.String,    // a required string 
    password: t.String, // a required string 
}); 

const options = { 
    fields: { 
    password: { 
     type: 'password', 
     placeholder: 'Password', 

    }, 
    username: { 
     placeholder: 'e.g: abc@gmail.com', 
     error: 'Insert a valid email' 
    } 
    } 
}; // optional rendering options (see documentation) 

export default class Login extends Component { 
    _onSubmit() { 
    // Alert.alert('Button has been pressed!'); 
    const value = this.refs.form.getValue(); 
    if (value) { // if validation fails, value will be null 
     console.log(value); // value here is an instance of LoginFields 
    } 
    this.props.navigator.push({ 
     id: 'Home' 
    }); 
    } 
    render() { 
    return (
     <View style={styles.containerView}> 
     <Form 
     ref="form" 
     type={LoginFields} 
     options={options} 
     /> 
     <Text style={{color: 'blue', marginBottom: 10}} 
      onPress={() => Linking.openURL('https://www.google.co.in')}> 
      Forgot Password? 
     </Text> 
     <Button 
      onPress={this._onSubmit.bind(this)} 
      title="Login" 
      style={styles.loginButton} 
      accessibilityLabel="Ok, Great!" 
      /> 
     </View> 
    ); 
    } 
}; 

const styles= StyleSheet.create({ 
    containerView: { 
    flex: 1, 
    justifyContent: 'center', 
    backgroundColor: '#ffebcd', 
    borderStyle: 'solid', 
    borderColor: '#000000' 
    }, 
    loginText: { 
    fontSize: 20, 
    marginBottom: 10 
    }, 
    inputFields: { 
    fontSize: 20, 
    borderStyle: 'solid', 
    borderColor: '#000000', 
    borderRadius: 30, 
    marginBottom: 10 
    }, 
    loginButton: { 
    backgroundColor: '#34A853' 
    } 
}); 

Answer 1

妥当性確認のためにRegular Expressionsを使用できます。オンラインの一般的な使用例については、多くのRegExを見つけることができます。また、自分で作成することもできます。 tcombとemail validationについてこの

import React, { Component } from 'react'; 
import { 
    AppRegistry, 
    Text, 
    Image, 
    View, 
    Button, 
    StyleSheet, 
    TextInput, 
    Linking, 
    Alert, 
    Navigator 
} from 'react-native'; 
import t from 'tcomb-form-native'; 

const Form = t.form.Form; 

// here we are: define your domain model 
const Email = t.subtype(t.Str, (email) => { 
    const reg = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; 
    return reg.test(email); 
}); 

const LoginFields = t.struct({ 
    username: Email, // a required string 
    password: t.String, // a required string 
}); 

const options = { 
    fields: { 
    password: { 
     type: 'password', 
     placeholder: 'Password', 

    }, 
    username: { 
     placeholder: 'e.g: abc@gmail.com', 
     error: 'Insert a valid email' 
    } 
    } 
}; // optional rendering options (see documentation) 

export default class Login extends Component { 
    _onSubmit() { 
    const value = this.refs.form.getValue(); 
     console.log(value); // value here is an instance of LoginFields 
    if (value) { // if validation fails, value will be null 
     console.log(value); // value here is an instance of LoginFields 
    } 
    this.props.navigator.push({ 
     id: 'Home' 
    }); 
    } 
    render() { 
    return (
     <View style={styles.containerView}> 
     <Form 
     ref="form" 
     type={LoginFields} 
     options={options} 
     /> 
     <Text style={{color: 'blue', marginBottom: 10}} 
      onPress={() => Linking.openURL('https://www.google.co.in')}> 
      Forgot Password? 
     </Text> 
     <Button 
      onPress={this._onSubmit.bind(this)} 
      title="Login" 
      style={styles.loginButton} 
      accessibilityLabel="Ok, Great!" 
      /> 
     </View> 
    ); 
    } 
}; 

const styles= StyleSheet.create({ 
    containerView: { 
    flex: 1, 
    justifyContent: 'center', 
    backgroundColor: '#ffebcd', 
    borderStyle: 'solid', 
    borderColor: '#000000' 
    }, 
    loginText: { 
    fontSize: 20, 
    marginBottom: 10 
    }, 
    inputFields: { 
    fontSize: 20, 
    borderStyle: 'solid', 
    borderColor: '#000000', 
    borderRadius: 30, 
    marginBottom: 10 
    }, 
    loginButton: { 
    backgroundColor: '#34A853' 
    } 
});