Question

如何验证Textinput的正确性？我想使用自定义窗体验证以及验证后文本组件中的显示错误来正确验证窗体，但是如何？拜托，伙计们给我看例子！

Answer 1

安装 react-native-snackbar 以显示错误消息。

 import React, { Component } from 'react';
    import { View, Text, TextInput } from 'react-native';
    import Snackbar from 'react-native-snackbar';

    export default class LoginPasswordScreen extends Component {
        constructor(props) {
            super(props);

            this.state = {
                password: ''
            }
        }

        validate = () => {
            //include your validation inside if condition
            if (this.state.password == "") {
                () => {
                    setTimeout(() => {
                        Snackbar.show({
                            title: 'Invalid Credintials',
                            backgroundColor: red,
                        })
                    }, 1000);
                }
            }
            else {
                Keyboard.dismiss();
                // navigate to next screen
            }
        }

        render() {
            return (
                <View>
                    <TextInput
                        returnKeyType="go"
                        secureTextEntry
                        autoCapitalize="none"
                        autoCorrect={false}
                        autoFocus={true}
                        onChangeText={(password) => this.setState({ password })}
                    />
                    <TouchableOpacity>
                        <Text onPress={this.validate}>Next</Text>
                    </TouchableOpacity>
                </View>
            );
        }
    }

Answer 2

在每个字段中，您都必须进行比较并显示错误消息，正如我所见，即使在react native中有可用的表单组件，也没有直接的表单验证。在我的一个本机反应项目中，我添加了一个表单，然后单击“提交”，编写了一个validate函数来检查所有输入。为此，我使用了一个不错的javascript库- npm library- validator

要显示错误消息，可以使用Toast，ALert或Snackbar

Answer 3

如果您提供一些想法或代码来解决问题，那将是很好的。但是我的方法非常简单，在组件状态下，我得到了以下对象：

this.state = {
        loading: false,
        username: {
            text: '',
            valid: false
        },
        password: {
            text: '',
            valid: false
        },
        isLoginValid: false
    };

然后在TextInput上输入用户名，首先，将其值绑定到this.state.username.text，此外，在onChangeText期间，我仅对字段进行简单验证，如果表单很大，则可能有一个{ {1}}每个字段的位置，您要应用验证的哪种处理方式。

switch(fieldtype)（用户名是在状态对象上输入的表单）

例如，对于用户名，您只希望长度为！= 0，长度为<= 8个字符，对于电子邮件，您可以运行带有电子邮件验证及其长度的RegExp（），对于密码，可以使用不同的逻辑，等等。 ..之后，我只是简单地保存该字段输入的状态，不管它是否有效。像这样：

onChangeText={ (text) => { this.validateInput(text, 'username')}}

在checkValidation中，我检查所有输入字段，如果每个输入字段都有效，则将formValid设置为true。例如，此formValid将允许用户点击“登录”按钮，否则对其应用0.5的不透明度并禁用它。

您可能会猜到的其余内容只是将每个字段的有效变量用于要显示的内容，而不要显示什么。在输入表单中，如果输入文本字段正常，我还添加了X或“刻度”图标。让您的想象力引导您。

希望有帮助。

React Native-如何验证Textinput的正确性？

3 个答案: