validation - 我如何验证最小字符数的 react native 文本输入

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 中的按钮 onPress 上进行验证, TochablableHighlight .还有onSubmitEditing Prop 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>

    )
}