React Native:手机号码验证仅接受数值

时间:2018-05-21 03:05:17

标签: javascript reactjs react-native react-native-android react-native-ios

如何验证本机中的移动电话号码是否接受唯一的数值。

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

我使用了keyboardType="numeric"但是它接受了特殊字符,所以我想接受唯一的数值。

5 个答案:

答案 0 :(得分: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)}  
     }
 />

答案 1 :(得分:1)

尝试使用keyboardType='phone-pad'

答案 2 :(得分:1)

使用此验证。

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 :(得分:0)

执行此操作的方法是检查onChangeText处理程序输入的输入,并在用户输入非数字字符时发出错误。

如果字段是受控组件(其值是从状态变量设置的,并且状态变量是在onChangeText处理程序中设置的),则根本不能接受无效字符(以便用户键入,例如,&#39;。&#39;,并且未显示dven。)

您是否向用户解释为什么他的输入不被接受取决于您(通过在字段中写下标签,例如&#34;电话号码(仅限数字)或下面的字符串)该字段,或显示错误。)

答案 4 :(得分:0)

您也可以执行此操作,而不必使用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>
    );
}