Question

我有一个文本输入供用户发送消息。如果用户输入少于10个字符，我希望弹出错误消息。

<TextInput
        style={styles.textArea}
        underlineColorAndroid="transparent"
        placeholder="Ask a question or comment"
        placeholderTextColor="grey"
        numberOfLines={1}
        textAlignVertical= 'top'
        multiline={true}
      />

Answer 1

您可以在TouchableOpactiy，TochablableHighlight中的onPress按钮上进行验证。以及在onSubmitEditing的blurOnSubmit属性中。单击按钮时建议输入代码。

onSubmit = () => {
    if (this.state.name.trim().length < 8) {
        Alert.alert('Alert', 'Password must be minimum 8 characters');
        return;
    }
    //Do your stuff if condition meet.
}

render() {
    return (
        <View style={{ flex: 1 }}>
            <TextInput
                style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
                onChangeText={(text) => this.setState({ password: text })}
                maxLength={16}
                secureTextEntry={true}
                value={this.state.password}
            />
            <TouchableOpacity onPress={() => this.onSubmit()}>
                <Text style={styles.submit}>Submit</Text>
            </TouchableOpacity>
        </View>

    )
}

Answer 2

您可以添加onChangeText={(text) => this.setState({messageText: text})}属性以将输入的文本保存为您的状态。然后，您可以根据this.state.messageText.length来确定逻辑，无论是onBlur中的TextInput事件，还是用户按下屏幕上的“提交”按钮。

要显示错误消息，可以使用Alert.alert()。

Answer 3

您可以将onSubmitEditing道具与blurOnSubmit组合使用。

 state = {
   value: ''
 }

 onChange = (value) => this.setState({value})

 checkValue = () => {
   if(this.state.value.length < 10) { // ... Condition }
 }

 <TextInput
    ...
    blurOnSubmit={true}
    onChangeText={this.onChange}
    onSubmitEditing{this.checkValue}
  />

如何在React Native中验证文本输入中的最小字符

3 个答案: