React native 如何在React Native中的一次提交单击中验证所有输入

我是个新来的本地人。我想在一次提交点击时验证多个InputText

例如： 手机号码=必须是10位数字，不能以0开头，必须以98开头 IFSC代码=前四个字符必须是字母表第五个字符必须是0， 电子邮件Id验证。如果可能，请修改我的代码，请帮助我。谢谢

这是我的密码

import React, {useState, Component} from 'react';
import {Picker, Text, StyleSheet, View, TextInput, Button, KeyboardAvoidingView, ScrollView, alert, Alert, TouchableHighlight} from 'react-native';
import { StackNavigator, navigation} from "react-navigation";
import ValidationComponent from 'react-native-form-validator';

// const PickerDemo = (navigation) => {
  class PickerDemo extends  ValidationComponent{

    constructor(props) {
      super(props);
    }
  render(){
    const offset = (Platform.OS === 'android') ? -200 : 0;

  return (
    
    <KeyboardAvoidingView keyboardVerticalOffset={offset} style={styles.form} behavior='padding'>
      <Text style={styles.formLabel}> BANK INFORMATION Form </Text>
      <ScrollView style={{flex: 1,}} showsVerticalScrollIndicator={false}>        
      <TextInput maxLength={20} placeholder="Name" style={styles.inputStyle}/>
        <TextInput maxLength={16} placeholder="ACCOUNT NUMBER*" style={styles.inputStyle} />
        <TextInput maxLength={20} placeholder="IFSC Code*" style={styles.inputStyle} />
        <TextInput maxLength={20} placeholder="Name of Bank*" style={styles.inputStyle} />
        <TextInput maxLength={10} keyboardType = 'numeric' placeholder="Mobile Number *" style={styles.inputStyle} />
        <TextInput maxLength={6} placeholder="Email ID*" style={styles.inputStyle} />
      </ScrollView>
      <View style={{ height: 30 }} />
      <Button style={styles.inputStyleB}
          title="Submit"
          color="#808080"
          onPress={() => Alert.alert('Submit Button pressed')}
        />
        </KeyboardAvoidingView>
        );
      };
    }

const styles = StyleSheet.create({
    form: {
        flex: 1,
        justifyContent: "center",
        flex: 1,
        backgroundColor: "rgb(247, 146, 57)",
        alignItems: 'center',
        paddingTop: 50,
      },
  container: {
    flex: 1,
    backgroundColor: "rgb(247, 146, 57)",
    alignItems: 'center',
    //justifyContent: 'center',
    paddingTop: 15
  },

  formLabel: {
    fontSize: 20,
    color: 'rgb(10, 10, 10)',
  },
  inputStyle: {
    marginTop: 20,
    width: 300,
    height: 40,
    paddingHorizontal: 10,
    borderRadius: 50,
    backgroundColor: 'rgb(255, 252, 252)',
  },
  formText: {
    alignItems: 'center',
    justifyContent: 'center',
    color: '#fff',
    fontSize: 20,
  },
  text: {
    color: '#fff',
    fontSize: 20,
  },
});

export default PickerDemo;

import React，{useState，Component}来自'React'；
从“react native”导入{Picker、Text、StyleSheet、View、TextInput、Button、KeyboardAvoidingView、ScrollView、alert、alert、TouchableHighlight}；
从“react navigation”导入{StackNavigator，navigation}；
从“react native form validator”导入ValidationComponent；
//常量PickerDemo=（导航）=>{
类PickerDemo扩展了ValidationComponent{
建造师（道具）{
超级（道具）；
}
render（）{
常量偏移量=（Platform.OS=='android'）？-200:0；
返回(
银行资料表
Alert.Alert（'按下提交按钮'）}
/>
);
};
}
const styles=StyleSheet.create({
表格：{
弹性：1，
辩护内容：“中心”，
弹性：1，
背景色：“rgb（24714657）”，
对齐项目：“居中”，
paddingTop:50，
},
容器：{
弹性：1，
背景色：“rgb（24714657）”，
对齐项目：“居中”，
//为内容辩护：“中心”，
加油站：15
},
formLabel：{
尺寸：20，
颜色：“rgb（10,10,10）”，
},
输入样式：{
玛金托普：20，
宽度：300，
身高：40，
水平方向：10，
边界半径：50，
背景颜色：“rgb（2552252）”，
},
格式文本：{
对齐项目：“居中”，
为内容辩护：“中心”，
颜色：“#fff”，
尺寸：20，
},
正文：{
颜色：“#fff”，
尺寸：20，
},
});
导出默认PickerDemo；

---

请忽略这一点=我是新手。我想在一次提交点击时验证多个InputText。我是个新来的本地人。我想在一次提交点击时验证多个InputText。我是个新来的本地人。我想在一次提交点击时验证多个InputText。我是个新来的本地人。我想在一次提交点击时验证多个InputText。我是个新来的本地人。我想在一次提交点击时验证多个InputText。我是个新来的本地人。我想在单击一次提交时验证多个InputText。

您可以执行以下操作

显示文本输入和错误

<TextInput 
  maxLength={16} 
  placeholder="ACCOUNT NUMBER*" 
  style={styles.inputStyle}
  onChangeText={this.handleAccountNo} 
/>
<Text>{this.state.accountError}</Text>
<Button style={styles.inputStyleB}
   title="Submit"
   color="#808080"
   onPress={() => this.validateInputs()}
/>

用于验证输入的函数

validateInputs = () => {
   if (!this.state.accountNo.trim()) {
     this.setState({ accountError: 'Please enter account no' })
     return;
   }
   else {
     alert("All fields validated")
     return;
   }
 }

---

您可以使用来验证react native中的表单。但我如何验证类似条件，例如，如果手机号码以零开头，则应发生特定错误。与邮件id相同。我该怎么做请帮忙，me@SohilShaikh你可以用正则表达式来进行验证，我应该把电子邮件id验证的条件放在哪里？我应该把这个条件放在账号的if语句下面吗？在validateInputs中使用if条件

validateInputs = () => {
   if (!this.state.accountNo.trim()) {
     this.setState({ accountError: 'Please enter account no' })
     return;
   }
   else {
     alert("All fields validated")
     return;
   }
 }