精华内容
下载资源
问答
  • 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)
                })
    					}
    				});
    			}
    
    更多相关内容
  • 也是通过网络搜集整理的,我自己在实际项目中用到,使用了jquery技术,很简单,全套的,保证一看就懂。
  • 输入手机号获取验证码,实现只能在规定时间间隔(如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:表示验证失败。

     

    好了,以上就是完整的短信验证码的使用步骤,希望对大家有帮助。

     

     

    展开全文
  • 首先定义一个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
        };

    实际完成实现的效果如下:

    完成~

    展开全文
  • 前端实现获取短信验证码倒计时效果
  • 因为需要获取图片的response数据,因为这个不是走的接口,所以在axios的response拦截器里面是回去不到图片的response的...el-input v-model="loginForm.code" placeholder="输入验证码"></el-input> <img
  • 一、展示效果: IOS手机: autocomplete="one-time-code" <van-field :class="$style.code" v-model="verifyCode" type="text" name="验证码" pattern="\d{4}" maxlength=4 placeho..
  • 阿里云java短信验证码源码 平台简介 一直想做一款后台管理系统,看了很多优秀的开源项目但是发现没有合适的。于是利用空闲休息时间开始自己写了一套后台系统。如此有了若依。她可以用于所有的Web应用程序,如网站...
  • //短信发送 $('.vcode-send').click(function ()... /*发送前端验证码按钮变化*/ if ($(this).hasClass('disabled')) { } else { var self = $(this); var count = 10; self.addClass('disabled'); self.text..
  • 生成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....
  • 用户是否存在,手机号是否已被注册,用户名是否已被注册),实现的流程相似,先通过手机获取验证码,将发送成功的验证码存到redis数据库,有效时间为5分钟,然后用户填写验证码前端向后端发送请求,后端验证是否...
  • <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...
  • 07.前端获取验证码、手机号登录、注册功能 Register.vue <template> <div class="register"> <div class="box"> <i class="el-icon-close" @click="close_register"></i> <div...
  • vue使用中发现了一个问题,由于ios手机获取短信验证码后,验证码会直接显示在键盘上,点击键盘上的验证码即可给对应的input赋值,但是在项目开发中发现输入框的取值为空 经过排查是因为通过v-model绑定的值与input的...
  • vue中获取短信验证码IOS手机问题

    千次阅读 2022-01-19 12:17:55
    vue使用中发现了一个问题,由于ios手机获取短信验证码后,验证码会直接显示在键盘上,点击键盘上的验证码即可给对应的input赋值,但是在项目开发中发现输入框的取值为空 经过排查是因为通过v-model绑定的值与input的...
  • captcha: '获取验证码', disabled: false, wait: this.waitTime } }, beforeMount () { // 倒计时大于一分钟 或者是默认值 60 可以发送验证码 if (this.wait || this.wait === 60) { this.captcha = '获取...
  • 获取验证码</button> var countdown = 60; $('#numbtn').on('click',function(){ var obj = $("#numbtn"); settime(obj); }) function settime(obj) { //发送验证码倒计时 if (countdown == 0) { obj....
  • 场景:IOS在获取短信验证码后,会自动唤起键盘,并自动在键盘填充收到的验证码,以便用户使用。 ❤问题:但在做移动端项目时,发现收到短信验证码以后,点击自动填充复制时,每次都会复制两遍验证码到input输入框。...
  • 其次,你需要后台给你手机短信的验证接口,各个公司用的不一样,这个身为前端,不需要你来考虑,你只要让你后台给你写好接口,你直接调用就好了。 activity_login.xml <?xml version=1.0 encoding=utf-8?> &...
  • Java实现短信验证码

    千次阅读 2022-03-04 15:29:53
    大家好,我是孙嵓,短信验证码相信大家都不陌生吗,但是短信验证码怎么生成的你真的了解吗,本文揭示本人项目中对短信验证码的。 项目需求 用户注册/忘记密码添加短信验证码 需求来由 登录注册页面需要确保用户同一...
  • 1、下载identify插件,npm安装 npm i identify 2、在你的components目录新建一个SIdentify.vue,把以下代码复制进去! 3、在你需要验证码的页面引入组件并写好方法
  • 2.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', ...
  • 系统会给8块钱,可以用来发送短信 然后会得到以下信息 然后对应的改后台的代码即可,对应改成自己生成的。 然后前端就可以写代码发送请求了,把对应的表单内容传给后台即可 部分代码: // 异步登陆 async login()...
  • 倒计时获取短信验证码防止连续点击 vue
  • 在接口测试中,会有一部分需要获取短信验证码,如:登录,充值,绑卡等等的一些操作 对于这类的接口,在做接口测试时,需要按照系统正常的操作流程,将接口按照顺序调用执行,通过接口的调用,形成一个具体的业务...
  • 一、图片验证码 <el-form-item prop="captcha"> <el-row :gutter="20"> <el-col :span="14"> <el-input ref="inputCaptcha" v-model="dataForm.captcha" placeholder="验证码" ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,025
精华内容 2,410
关键字:

前端获取短信验证码