web-dev-qa-db-ja.com

React Native：携帯電話番号の検証は数値のみを受け入れます

リアクションネイティブでモバイル番号を検証する方法は、数値のみを受け入れます。

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

利用した keyboardType="numeric"しかし、特殊文字も受け入れますので、数値のみを受け入れます。

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

入力文字列が数字かどうかを確認する必要があります。以下のコードを確認してください：

 <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

keyboardType='phone-pad'を使用してみてください。

3
vm909

この検証を使用します。

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

これを行う方法は、onChangeTextハンドラーでどの入力が入力されたかをチェックし、ユーザーが数字以外の文字を入力した場合にエラーを発行することです。

フィールドが制御されたコンポーネントである場合（その値は状態変数から設定され、状態変数はonChangeTextハンドラーで設定されています）、無効な文字をまったく受け入れることはできません（たとえば、ユーザーが「。」、およびdvenは表示されません）。

ユーザーに入力が受け入れられない理由を説明するかどうかは、フィールドのラベル（たとえば、「電話番号（数字のみ）、フィールドの下の文字列、またはエラーの表示）に書き込むかどうか」にかかっています。

0
Yossi

また、これを行うことができ、ifまたは他のステートメントを使用する必要はありません...

まず、このパッケージをルートフォルダーにダウンロードします。これは、 npm のインビルドパッケージです。ダウンロードするには、cmdプロンプトでこのコマンドを入力します。

npm i react-native-validator-form

次に、プロジェクトにインポートします。

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

次に、クラスを作成して React.Component で拡張し、次のコードをコピーして貼り付けます...

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