如何验证本机中的移动电话号码是否接受唯一的数值。
<TextInput
ref='mobileNo'
keyboardType="numeric"
style={[styles.textInput, { width: '100%' }]}
placeholder='Enter mobile number'
onChangeText={(value) => this.handleChange('mobileNo', value)} />
我使用了keyboardType="numeric"
但是它接受了特殊字符,所以我想接受唯一的数值。
答案 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>
);
}