如何验证 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

您可以在按钮上验证按下在可触摸操作，Tochablable突出显示。 以及在带有blurOnSubmit的onSubmitEdit道具中。单击按钮时建议使用代码。

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})} prop 以将输入的文本保存在您的状态中。然后，您可以有依赖于this.state.messageText.length的逻辑，无论是TextInput中的onBlur事件，还是用户按下屏幕上的提交按钮。

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

Answer 3

您可以将 onSubmitEditing prop 与 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}
  />