web-dev-qa-db-fra.com

React Native: la validation du numéro de mobile accepte uniquement la valeur numérique

Comment valider le numéro de mobile dans React Native accepte la seule valeur numérique.

 <TextInput
      ref='mobileNo'
      keyboardType="numeric"
      style={[styles.textInput, { width: '100%' }]}
      placeholder='Enter mobile number'
      onChangeText={(value) => this.handleChange('mobileNo', value)}   />

J'ai utilisé keyboardType="numeric" mais son caractère spécial accepte aussi donc je veux accepter la seule valeur numérique.

javascriptreactjsreact-nativereact-native-androidreact-native-ios
5
Asif vora

Vous devez vérifier si la chaîne d'entrée est numérique ou non. Vérifiez le code ci-dessous:

 <TextInput
   ref='mobileNo'
   keyboardType="numeric"
   style={[styles.textInput, { width: '100%' }]}
   placeholder='Enter mobile number'
   onChangeText={(value) => 
   let num = value.replace(".", '');
     if(isNaN(num)){
         // Its not a number
     }else{
        this.handleChange('mobileNo', num)}  
     }
 />
4
Nirmalsinh

Essayez d'utiliser keyboardType='phone-pad'.

3
vm909

tilisez cette validation.

mobilevalidate(text) {
    const reg = /^[0]?[789]\d{9}$/;
    if (reg.test(text) === false) {
      this.setState({
        mobilevalidate: false,
        telephone: text,
      });
      return false;
    } else {
      this.setState({
        mobilevalidate: true,
        telephone: text,
        message: '',
      });
      return true;
    }
  }
3
Vishal Vaghasiya

Pour ce faire, vérifiez dans le gestionnaire onChangeText quelle entrée a été tapée et émettez une erreur si l'utilisateur a entré un caractère non numérique.

Si le champ est un composant contrôlé (sa valeur est définie à partir d'une variable d'état et la variable d'état est définie dans le gestionnaire onChangeText), vous ne pouvez pas du tout accepter le caractère non valide (de sorte que l'utilisateur tape, par exemple, un '.', et il n'est pas affiché).

C'est à vous de décider si vous expliquez à l'utilisateur pourquoi sa saisie n'est pas acceptée (soit en l'écrivant sur l'étiquette du champ, par exemple "numéro de téléphone (chiffres uniquement), soit dans une chaîne sous le champ, ou en affichant une erreur).

0
Yossi

Vous pouvez également le faire et vous n'avez pas à utiliser if ou toute autre déclaration ...

Tout d'abord, téléchargez ce package dans votre dossier racine, il s'agit d'un package intégré de npm pour télécharger, tapez cette commande dans votre invite cmd ....

npm i react-native-validator-form

Importez-le ensuite dans votre projet.

import { Form, TextValidator } from 'react-native-validator-form';

Ensuite, créez une classe et étendez-la avec React.Component et copiez-collez le code suivant ...

state = {
    phonenumber: ''
  }

handleSubmit = () => {
   this.refs.form.submit();
}
render() {
    const {phonenumber} = this.state;
    return (
        <Form 
            ref="form"
            onSubmit={this.handleSubmit}
        > 
          <TextValidator
            name="phonenumber"
            validators={['required', 'isNumber','maxNumber:11']}
            errorMessages={['Phonenumber is required', 'Phonenumber invalid' , 'Not a valid number ']}
            placeholder="Phonenumber"
            value={phonenumber}
            onChangeText={(phonenumber) => this.setState({phonenumber})}
        />
           <Button
                title="Submit"
                onPress={this.handleSubmit}
            />
        </Form>
    );
}
0
Anuj Sharma