如何使用React Native包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'
  }
});