如何检查文本输入是否为空

Question

我需要你的帮助。当我按下按钮时，我想检查我的 textInput 是否有空文件。因为现在我的应用程序可以将用户路由到具有空字段的目标页面。所以我需要检查这个字段是否为空。但我不知道该怎么做。如果你能帮助我，我会很高兴。

这是我的组件

import React, { Component } from 'react'
import { View, TextInput } from 'react-native'
import { MyButton, ErrorMessage } from '../uikit'
import { FormStyle, InputStyle } from '../constants/styles'
import { LOG_IN } from '../routes'

export class SignIn extends Component {
    
    state = {
        isValidPasword: true,
        isEqual: true,
        isValidMail: true,
        currentPassword: ''
    }

    isEnoughSymbols = (text) => {
        if (text.trim().length < 8) {
            this.setState({ isValidPasword: false })
        }
        else {
            this.setState({ currentPassword: text, isValidPasword: true })
        }
    }

    isMatch = (text) => {
        if (text != this.state.currentPassword) {
            this.setState({ isEqual: false })
        }
    }

    isMail = (text) => {
        const pattern = /\b[a-z0-9._]+@[a-z0-9.-]+\.[a-z]{2,4}\b/i
        let res = text.search(pattern)

        res == -1 ? this.setState({ isValidMail: false }) : this.setState({ isValidMail: true })
    }

    render() {
        const { mainContainer, buttons } = FormStyle
        const { container, text } = InputStyle
        const { isValidPasword, isEqual, isValidMail, currentPassword } = this.state

        return (
            <View style={mainContainer}>

                <View style={container}>
                    <TextInput
                        style={text}
                        placeholder={'Email'}
                        onEndEditing={(e) => this.isMail(e.nativeEvent.text)}
                    >
                    </TextInput>
                    {
                        isValidMail ? null : <ErrorMessage errorText={'Invalid email!'} />
                    }
                </View>

                <View style={container}>
                    <TextInput
                        style={text}
                        placeholder={'Password'}
                        secureTextEntry={true}
                        onEndEditing={(e) => this.isEnoughSymbols(e.nativeEvent.text)}
                    >
                    </TextInput>
                    {
                        isValidPasword ? null : <ErrorMessage errorText={'Password must have at least 8 symbols!'} />
                    }
                </View>

                <View style={container}>
                    <TextInput
                        style={text}
                        secureTextEntry={true}
                        placeholder={'Confirm password'}
                    >
                    </TextInput>
                    {
                        isEqual ? null : <ErrorMessage errorText={'Passwords not matching'} />
                    }
                </View>

                <View style={buttons}>
                    <MyButton
                        name={'confirm'.toUpperCase()}
                        onPress={() => (isEqual && isValidMail && isValidPasword) ? this.props.navigation.navigate(LOG_IN) : alert('Your data is wrong!')} />
                </View>
            </View>
        )
    }
}

Answer 1

使用状态设置文本输入的值。

例如

state = {
        /// rest of state
        textValue: ""
    }

在 TextInput 组件中添加一个函数来设置状态 onChange，因此 textValue 在用户键入时发生变化，例如(e) => this.setState({ textValue: e.nativeEvent.text })

然后您可以使用检查状态值的函数检查输入是否为空，例如 if(this.textValue === "")，然后处理空与非空条件。

Answer 2

您可以使用这样的函数来检查空格、空白值和文本长度的更好方法。

function isEmpty(isFieldEmpty) {
    isFieldEmpty = isFieldEmpty.trim()
    if (!isFieldEmpty || isFieldEmpty == "" || isFieldEmpty.length <= 0) {
        return true;
    }
    else {
        return false;
    }
}

如何检查文本输入是否为空

How to check a textInput on emptiness

javascript

react-native

react-native-android