1
votes

Textinput longueur minimale React native

Existe-t-il un moyen de limiter l'entrée de texte entre une longueur minimale et une longueur maximale. Supposons que je veuille limiter la longueur d'entrée du texte entre 5 et 15, comment faire?

react-native react-native-android react-native-ios react-native-textinput

4 commentaires

quand la vérification aura-t-elle lieu? pendant le changement de texte? pendant soumettre? ou pendant le montage des composants? pour max, il existe un accessoire maxLength pour les composants TextInput ... ( facebook.github.io/react-native/docs/textinput#maxlength )

Il y a une invite au clic sur le bouton où l'utilisateur peut entrer un code de série alphanumérique, ce code doit être d'une longueur de 5 à 15. Et dans cette invite, il y a un bouton OK, sur le bouton, je dois le valider si l'entrée entrée est alphanumérique et est en longueur.

Alors qu'est-ce qui vous empêche de mettre cela en œuvre? Vous pouvez obtenir le texte et vérifier si la longueur se situe dans cette plage. Ou vous pouvez implémenter le prop maxLength et ne vérifier que la longueur minimale

Comment vérifier uniquement cette longueur minimale?

3 Réponses :

1
votes

Pensez à ajouter le code suivant dans votre composant:

<TextInput onTextChange={this.onTextChange} maxLength={15} ... />
<Button onPress={this.onPress} ... >Submit</Button>

onTextChange = text => {
   this.setState({text : text});
}

onPress = () => {
   const {text} = this.state;

   if(text.length < 5) {
      console.log('Your text is less than what is required.');
   }
}

0 commentaires

0
votes

Vous pouvez le faire en utilisant redux-form , en suivant les étapes ci-dessous

we.js

import React, { Component } from 'react';
import { Field, reduxForm } from 'redux-form';
import { Item, Input, CheckBox, ListItem, Spinner, Icon } from 'native-base';
import { required, minValue5, maxLength15} from './validations';


const renderField = ({ secureTextEntry, iconType, iconName, keyboardType, placeholder, meta: { touched, error, warning }, input: { onChange, ...restInput } }) => {
    return (
        <View>
            <Item error={touched && !!error} rounded>
                <Icon type={iconType} name={iconName} />
                <Input secureTpickerStyleextEntry={JSON.parse(secureTextEntry)} keyboardType={keyboardType}
                    onChangeText={onChange} {...restInput} placeholder={placeholder} autoCapitalize='none'>
                </Input>
                {touched && !!error && <Icon name='close-circle' />}
            </Item>
                {touched && (!!error && <Text>{error}</Text>)}
        </View>
    );
};

class UserComponent extends Component {

    render() {

        return (

                <Field name="Name" iconType="SimpleLineIcons" iconName="user" secureTextEntry="false" keyboardType="default" placeholder="FirstName LastName NikeName" component={renderField}
                    validate={[required, minValue5, maxLength15]}
                />
        );
    }
}

const UserCreateForm = reduxForm({
    form: USER_CREATE_FORM // a unique identifier for this form
})(UserComponent);

export default UserCreateForm;

import { reqMsg, maxLength, minValue } from './we';
module.exports = {
    //Validation
    required: value => value ? undefined : reqMsg,

    maxLength15: maxLength(15),

    minValue5: minValue(5)
};

UserCreateForm.js

module.exports = {

    reqMsg: 'Required',

    maxLength: max => value => value && value.length > max ? `Must be ${max} characters or less` : undefined,

    minValue: min => value => value && value.length < min ? `Must be at least ${min} characters` : undefined,
  };

0 commentaires

0
votes

Le commentaire précédent est également bon, mais il a plus de complexité dans le temps et dans l'espace. Pour ce surmonter, utilisez ce code.

<TextInput onTextChange={this.onTextChange} maxLength={15} ... />

onTextChange=()=>{

 if (value ==^[a-zA-Z0-9]{5,15}$) {
        alert( "Input is valid\n");
    } else {
        alert( "Input is invalid\n");
    }
}

ce code m'aide à utiliser ce code, vous pouvez également réinitialiser la longueur limite, changer la valeur ici 5: - minimum 15: - valeur maximale.

0 commentaires