React Native - 如何正确验证文本输入？答案

【问题标题】：React Native - How to validate Textinput correclty?React Native - 如何正确验证文本输入？
【发布时间】：2023-03-31 19:31:02
【问题描述】：

如何验证文本输入的正确性？我想通过自定义表单验证正确验证我的表单，并且验证后在文本组件中显示错误，但是如何？请大家给我举个例子！

【问题讨论】：

你能提供一些你尝试过的代码吗？

标签： forms validation react-native components textinput

【解决方案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>
            );
        }
    }

【讨论】：

【解决方案2】：

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

为了显示错误信息，您可以使用 Toast、ALert 或 Snackbar

【讨论】：

【解决方案3】：

如果您提供一些关于您认为可以如何处理它的想法或代码，那就太好了。但是我这样做的方式非常简单，在我的组件状态下，我得到了以下对象：

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

然后在用户名的TextInput上，我首先将其值绑定到this.state.username.text，另外，在onChangeText期间我只是对字段进行简单的验证，如果表单很大，你可能有一个switch(fieldtype)每个字段的位置，您想要应用什么处理，也就是验证。

onChangeText={ (text) => { this.validateInput(text, 'username')}}（用户名将是状态对象上的表单输入）

例如，对于用户名，您只希望长度为 != 0 和长度

validateInput(text, fieldname) {
    let stateObject = {
        text: text,
        valid: text.length !== 0
    }

    this.setState({ [fieldname]: stateObject }, () => {
        this.checkValidation();
    });
}

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

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

希望对你有帮助。

【讨论】：