React Native：手机号码验证只接受数值

Question

如何在react native中验证手机号码接受唯一的数值。

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

我用过 keyboardType="numeric" 但它也接受特殊字符所以我想接受唯一的数值。

Answer 1

执行此操作的方法是检查输入的 onChangeText 处理程序，如果用户输入的是非数字字符，则发出错误消息。

如果该字段是受控组件（它的值是从状态变量设置的，并且状态变量是在 onChangeText 处理程序中设置的），则您根本不能接受无效字符（以便用户键入, 例如 '.', 并且不显示)。

是否向用户解释为什么他的输入不被接受取决于你（通过将其写在字段的标签中，例如“phone 数字（仅限数字），或在下面的字符串中字段，或通过显示错误）。

Answer 2

尝试使用 keyboardType='phone-pad'。

Answer 3

您需要检查输入的字符串是否为数字。检查以下代码：

 <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)}  
     }
 />

Answer 4

使用此验证。

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;
    }
  }

Answer 5

您也可以这样做，而不必使用 if 或任何其他语句...

首先将此包下载到您的根文件夹，这是 npm 的内置包下载在您的 cmd 提示符下键入此命令....

npm i react-native-validator-form

然后将其导入到您的项目中。

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

然后创建一个 class 并用 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>
    );
}

React Native：手机号码验证只接受数值

React Native: mobile number validation accept numeric value only

javascript

reactjs

react-native

react-native-android

react-native-ios