Taro Hooks 实现手机短信验证码

const [safePhoneInfo, setSafePhoneInfo] = useState({})
const [originalData, setOriginalData] = useState({})
const [countDownInfo, setCountDownInfo] = useState({icode: '',code_ts: '获取验证码',show_btn: true,toast: false,count: 60,uniqueId: '',
})const getCode = () => {if (safePhoneInfo.phone === '' ||!/^1[3456789]\d{9}$/.test(safePhoneInfo.phone)) {// 这里验证一下号码格式是否正确，为空或者不正常都提示一下，然后激活提示控件true，其他的框架提示控件同理Taro.showToast({title: '请输入正确手机号',icon: 'none',duration: 1000,mask: true, // 防止触摸穿透})} else {let count = countDownInfo.count//发起短信接口Request({url: '/v2/code',method: 'POST',data: {type: '1',target: safePhoneInfo.phone,},}).then((res) => {const { resultCode, data } = resif (+resultCode === 0) {setSafePhoneInfo({ ...safePhoneInfo, uniqueId: data })}})// 这里写一个定时器就可以去更新灰色按钮的内容而且show_btn是false时会出现灰色按钮，当倒计时结束又变成可以触发的按钮timer = setInterval(() => {setCountDownInfo((pre) => {if (pre.count === 1) {clearInterval(timer)pre.count = 60pre.show_btn = truepre.code_ts = '获取验证码'} else {pre.count = count--pre.show_btn = falsepre.code_ts = count + 's'}return pre})}, 1000)}}const formChange = (key, value) => {safePhoneInfo[key] = valuesetSafePhoneInfo({ ...safePhoneInfo })}
return (<View className="">{originalData.phone && (<AtForm className="form"><AtListItemclassName="form-required"title="原手机号"extraText={originalData.phone}arrow=""/></AtForm>)}<AtForm className="form"><AtInput// requiredtype="text"placeholder="请填写身份证号"value={safePhoneInfo.cardCode}onChange={(e) => {formChange('cardCode', e)}}/><AtInput// requiredtype="text"placeholder="请填写手机"value={safePhoneInfo.phone}onChange={(e) => {formChange('phone', e)}}/><AtInput// required// title=" 短信验证码"type="number"placeholder="请填写短信验证码"value={safePhoneInfo.mobileCode}onChange={(e) => {formChange('mobileCode', e)}}>{countDownInfo.show_btn ? (<AtButtonclassName="get-code"size="small"type="secondary"onClick={() => getCode()}>获取验证码</AtButton>) : (<View className="count-zero">{countDownInfo.code_ts}</View>)}</AtInput></AtForm></View>
)

Taro Hooks 实现手机短信验证码相关推荐

手机短信验证码真的安全吗？
手机的蓬勃发展,衍生出来众多行业,也让原本功能单一的手机号做出极大的改变.如今似乎每个人的手机号都绑定了或多或少的各种账号,手机绑定的东西越来越多,涉及到的重要的东西也越来越多,例如像银行卡绑定手机号 ...
Java调用WebService接口实现发送手机短信验证码功能，java 手机验证码，WebService接口调用...
近来由于项目需要,需要用到手机短信验证码的功能,其中最主要的是用到了第三方提供的短信平台接口WebService客户端接口,下面我把我在项目中用到的记录一下,以便给大家提供个思路,由于本人的文采有限, ...
Atitit. 破解拦截绕过网站手机短信验证码方式 v2 attilax 总结
Atitit. 破解拦截绕过网站手机短信验证码方式 v2 attilax 总结 1. 验证码的前世今生1 1.1. 第一代验证码图片验证码1 1.2. 第二代验证码用户操作 , ...
Java调用WebService接口实现发送手机短信验证码功能
为什么80%的码农都做不了架构师?>>> 一.样式示例: 二.前台的注册页面的代码:reg.jsp <%@ page language="java" ...
QPW 手机短信验证码发送日志表（tf_sms_send_log）
文章目录手机短信验证码发送日志表需求说明手机短信验证码发送日志表 CREATE TABLE `tf_sms_send_log` (`send_id` bigint(11) NOT NULL AU ...
java 随机手机验证码_基于Java随机生成手机短信验证码的实例代码|chu
简单版 /** * 产生4位随机数(0000-9999) * * @return 4位随机数 */ public static String getFourRandom() { return Stri ...
手机短信验证码收不到怎么办？原因和解决方案全都在这里
对于手机短信验证码我们并不陌生,注册软件.网站验证,APP登录等都有可能遇到,大部分的时候手机短信验证码接收是非常及时的,平台窗口输入手机号,点击发送验证码,几秒钟我们的手机上就会收到短信,但最近常常 ...
发送手机短信验证码-后端、前端(验证码倒计时)
获取手机短信验证码-后端.前端(验证码倒计时) 后端 /*** 发送手机短信验证码** @return str* @throws Exception* @author 王永圣*/@RequestMap ...
某注册页面存在手机短信验证码绕过
某注册页面存在手机短信验证码绕过的情况关闭关闭关闭关闭关闭关闭关闭关闭关闭关闭关闭关闭关闭关闭关闭关闭关闭关闭关闭关闭关闭关闭关闭关闭关闭关闭关闭关闭关闭关闭关闭关闭关闭关闭关闭关闭关闭关闭关闭关闭 ...

Taro Hooks 实现手机短信验证码

Taro Hooks 实现手机短信验证码

Taro Hooks 实现手机短信验证码相关推荐

最新文章

热门文章