-
2022-01-20 15:57:26
1、初始化秒：
return { //初始值 show: 'false', count: '', }2、页面中：
<el-form-item prop="code" label="短信验证码"> <el-input v-model.trim="form.code" style="width:60%" maxlength="6" oninput="value=value.replace(/[^\d]/g,'')" placeholder="请填写短信验证码"></el-input> <el-button type="text" class="code" v-show="show" @click.prevent="getCode()" >获取验证码</el-button> <el-button type="text" class="code" v-show="!show">{{count}}s后重试</el-button> </el-form-item>接口调用：
// 获取短信验证码 getCode() { if(this.validatePhone()){ this.vaTime() let params={phone:this.form.phone} sendCode(params).then(res => { if(res.code===200){ this.$message({ message: '验证码已发送成功', type: 'success' }); } }).catch((error) => { console.log(error) }) } }, // 判断手机号是否合法 validatePhone(){ if(!this.form.phone) { this.$message({ message: '手机号码不能为空', type: 'error' }); } else if(!/^1[3|4|5|7|8][0-9]\d{8}$/.test(this.form.phone)) { this.$message({ message: '请输入正确是手机号', type: 'error' }); } else { return true } }, // 验证码倒计时 vaTime(){ this.count = 120; this.show = false; let timer=0 timer = setInterval(() => { if (this.count > 0 && this.count <= 120) { this.count--; } else { this.show = true; clearInterval(timer); timer = 0; } }, 1000); }, // 提交 handSubmit() { this.$refs.form.validate(valid => { if (valid) { // 验证码校验 let params={ code:this.form.code, number:this.form.phone } //后台接口校验验证码 checkCode(params).then(res => { if(res.code===200){ this.loading = true; // 所有信息提交 pmadApplyRecord (this.form).then(res => { console.log(res) this.loading = false; this.show = true; this.$message({ message: '信息提交成功', type: 'success' }); this.open= false; }).catch(() => { this.loading = false; }) }else if(res.code===500){ this.$message({ message: '验证码错误,请输入正确的验证码', type: 'error' }); } }).catch((error) => { console.log(error) }) } }); }更多相关内容 -
JS实现获取短信验证码功能（前台代码）
2013-12-10 12:06:10也是通过网络搜集整理的，我自己在实际项目中用到，使用了jquery技术，很简单，全套的，保证一看就懂。 -
前端——获取手机验证码案例
2022-06-20 12:22:17输入手机号获取验证码，实现只能在规定时间间隔（如60s）申请获取短信展开全文效果
实现间隔规定秒数允许获取短信（如每隔60s可以点击一次获取验证码按钮）
代码<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> 手机号码： <input maxlength="11"> <button>获取验证码</button> <script> // 按钮点击之后，会禁用 disabled 为true // 同时按钮里面的内容会变化， 注意 button 里面的内容通过 innerHTML修改 // 里面秒数是有变化的，因此需要用到定时器 // 定义一个变量，在定时器里面，不断递减 // 如果变量为0 说明到了时间，我们需要停止定时器，并且复原按钮初始状态 var btn = document.querySelector('button'); var time = 60; // 定义剩下的秒数 btn.addEventListener('click', function () { btn.disabled = true; var timer = setInterval(function () { if (time == 0) { // 清除定时器和复原按钮 clearInterval(timer); btn.disabled = false; btn.innerHTML = '获取验证码'; time = 60; } else { btn.innerHTML = time + '秒后重新获取'; time--; } }, 1000) }) </script> </body> </html>
-
前端的短信验证码如何做（和后端配合）
2021-01-25 15:06:03申请短信服务：由于发送短信是需要电信行业的公司（中国电信，移动，联通等），所以，我们必须要和电信行业的公司去沟通。不过不要害怕，现在的社会服务很好，有很多的SP（服务提供商）帮你做好了此事。他们作为你和...展开全文前言
阅读本篇文章的要求：懂前端的HTML,CSS,Javascript，ajax；后端的php（或者其它编程语言也行）懂一点，数据库。
这篇文章写了四个小时，希望大家怀着一颗感恩的心阅读，谢谢！感谢您的点赞，让我有继续写下去的兴趣和勇气，谢谢！
一、前提
申请短信服务：由于发送短信是需要电信行业的公司（中国电信，移动，联通等），所以，我们必须要和电信行业的公司去沟通。不过不要害怕，现在的社会服务很好，有很多的SP（服务提供商）帮你做好了此事。他们作为你和电信行业之间的桥梁，帮你做好了和电信的接口，也做好了后端的代码，供你使用。所以，怀着一颗感恩的心，面对SP。哈哈
PS：这些服务提供商有：阿里云，腾讯云等等（你可以找度娘，要一下“短信服务接口”，她会告诉你的……）
二、申请短信服务的步骤
我以阿里云为例，给大家说一下步骤：
（你也可以看一下阿里云的快速入门文档： https://help.aliyun.com/document_detail/55288.html）
1、登录阿里云，进入“短信服务”-->国内消息
1）、进入：https://account.aliyun.com/login/login.htm 用支付宝扫描登录
可以选择支付宝的方式，扫描登录。
打开手机支付宝，扫描吧
2）、找到短信服务
https://www.aliyun.com/product/sms
3）、 进入管理控制台---》找国内消息
点击“管理控制台”按钮，进入后，看到如下画面：
点击“国内消息”，页面的右边看到如下画面：
2、添加签名（短信里的签名）
在以上画面，点击“添加签名”按钮，进入如下画面。
看清楚要求，不要乱写，否则审核不通过。等待审核通过（说的是两个小时，大部分时候10分钟就差不多了）
点击“确定”按钮，看到如下画面
大概十分钟后，审核通过后，就会看到如下画面（如果审核不通过，看看啥问题，重新改个签名试试）：
记住你的“签名名称”，程序中要用。
如果审核不通过会是如下画面，点击“咨询并修改”看看原因
点击“咨询并修改”后，看到了如下画面：
那就把名字改一下，再等待审核
3、添加模板（发生的短信内容格式）
在同一个画面里，进入“模板管理”
点击“添加模板”，进入如下画面：
添加模板时，按照要求，不要乱写，特别注意“模板内容”有格式要求。我填写的是 “你的短信验证码为：${code}，该验证码5分钟内有效，请勿泄露给别人”，code就是你在（后端）程序里产生的随机验证码。填写内容后，如下画面。
点击“提交”按钮，进入如下画面：
等待审核通过（说的是两个小时，大部分时候10分钟就差不多了）
如果通过的话，就是如下画面：
记住你的“模板CODE”，要在程序里使用。
4、充值（不充值，没法发短信）
找到菜单“费用” --》充值。
在当前画面的右上角，
点击“费用”进入如下画面
点击“充值”，充值你应该会吧。
5、测试一下，看看能不能发
可以通过阿里云的网站测试发送一条短信，验证是否开通成功
进入菜单 “快速学习”--> 测试短信发送
回到刚才添加签名的页面：
点击“快速学习”，进入如下画面：
要等待刚才添加的签名和模板已经通过。选择刚才添加的签名“it教学”，刚才添加的模板“田江测试”，输入你的手机号码。点击“发送短信”。
收到了短信，说明成功了，如果没有收到，说明没有成功。
如果没有成功，那就查看你的“签名”是否通过，“模板”是否通过。充值是否成功。如果还不行，那就打个客服问一下。
三、后端开发需要做的事情：
1、创建自己的AK（Asscess Key）
在当前页面的右上角，点击你的头像，在菜单里找到“AccessKey管理”
进入如下画面：
点击“创建AccessKey”，
点击“保存AK信息”
保存好AK，开发时要用到。不用每次进入阿里云查找了。
创建成功后，如下画面：
AccessKey ID 和Access Key Secret都是在代码中要用的，这是你访问阿里云API的密钥。
要想再次看到“Access Key Secret”点击它下放的“显示”，发送手机验证码。
完成后，你就会看到如下画面：
Ok了
2、下载后端的代码（以php为例），并修改
1）、下载后端的php代码
找到API（阿里云提供的针对各种后端语言的代码（发送短信的代码），如：php）
可以用这个地址 https://help.aliyun.com/document_detail/53111.html 直接进入，也可以按照如下步骤，进行：
在页面左侧的菜单上找到“帮助文档”
点击“帮助文档”
点击“SDK参考（新版）”
点击“安装PHP SDK”
点击“”SDK及DOMO下载
点击“红色框”
下载完毕，这就是人家写好的后端代码，解压放到你的项目中。
2）、修改后端的php代码
文件夹“api_demo”里是sendSms.php文件里是示例代码，直接可以使用。前端发请求时，找的就是这个文件。
打开sendSms.php文件，需要修改的地方：
① AK（Asscess Key）信息（上一大步创建的AK）。
② 修改签名和短信模板的编号：
前面 添加的签名和模板（模板CODE）。
③ 随机验证码
④ 和前端交互代码：
四、前端开发流程
1、前端界面上提供文本框
2、给按钮“获取短信验证码”绑定事件，写上ajax的代码
- 请求的php文件就是 “dysms_php/api_demo/sendSms.php”,
- 发送给后端的电话号码的：phonenumber;（自己可以根据实际情况改）
- 后端响应的数据格式，你可以跟踪一下，或者console.log一下，就知道了。
3、后端发送验证码
后端把产生的短信验证码发到你手机上（sendSms.php文件发的），把你手机收到的短信验证码填入到文本框。
4、前端再次发送请求。
点击“登录”或者“注册”按钮时，前端再次发送请求，把文本框里的短信验证码发给后端，后端进行验证
- Php文件自己写，我的是 loginCheck.php
- 请求参数根据实际情况定，我的是code。
- 后端响应的格式，根据你们自己的实际情况定。我的是：
1：表示验证通过；0：表示验证失败。
好了，以上就是完整的短信验证码的使用步骤，希望对大家有帮助。
-
登录页获取短信验证码 读取短信验证码到键盘
2021-05-25 14:00:04首先定义一个SMSContentObserver 来拦截短信内容： package “你的包名”; import android.content.Context; import android.database.ContentObserver; import android.database.Cursor; import android.net.Uri...展开全文需要实现如下效果：
首先定义一个SMSContentObserver 来拦截短信内容：
package “你的包名”; import android.content.Context; import android.database.ContentObserver; import android.database.Cursor; import android.net.Uri; import android.os.Handler; import android.text.TextUtils; import android.util.Log; import java.util.regex.Matcher; import java.util.regex.Pattern; public class SMSContentObserver extends ContentObserver { private static String TAG = "SMSContentObserver"; private String patternCoder = "\\d{4}"; //正则表达式 取4位数 private String strContent; //验证码内容 private Context mContext ; private Handler mHandler ; //更新UI线程 private String TELPHONE = "TMRTXMIN"; // 短信来源号码 private String TelPHONECONTEXT ="iViralLink"; // 短信内容 特殊关键字 // 8448631136 public SMSContentObserver(Context context, Handler handler) { super(handler); mContext = context ; mHandler = handler ; } /** * 当所监听的Uri发生改变时，就会回调此方法 * * @param selfChange 此值意义不大 一般情况下该回调值false */ @Override public void onChange(boolean selfChange){ Log.i(TAG, "the sms table has changed"); //查询收件箱里的内容 Uri outSMSUri = Uri.parse("content://sms/inbox") ; Cursor c = mContext.getContentResolver().query(outSMSUri, null, null, null,"date desc"); if(c != null){ Log.i(TAG, "the number of send is "+c.getCount()) ; StringBuilder sb = new StringBuilder() ; c.moveToNext(); String message = c.getString(c.getColumnIndex("body")); // 短信内容 String phone = c.getString(c.getColumnIndex("address")); //短信来源号码 Log.i(TAG,"message : "+message); Log.i(TAG,"phone : "+phone); c.close(); // if(checkPhone(phone) &&checkString(message)){ //指定号码 指定字符串匹配 String code = patternCode(message); assert code != null; if(!TextUtils.isEmpty(code) ){ strContent = code; } mHandler.obtainMessage(1, sb.toString()).sendToTarget(); // } } } //指定一个号码，只读取与他有关的新消息。 private boolean checkPhone(String phone) { // TODO Auto-generated method stub String c_phone = TELPHONE; if(c_phone.equals(phone) ) return true; return false; } //指定一关键字符串，用来确认短信内容是我们想要去提取的 private boolean checkString(String message){ if(TextUtils.isEmpty(message)) return false; Pattern p = Pattern.compile(TelPHONECONTEXT); //这个关键字符串可以自定义 Matcher matcher = p.matcher(message); if(matcher.find()) return true; return false; } //匹配短信中的数字（验证码） private String patternCode(String patternContent){ if(TextUtils.isEmpty(patternContent)) return null; Pattern p = Pattern.compile(patternCoder); Matcher matcher = p.matcher(patternContent); if(matcher.find()) return matcher.group(); return null; } public String getStrContent(){ return strContent; } }然后在需要的地方调用：
private SMSContentObserver smsContentObserver; private Handler mHandler = new Handler() { public void handleMessage(Message msg) { switch (msg.what) { case 1: String outbox = smsContentObserver.getStrContent();//(String) msg.obj; 验证码内容 // et_code.setText(outbox); //直接把验证码输入到指定输入框 break; default: break; } } }; private void initRegisterContentObserver() { smsContentObserver = new SMSContentObserver(this, mHandler); Uri smsUri = Uri.parse("content://sms"); getContentResolver().registerContentObserver(smsUri, true, smsContentObserver); } @Override protected void onDestroy() { super.onDestroy(); if (getContentResolver()!=null){ getContentResolver().unregisterContentObserver(smsContentObserver); } } @Override protected int getLayoutId() { return R.layout.act_register; } @Override protected void onCreate(@Nullable Bundle bundle) { super.onCreate(bundle); initRegisterContentObserver(); //初始化smsContentObserver 拦截验证码 }需要注意，edittext的inputstyle需要设置为number：
<EditText android:id="@+id/et_code" android:layout_width="match_parent" android:layout_height="@dimen/dp30" android:background="@null" android:layout_centerVertical="true" android:layout_toRightOf="@+id/iv_code" android:lines="1" android:textSize="@dimen/sp14" android:hint="请输入验证码" android:textColorHint="#999" android:textColor="#fff" android:inputType="number" android:layout_toLeftOf="@+id/tv_get_code" android:layout_marginRight="@dimen/dp10" />最后就是在获取短信权限，这个属于危险权限，需要动态获取：
@Override protected void onCreate(@Nullable Bundle bundle) { super.onCreate(bundle); if(!checkPermission()) if(Build.VERSION.SDK_INT>=Build.VERSION_CODES.M){ requestPermissions(PS, PS.hashCode()); } initRegisterContentObserver(); } public void onRequestPermissionsResult(int req, @NonNull String[] ps, @NonNull int[] res){ if(req==PS.hashCode()){ if(!checkPermission()) getProxy().alert("定位权限不足，请检查手机设置"); return; } super.onRequestPermissionsResult(req, ps, res); } boolean checkPermission(){ boolean ok=true; for(String p: PS){ ok=checkCallingOrSelfPermission(p)== PackageManager.PERMISSION_GRANTED; if(!ok) break; } if(!ok) return false; return true; } static final String[] PS={ // Manifest.permission.ACCESS_FINE_LOCATION, //定位 // Manifest.permission.WRITE_EXTERNAL_STORAGE, //SD卡写入 Manifest.permission.READ_SMS, Manifest.permission.RECEIVE_SMS };实际完成实现的效果如下：
完成~
-
简单实现获取短信验证码倒计时效果
2022-04-28 19:42:14前端实现获取短信验证码倒计时效果 -
用户登陆获取验证码的时候，前端需要获取验证码图片的reponse的token，然后再将设置成头部返回给后台==...
2020-08-17 10:44:45因为需要获取图片的response数据，因为这个不是走的接口，所以在axios的response拦截器里面是回去不到图片的response的...el-input v-model="loginForm.code" placeholder="输入验证码"></el-input> <img -
web: 手机键盘自动获取短信验证码，点击自动填充输入框
2022-02-22 10:55:19一、展示效果： IOS手机： autocomplete="one-time-code" <van-field :class="$style.code" v-model="verifyCode" type="text" name="验证码" pattern="\d{4}" maxlength=4 placeho.. -
阿里云java短信验证码源码-ruoyi:若依二开
2021-06-06 01:40:00阿里云java短信验证码源码 平台简介 一直想做一款后台管理系统，看了很多优秀的开源项目但是发现没有合适的。于是利用空闲休息时间开始自己写了一套后台系统。如此有了若依。她可以用于所有的Web应用程序，如网站... -
【前端】jQuery手机发送短信验证码定时器
2022-03-15 22:31:13//短信发送 $('.vcode-send').click(function ()... /*发送前端验证码按钮变化*/ if ($(this).hasClass('disabled')) { } else { var self = $(this); var count = 10; self.addClass('disabled'); self.text.. -
python实现发送和获取手机短信验证码
2022-04-28 15:31:47生成4位数字验证码 位数字验证码 defcreatePhoneCode(session): chars=[‘0’,‘1’,‘2’,‘3’,‘4’,‘5’,‘6’,‘7’,‘8’,‘9’] x=random.choice(chars),random.choice(chars),random.choice(chars),random.... -
【SDU项目实训2019级】前端和后端实现手机短信验证码登录和注册功能
2022-05-29 14:46:18用户是否存在，手机号是否已被注册，用户名是否已被注册），实现的流程相似，先通过手机获取验证码，将发送成功的验证码存到redis数据库，有效时间为5分钟，然后用户填写验证码，前端向后端发送请求，后端验证是否... -
前端 关于图形验证码和短信验证码
2021-02-20 11:27:35<template> <page-container titleBg="#ffffff" :title=" defaultPage === 'by-mobile' ... '发送验证码' : '修改密码' " v-on="$listeners" > <div class="container">. -
获取短信验证码
2017-12-23 22:13:00在前端页面设置获取验证码button 点击后实现倒计时60s，并发送验证码设计结构：后台随机6位验证码 将验证码存入session中 调用第三方接口实现发送验证码 在后台取出session并和输入的验证码进行匹配需要的jar... -
前端获取验证码、手机号登录、注册功能
2021-05-16 00:59:4407.前端获取验证码、手机号登录、注册功能 Register.vue <template> <div class="register"> <div class="box"> <i class="el-icon-close" @click="close_register"></i> <div... -
vue中获取短信验证码功能IOS手机问题
2022-02-07 15:05:14vue使用中发现了一个问题，由于ios手机获取短信验证码后，验证码会直接显示在键盘上，点击键盘上的验证码即可给对应的input赋值，但是在项目开发中发现输入框的取值为空 经过排查是因为通过v-model绑定的值与input的... -
vue中获取短信验证码IOS手机问题
2022-01-19 12:17:55vue使用中发现了一个问题，由于ios手机获取短信验证码后，验证码会直接显示在键盘上，点击键盘上的验证码即可给对应的input赋值，但是在项目开发中发现输入框的取值为空 经过排查是因为通过v-model绑定的值与input的... -
一个获取短信验证码的组件示例
2018-07-23 17:23:55captcha: '获取验证码', disabled: false, wait: this.waitTime } }, beforeMount () { // 倒计时大于一分钟 或者是默认值 60 可以发送验证码 if (this.wait || this.wait === 60) { this.captcha = '获取... -
前端验证码倒计时如何实现
2022-03-02 13:59:25获取验证码</button> var countdown = 60; $('#numbtn').on('click',function(){ var obj = $("#numbtn"); settime(obj); }) function settime(obj) { //发送验证码倒计时 if (countdown == 0) { obj.... -
IOS获取短信验证码--自动填充被复制两遍问题
2019-08-09 18:03:07场景：IOS在获取短信验证码后，会自动唤起键盘，并自动在键盘填充收到的验证码，以便用户使用。 ❤问题：但在做移动端项目时，发现收到短信验证码以后，点击自动填充复制时，每次都会复制两遍验证码到input输入框。... -
Android开发中通过手机号+短信验证码登录的实例代码
2021-01-04 05:20:33其次，你需要后台给你手机短信的验证接口，各个公司用的不一样，这个身为前端，不需要你来考虑，你只要让你后台给你写好接口，你直接调用就好了。 activity_login.xml <?xml version=1.0 encoding=utf-8?> &... -
Java实现短信验证码
2022-03-04 15:29:53大家好，我是孙嵓，短信验证码相信大家都不陌生吗，但是短信验证码怎么生成的你真的了解吗，本文揭示本人项目中对短信验证码的。 项目需求 用户注册/忘记密码添加短信验证码 需求来由 登录注册页面需要确保用户同一... -
vue项目前端实现图形验证码
2022-01-12 14:27:511、下载identify插件，npm安装 npm i identify 2、在你的components目录新建一个SIdentify.vue，把以下代码复制进去！ 3、在你需要验证码的页面引入组件并写好方法 -
spring-security入门11---短信验证码(一)----获取短信验证码接口开发+简单重构
2019-07-10 01:00:432.2 获取短信验证码接口开发 2.2.1 获取短信验证码接口---总 2.2.2 生成SmsCode对象---分 2.2.3 将生成的验证码通过手机号发给用户--- 开发者应implements 发短信接口然后自己去完成具体实现---分 2.3 在配置文件里... -
前端添加验证码
2022-04-09 12:21:28= this.identifyCode) { return callback(new Error('验证码不正确')) } else { callback() } } loginRules: { username: [{ required: true, trigger: 'blur', ... -
手机获取短信验证码登陆
2020-09-22 17:18:29系统会给8块钱，可以用来发送短信 然后会得到以下信息 然后对应的改后台的代码即可，对应改成自己生成的。 然后前端就可以写代码发送请求了，把对应的表单内容传给后台即可 部分代码： // 异步登陆 async login()... -
倒计时获取短信验证码防止连续点击 vue
2022-06-15 10:36:17倒计时获取短信验证码防止连续点击 vue -
接口测试中获取短信验证码出错或者失效
2018-07-12 14:44:34在接口测试中，会有一部分需要获取短信验证码，如：登录，充值，绑卡等等的一些操作 对于这类的接口，在做接口测试时，需要按照系统正常的操作流程，将接口按照顺序调用执行，通过接口的调用，形成一个具体的业务... -
前端登录页中图片验证码和注册时的短信验证码
2021-05-08 16:20:36一、图片验证码 <el-form-item prop="captcha"> <el-row :gutter="20"> <el-col :span="14"> <el-input ref="inputCaptcha" v-model="dataForm.captcha" placeholder="验证码" ...
收藏数
6,025
精华内容
2,410