如何在 React Native 中通过单击一次提交来验证所有输入

问题描述

我是本机反应的新手.我想在单击一次提交时验证多个 InputText.

I am New to react native. I want to Validate multiple InputText on Single Submit click.

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

for example :Mobile Number = must 10 digit should Not start with 0, and Must start With 98IFSC Code = First Four character must be Alphabet 5th character must be 0,Email Id validation. Please If Possible Modify My code Please Help Me. Thanks !

这是我的代码

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;

请忽略此 = 我是本机反应的新手.我想在单击一次提交时验证多个 InputText.我是新手反应原生.我想在单击一次提交时验证多个 InputText.我是新手反应原生.我想在单击一次提交时验证多个 InputText.我是新手反应原生.我想在单击一次提交时验证多个 InputText.我是新手反应原生.我想在单击一次提交时验证多个 InputText.我是新手反应原生.我想在单击一次提交时验证多个 InputText.

please Ignore This = I am New to react native. I want to Validate multiple InputText on Single Submit click. I am New to react native. I want to Validate multiple InputText on Single Submit click. I am New to react native. I want to Validate multiple InputText on Single Submit click. I am New to react native. I want to Validate multiple InputText on Single Submit click. I am New to react native. I want to Validate multiple InputText on Single Submit click. I am New to react native. I want to Validate multiple InputText on Single Submit click.

推荐答案

可以如下实现

显示文本输入和错误，

<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()}
/>

handleAccountNo 的函数

function for handleAccountNo

handleAccountNo = (text) => {
  this.setState({ accountError: '' })
  this.setState({ accountNo: text })
}

validateInputs 函数，

function for validateInputs,

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

这篇关于如何在 React Native 中通过单击一次提交来验证所有输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！