react native 更换手机号 验证码输入框

最新推荐文章于 2024-06-18 09:48:09 发布
最新推荐文章于 2024-06-18 09:48:09 发布
阅读量2.5k 收藏 2
点赞数
分类专栏： React Native React编写原生应用
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kingrome2017/article/details/89296954
版权

React Native 版本执行0.57的规则


import React, { Component } from 'react';
import { StyleSheet, Text, View, TextInput, ScrollView, KeyboardAvoidingView, Image, TouchableOpacity, StatusBar } from 'react-native';
import LinearGradient from 'react-native-linear-gradient'; //按钮渐变
import CountDownButton from 'react-native-smscode-count-down';// 倒计时
import { regExp } from "../../network/RegExp";
import { global } from '../../utils/Global';
import { requestUrl } from '../../network/Url';// 请求url
import Fetch from '../../network/Fetch';
import Loading from '../../components/Loading';
import Nav from '../../components/Nav';
import * as Public from '../../utils/Public'

export default class ReplaceTel extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isLoading: false,
            iphone: '', //手机号
            identCode: '', //验证码
            iPhoneValidate: false,// 手机号验证
            smsCodeValidate: false,// 验证码验证
            CodeValidate: false,// 第一步验证码验证
            TimingText: "获取验证码",// 获取验证码文字
            ValidateFlag: true,// 展示第一步校验
            length: 6, //输入框的个数
            codeInput: "", //第一步验证码输入
            isShowTime: false,//是否显示自定义倒计时
            timeText: "60", //自定义倒计时
        }
    }
    componentWillMount() {

    }
    componentDidMount() {
        if (UserInfo.phone) {
            this.setState({
                isShowTime: true
            })
            //获取验证码
            this._getRegisterSms();
            //获取倒计时
            this.renderTime()
        }
    }
    render() {
        const { navigate, goBack } = this.props.navigation;
        return (
            <KeyboardAvoidingView
                behavior={IOS ? "padding" : null}
                style={styles.container}
            >
                <StatusBar
                    animated={true}//是否动画
                    hidden={false}//是否隐藏
                    backgroundColor={'#000'}//android 设置状态栏背景颜色
                    translucent={false}//android 设置状态栏是否为透明
                    showHideTransition="fade"//IOS状态栏改变时动画 fade:默认 slide
                    networkActivityIndicatorVisible={this.state.isLoading}//IOS设定网络活动指示器(就是那个菊花)是否显示在状态栏。
                    statusBarStyle={"default"}//状态栏样式 default	默认（IOS为白底黑字、Android为黑底白字）
                    barStyle={"default"}// 状态栏文本的颜色。
                />
                <Nav title={"更换手机号"} leftClick={() => { goBack() }} />
                <ScrollView
                    keyboardShouldPersistTaps={"handled"}
                >
                    {/* 第一步验证原手机号 */}
                    {
                        this.state.ValidateFlag ?
                            <View style={styles.oneStep}>
                                <View style={styles.oneStepTit}>
                                    <Text style={styles.oneStepTxt}>请输入当前手机号</Text>
                                    <Text style={[styles.oneStepTxt, { marginLeft: Px2dp(5), marginRight: Px2dp(5) }]}>{Public.formatPhone(UserInfo.phone)}</Text>
                                    <Text style={styles.oneStepTxt}>的验证码</Text>
                                </View>
                                <View style={{
                                    position: 'relative',
                                    justifyContent: "center",
                                    alignItems: "center",
                                    flexDirection: "row",
                                    marginTop: Px2dp(20),
                                }}>
                                    <View style={{ width: SCREEN_WIDTH, height: Px2dp(40), justifyContent: "center", alignItems: "center", flexDirection: "row", overflow: "hidden" }}>
                                        {this._tempDomArr()}
                                    </View>
                                    <TextInput
                                        ref={"_input"}
                                        key={"one"}
                                        style={{ opacity: 0, width: SCREEN_WIDTH + Px2dp(60), height: Px2dp(40), position: 'absolute', top: 0, left: -Px2dp(60), zIndex: 10, }}
                                        returnKeyType={"done"}// 键盘确定按钮类型 done/go/next/search/send
                                        placeholderTextColor="#999"
                                        keyboardType="numeric"
                                        maxLength={6}
                                        autoFocus={true}
                                        caretHidden={true}
                                        contextMenuHidden={true} // 禁用粘贴
                                        defaultValue={this.state.codeInput}
                                        underlineColorAndroid={'transparent'}
                                        onChangeText={(text) => {
                                            if (regExp.Reg_Number.test(text)) {
                                                this.setState({
                                                    CodeValidate: true
                                                })
                                            }
                                            else {
                                                this.setState({
                                                    CodeValidate: false
                                                })
                                            }
                                            this.setState({ codeInput: text })
                                        }}
                                    />
                                </View>
                                {/* 倒计时 */}
                                <View style={{ justifyContent: "center", alignItems: "center", marginTop: Px2dp(20) }}>
                                    {
                                        this.state.isShowTime ?
                                            <View style={{ height: Px2dp(44), justifyContent: "center" }}>
                                                <Text style={{ fontSize: Px2dp(12), color: "#9B9B9BFF" }}>重新获取（{this.state.timeText}）</Text>
                                            </View>
                                            :
                                            <CountDownButton
                                                style={{ marginBottom: Px2dp(5) }}
                                                textStyle={{
                                                    fontSize: Px2dp(12),
                                                    color: "rgba(44,125,201,1)"
                                                }}// 文字样式
                                                timerCount={60}// 倒计时时长
                                                timerTitle={this.state.TimingText}// 提示文字
                                                enable={true}
                                                onClick={(shouldStartCounting) => {
                                                    this._getRegisterSms()
                                                    shouldStartCounting(true); //重置验证码状态
                                                }}
                                                timerEnd={() => {
                                                    this.setState({
                                                        TimingText: '重新获取',
                                                        iPhoneFocus: true,
                                                    })
                                                }}// 倒计时结束
                                            />
                                    }
                                    <TouchableOpacity activeOpacity={0.8} onPress={() => {
                                        this._verifyAuthCode()
                                    }}>
                                        <LinearGradient
                                            start={{ x: 0, y: 1 }}
                                            end={{ x: 1, y: 1 }}
                                            colors={['#EF6666', '#EA2424']}
                                            locations={[0, 1.0]}
                                            style={[styles.LoginBtnLg, this.state.CodeValidate ? { opacity: 1 } : { opacity: 0.5 }]}>
                                            <Text style={styles.LoginBtnTxt}>下一步</Text>
                                        </LinearGradient>
                                    </TouchableOpacity>
                                </View>
                            </View>
                            :   //第二步更新手机号
                            <View style={styles.LoginBox}>
                                {/* 填写更新手机号 */}
                                <Text style={{ width: Px2dp(300), lineHeight: Px2dp(15), marginBottom: Px2dp(35), fontSize: Px2dp(12), color: "#504949FF", }}>解除后该手机号的信息将全部转移至新绑定的手机中， 请知悉。</Text>
                                <View style={styles.LoginAccount}>
                                    <Image style={styles.LoginAccountImg} source={require('../../images/login_account.png')} />
                                    <TextInput
                                        key={"phone"}
                                        style={styles.input}
                                        returnKeyType={"done"}// 键盘确定按钮类型 done/go/next/search/send
                                        placeholderTextColor="#999"
                                        keyboardType="numeric"
                                        placeholder="请输入手机号"
                                        underlineColorAndroid={'transparent'}
                                        maxLength={11}
                                        onChangeText={(text) => {
                                            if (regExp.Reg_TelNo.test(text)) {
                                                this.setState({
                                                    iPhoneValidate: true
                                                })
                                            }
                                            else {
                                                this.setState({
                                                    iPhoneValidate: false
                                                })
                                            }
                                            this.setState({ iphone: text })
                                        }}
                                        onBlur={() => {
                                            this.iphoneBlur()
                                        }}
                                    />
                                </View>
                                {/* 填写更新验证码 */}
                                <View style={styles.LoginAccount}>
                                    <Image style={styles.identCodeImg} source={require('../../images/ident_code.png')} />
                                    <TextInput
                                        key={"code"}
                                        style={styles.input}
                                        returnKeyType={"done"}// 键盘确定按钮类型 done/go/next/search/send
                                        placeholderTextColor="#999"
                                        keyboardType="numeric"
                                        placeholder="请输入验证码"
                                        defaultValue={this.state.identCode}
                                        maxLength={6}
                                        underlineColorAndroid={'transparent'}
                                        onChangeText={(text) => {
                                            if (regExp.Reg_Number.test(text)) {
                                                this.setState({
                                                    smsCodeValidate: true
                                                })
                                            }
                                            else {
                                                this.setState({
                                                    smsCodeValidate: false
                                                })
                                            }
                                            this.setState({ identCode: text })
                                        }}
                                        onBlur={() => {
                                            this.smsCodeBlur()
                                        }}
                                    />
                                    {/* 更新倒计时 */}
                                    <CountDownButton
                                        style={[styles.getIdentCode, this.state.iPhoneValidate ? { opacity: 1 } : null]}
                                        textStyle={{
                                            fontSize: Px2dp(12),
                                            color: Colors.white
                                        }}// 文字样式
                                        timerCount={60}// 倒计时时长
                                        timerTitle={this.state.TimingText}// 提示文字
                                        enable={true}
                                        onClick={(shouldStartCounting) => {
                                            //校验新手机号是否已注册
                                            if (!this.state.iPhoneValidate) {
                                                ToastShow({ "text": '请输入正确的手机号' })
                                                shouldStartCounting(false);
                                            } else {
                                                Fetch(requestUrl.URL, {
                                                    "phone": this.state.iphone,
                                                }).then(data => {
                                                    console.log(data)
                                                    if (data.status == "SUCCESS") {
                                                        if (this.state.iPhoneValidate) {
                                                            if (!this.state.iphone) {
                                                                shouldStartCounting(false);
                                                            }
                                                            else {
                                                                this._getRegisterSms(this.state.iphone)
                                                                shouldStartCounting(true); //重置验证码状态
                                                            }
                                                        }
                                                    } else if (data.status == "ERROR") {
                                                        ToastShow({ "text": data.msg })
                                                        shouldStartCounting(false);

                                                    } else {
                                                        ToastShow({ "text": '手机号校验失败' })
                                                        shouldStartCounting(false);

                                                    }
                                                })
                                            }
                                        }}
                                        timerEnd={() => {
                                            this.setState({
                                                TimingText: '重新获取',
                                                iPhoneFocus: true
                                            })
                                        }}// 倒计时结束
                                    />
                                </View>
                                {/* 立即绑定 */}
                                <TouchableOpacity activeOpacity={0.8} onPress={() => {
                                    if (this.state.iPhoneValidate && this.state.smsCodeValidate) {
                                        this._replacePhone()
                                    }
                                }}>
                                    <LinearGradient
                                        start={{ x: 0, y: 1 }}
                                        end={{ x: 1, y: 1 }}
                                        colors={['#EF6666', '#EA2424']}
                                        locations={[0, 1.0]}
                                        style={[styles.LoginBtnLg, this.state.iPhoneValidate && this.state.smsCodeValidate ? { opacity: 1 } : { opacity: 0.5 }]}>
                                        <Text style={styles.LoginBtnTxt}>立即绑定</Text>
                                    </LinearGradient>
                                </TouchableOpacity>
                                <View style={{ flex: 1 }}></View>
                            </View>
                    }
                </ScrollView>
                {this.state.isLoading ? <Loading /> : null}
            </KeyboardAvoidingView>
        );
    }
    //倒计时
    renderTime() {
        let timeCount = 60// 总秒数
        let timer = setInterval(() => {
            timeCount -= 1;
            this.setState({
                timeText: timeCount,
            })
            if (timeCount <= 0) {
                // 倒计时结束
                clearInterval(timer);
                this.setState({
                    isShowTime: false
                })
            }
        }, 1000)
    }
    //手机号失去焦点
    iphoneBlur() {
        if (!this.state.iphone) {
            ToastShow({ "text": '请输入手机号' })
        }
        else if (!regExp.Reg_TelNo.test(this.state.iphone)) {
            ToastShow({ "text": '请输入正确的手机号' })
        } else {
            return true
        }
    }
    //验证码失去焦点
    smsCodeBlur() {
        if (!this.state.identCode.length) {
            ToastShow({ "text": '请输入验证码' })
        }
        else if (!regExp.Reg_Number.test(this.state.identCode)) {
            ToastShow({ "text": '请输入正确的验证码格式' })
        }
        else {
            return true
        }
    }
    //渲染展示input
    _tempDomArr() {
        let tempDomArr = [];
        for (var i = 0; i < this.state.length; i++) {
            tempDomArr.push(
                <View key={i} style={styles.inputBoxItem}>
                    <Text>{this.state.codeInput.length >= i + 1 ? this.state.codeInput[i] : ""}</Text>
                </View>
            )
        }
        return tempDomArr;
    }
    // 获取第一步验证码
    _getRegisterSms(iphone) {
        Fetch(requestUrl.URL, { "phone": iphone ? iphone : UserInfo.phone }).then(data => {
            if (data.status == "SUCCESS") {
                this.setState({
                    iPhoneFocus: false
                })
                ToastShow({ "text": '验证码发送成功' })
            } else {
                ToastShow({ "text": '获取验证码失败' })
            }
        })
    }
    //第一步校验原手机号
    _verifyAuthCode() {
        if (!this.state.codeInput) {
            ToastShow({ "text": '请输入验证码' })
        }
        else if (!regExp.Reg_Number.test(this.state.codeInput)) {
            ToastShow({ "text": '请输入正确的验证码格式' })
        }
        else {
            Fetch(requestUrl.URL, {
                "phone": UserInfo.phone, 'authCode': this.state.codeInput, "userId": UserInfo.id
            }).then(data => {
                console.log(data)
                if (data.status == "SUCCESS") {
                    this.setState({
                        ValidateFlag: false,
                    })
                } else if (data.status == "1") {
                    this.setState({
                        codeInput: '',
                    })
                    this.refs._input.focus();
                    ToastShow({ "text": data.msg })
                } else {
                    this.setState({
                        codeInput: '',
                    })
                    this.refs._input.focus();
                    ToastShow({ "text": '手机号校验失败' })
                }
            })
        }
    }
    // 立即绑定更新手机号
    _replacePhone() {
        if (!this.state.iphone || !this.state.identCode) {
            ToastShow({ "text": '请输入正确的信息' })
        }
        else if (!regExp.Reg_TelNo.test(this.state.iphone)) {
            ToastShow({ "text": '请输入正确的手机号' })
        }
        else if (!this.state.identCode) {
            ToastShow({ "text": '请输入验证码' })
        }
        else if (!regExp.Reg_Number.test(this.state.identCode)) {
            ToastShow({ "text": '请输入正确的验证码格式' })
        }
        else {
            this.setState({
                isLoading: true,
            })
            Fetch(requestUrl.verificationPhone, {
                "phone": this.state.iphone,
            }).then(data => {
                console.log(data)
                if (data.status == "SUCCESS") {
                    Fetch(requestUrl.url, { "phone": this.state.iphone, "userId": UserInfo.id, 'authCode': this.state.identCode }).then(data => {
                        console.log(data)
                        if (data.status == "SUCCESS") {
                            let tempUserInfo = UserInfo;
                            tempUserInfo.phone = this.state.iphone;
                            Public.setItem("userInfo", tempUserInfo);
                            this.props.navigation.state.params.callback(this.state.iphone);
                            this.props.navigation.goBack();
                        } else if (data.status == "ERROR") {
                            this.setState({
                                isLoading: false,
                            })
                            ToastShow({ "text": data.msg })
                        } else {
                            this.setState({
                                isLoading: false,
                            })
                            ToastShow({ "text": '绑定失败' })
                        }
                    })
                } else {
                    this.setState({
                        isLoading: false,
                    })
                    ToastShow({ "text": data.msg })
                }
            })
        }
    }
}
const styles = StyleSheet.create({
    container: {
        backgroundColor: Colors.white,
        justifyContent: "center",
        flex: 1,
    },
    LoginBox: {
        justifyContent: "center",
        alignItems: "center",
        flex: 1,
        paddingTop: Px2dp(40)
    },
    //通用input盒子
    LoginAccount: {
        width: Px2dp(306),
        paddingBottom: Px2dp(7),
        flexDirection: "row",
        alignItems: "center",
        justifyContent: 'space-between',
        borderBottomWidth: Pixel,
        borderBottomColor: '#ececec',
        marginBottom: Px2dp(32)
    },
    LoginAccountImg: {
        marginRight: Px2dp(10)
    },
    identCodeImg: {
        marginRight: Px2dp(7)
    },
    input: {
        flex: 1,
        fontSize: Px2dp(16),
        padding: 0,
    },
    //按钮及文字
    LoginBtn: {
        width: Px2dp(306),
        backgroundColor: Colors.red,
        height: Px2dp(50),
        marginTop: Px2dp(2),
        justifyContent: 'center', alignItems: 'center',
    },
    LoginBtnLg: {
        width: Px2dp(306),
        height: Px2dp(50),
        marginTop: Px2dp(2),
        opacity: 0.5,
        justifyContent: 'center', alignItems: 'center',
    },
    LoginBtnTxt: {
        fontSize: Px2dp(16),
        color: Colors.white,
    },
    //获取验证码及文字
    getIdentCode: {
        width: Px2dp(89),
        height: Px2dp(26),
        backgroundColor: "#EA2424",
        opacity: 0.5,
        borderRadius: Px2dp(13),
        justifyContent: "center",
        alignItems: "center"
    },
    getIdentCodeTxt: {
        fontSize: Px2dp(12),
        color: Colors.white
    },
    // 第一步
    oneStep: {
        marginTop: Px2dp(110),
        flex: 1,
    },
    oneStepTit: {
        flexDirection: "row",
        justifyContent: "center",
        alignItems: "center"
    },
    oneStepTxt: {
        fontSize: Px2dp(16),
        color: Colors.text333
    },
    inputBox: {
        flexDirection: "row",
        justifyContent: "center",
        alignItems: 'center',
        marginTop: Px2dp(40),
    },
    inputBoxItem: {
        borderBottomWidth: Pixel,
        borderBottomColor: "rgba(216,216,216,1)",
        width: Px2dp(30),
        height: Px2dp(30),
        marginRight: Px2dp(10),
        textAlign: "center",
        padding: 0,
        alignItems: 'center',
        justifyContent: 'center',
    },
});
kingrome2009
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
客户端ReactNative一键登录实现方案
...
07-15 1802
背景 当前App登录模式有三种： 手机号/验证码登录 人脸/指纹识别登录 第三方/其他方式登录 为提升App使用体验，助力新用户注册和老用户留存，提供更为便捷&安全的登录方式 简介 本机号码一键登录是基于运营商独有网关认证能力推出的账号认证产品。用户只需一键授权，即可实现以本机号码注册/登录，具有时延低、操作简单、号码验证免短验的特点，体验更优。本机号码一键登录的主要特点是以手机号码作为账号，无需验证，免密码即可登录，并且登录授权页面呈半自定义，以京东、小
react-native-sms, 支持iOS和Android的短信发送方.zip
09-17
react-native-sms, 支持iOS和Android的短信发送方 react-native-sms用户定义的SendSMS使用这个 rn 组件发送带有回调 (completed/cancelled/error). iOS和Android的短信。目前，只支持用户发送短信。 this react-na
判断输入的手机号格式是否正确
qq_41219586的博客
12-16 3143
点击按钮获取输入的手号码，判断输入的手机号格式是否正确 或者是否有输入号码 1.效果截图 不输入号码： 点击提交按钮后的效果 输入错误格式号码 点击提交按钮后的效果 2.代码实现 （1）wxml <view class="box2"> <view class="box2_left">手机号</view> <input type="t...
开源推荐：react-native-sms-verifycode——高效验证码输入组件
最新发布
gitblog_00091的博客
06-18 297
开源推荐：react-native-sms-verifycode——高效验证码输入组件 项目地址:https://gitcode.com/shixiaoquan/react-native-sms-verifycode 验证码是应用中常见的安全验证手段之一，尤其是在登录或注册场景下，其重要性不言而喻。一个好的验证码输入体验不仅能够提升用户体验，还能增加应用程序的安全性和专业度。今天我们要向大家推荐的...
react-native实现验证码倒计时react-native-smscode-count-down
shizhihua11的博客
03-03 872
import CountDownButton from 'react-native-smscode-count-down'; //页面渲染 &lt;CountDownButton style={styles.codeButton} textStyle={{color: '#fff'}} timerCount={60} timerTitle={'获取验证码'} en...
React 项目 通过手机号实现登录
qq_48455736的博客
06-15 662
React 项目 通过手机号实现登录
ReactNative中验证手机号和密码
WindFlyCloud的博客
04-10 2867
/** * 验证是否为手机号 * @param {*} str */ static isPoneAvailable(str) { let myreg = /^[1][3,4,5,7,8][0-9]{9}$/; if (str.length == 0 || str == null) { return false; ...
react-native-phone-input：React Native的电话输入框
02-05
React本地电话输入React Native的电话输入框安装npm i react-native-phone-input --save基本用法import PhoneInput from ' react-native-phone-input 'render (){ return ( < PhoneInput ref = ' phone '> )}自定义...
React Native实现简单的登录功能(推荐)
11-24
placeholder='QQ号/手机号/邮箱' /> <Text style={styles.divider}></Text> underlineColorAndroid='transparent' style={styles.textinput} placeholder='密码' secureTextEntry={true} /> {/* ...
React本机电话输入
06-08
React Native Telephone Input 这个库是 React Telephone Input 的一个分支。 面具和国家发现的基本功能支持iOS和Android基本用法您可以找到一个ExampleProject。 import React, { Component } from 'react'; import...
react-native-course-2
05-08
《React Native实战：动画、验证与交互实现》 在现代移动应用开发中，React Native以其跨平台的特性、丰富的组件库以及高效的性能，受到了广大开发者们的喜爱。本课程"react-native-course-2"将深入探讨如何利用...
React-PhoneNr-Input:带有国家_地区选择器的直观电话号码输入，用于国际和国内电话号码
05-07
React-PhoneNr-输入 概述 React-PhoneNr-Input是一个易于使用的电话号码输入字段，可以选择国家/地区，默认情况下，它会直观地猜测国家/地区，并格式化输入的电话号码 对于国际电话号码，可以使用下拉菜单从中选择国家。 通过传递prop format='NATIONAL'和默认国家/地区（例\u5982defaultCountry='DE'将显示一个简单的输入字段，该字段将使用defaultCountry prop声明的国家格式对输入的电话号码进行格式化。 全部用不到300行代码编写 演示和示例 安装 npm： npm i -S react-phonenr-input 纱： yarn add react-phonenr-input 道具： 名称 类型 默认 描述 onChange （数据：电话号码）=>无效 必需的 返回输入的电话号码或电话号码对象的函数/方法
react-native-phone-verification：用于电话验证的最佳React Native示例（Twitter数字的替代方法）
02-05
React本地电话验证 最好的React Native例子，用于电话验证（可替代 ）。 该软件包是为构建的。 产品特点 :collision: 适用于iOS和Android！ :hundred_points: 100％跨平台婴儿 :baby: ！ :carp_streamer: 内置的国家选择器（使用 ）！ :wrench: 完全可定制的表单（使用 ，但您也可以使用 ）！ :crystal_ball: 微调器叠加层（使用 ）！ 心愿单 :sparkles: 可选的Android支持，用于自动读取验证码（使用 ）！ 用法 安装 ： npm install -g react-native-cli 初始化一个新项目： react-native init myproject 安装依赖项： 如果您使用npm安装软件包：
react-native中验证码输入框的使用—react-native-confirmation-code-field
AnitaSun的博客
03-28 926
地址：https://www.npmjs.com/package/react-native-confirmation-code-field 下载：npm install --save react-native-confirmation-code-field 代码： import React, {Component} from 'react'; import {SafeAreaView, Text, StyleSheet} from 'react-native'; import { CodeFi.
手机验证码自动跳转下一个输入框之功能
weixin_30486037的博客
09-09 544
手机验证码自动跳转下一个输入框之功能 转载于:https://www.cnblogs.com/hool/p/11489849.html
input输入框，手机号码完整验证规则；点击获取验证码变成60s倒计时
qq_46302247的博客
12-17 1906
input输入框，手机号码完整验证规则 //prop="loginId" 和 v-model="ruleForms.loginId" ，字段名要一致 <el-form-item prop="loginId"> <el-input v-model="ruleForms.loginId" oninput="if(value.length>11)value=value.slice(0,11)" placeholder="手机号" class="telphone" cleara
React Native城市选择与切换
xiangzhihong8的专栏
08-08 780
虽然React Native已经不在是当前热门的跨平台技术了，但是还是可以看到很多的公司和个人在用，Flutter有Flutter好，RN呢也有适合自己的地方，至于究竟哪个更好，我们不做过多的比较。 最近，我在升级之前的《React Native移动开发实战》一书，书中的项目有城市切换的功能，效果如下图所示。 可以看到，这个城市选择页面是很常规的，包含了当前定位城市和城市列表，右侧可以通过SlideBar进行快捷定位，除此之外，此组件还支持搜索功能。 首先，我们看一下城市列表，对于这一功能，我们可以使用S
实现手机号码中间4位用星号（*）替换显示
wang544831183的博客
09-11 2万+
//Method 1： function hidtel($phone){     $IsWhat = preg_match('/(0[0-9]{2,3}[\-]?[2-9][0-9]{6,7}[\-]?[0-9]?)/i',$phone); //固定电话     if($IsWhat == 1){         return preg_rep
最新、最全、最准确的手机号正则表达式
热门推荐
平凡之路
01-03 12万+
更新到2018年1月，支持最新的166号段 /** * 手机号码正则表达式 */ private static final String PHONE_NUMBER_REG = "^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\\d{8}$";
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值