如何使用 React Native 包 tcomb-form-native 进行验证

Question

在文本输入中输入电子邮件时，它应该根据输入的电子邮件是否有效来验证并显示错误消息？我正在使用梳子表单验证。如何以 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: [e-mail]',
      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

您可以使用正则表达式进行验证。您可以在线找到很多常见用例的正则表达式，也可以自己制作。对于使用梳子进行电子邮件验证，请尝试此操作

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: [e-mail]',
      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'
  }
});