• 后台系统发送验证码功能


     <div>
        <p class="fl">
            <input  name="phone" type="number" placeholder="手机号" v-model="phone"/>
            <button type="button" :disabled="disabled" @click="sendcode" class="btns">{{btntxt}}</button>
        </p>
        <p class="fl" style="margin-left: 20px;">
            <input type="text" placeholder="验证码"/>
        </p>
    </div>
    <input type="button" value="查询"  class="btns search" @click="query"/>

    这里是script里的内容

    export default {
              data: function () {
                return {
                    disabled:false,
                    time:0,
                    btntxt:"获取验证码",
                    formMess:{
                        email:this.email,
                        phone:this.phone
                    }
                }
              },
              mounted: function () {
                  
              },
            methods:{
                //验证手机号码部分
                sendcode(){
                    var reg=11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/;
                    //var url="/nptOfficialWebsite/apply/sendSms?mobile="+this.ruleForm.phone;
                    if(this.phone==''){
                       alert("请输入手机号码");
                    }else if(!reg.test(this.phone)){
                        alert("手机格式不正确");
                    }else{
                        this.time=60;
                        this.disabled=true;
                        this.timer();
                        /*axios.post(url).then(
                            res=>{
                            this.phonedata=res.data;
                        })*/
                   }
                },
                timer() {
                    if (this.time > 0) {
                         this.time--;
                         this.btntxt=this.time+"s后重新获取";
                         setTimeout(this.timer, 1000);
                    } else{
                         this.time=0;
                         this.btntxt="获取验证码";
                         this.disabled=false;
                    }
                },
                query(){
                    var formMess=this.formMess
                    Axios.post(api+"/order/select/reception", formMess)
                     .then(function (res) {
                         if(res.data.code==200){
                             console.log(res.data.data);
                              this.productResult=res.data.data;
                              this.productResult.length=3;
                         }else if(res.data.code==400){
                             alert(res.data.message)
                         }
                          
                      }.bind(this))
                },
                //邮箱验证
                sendEmail(){
                    var regEmail=/^[A-Za-zd]+([-_.][A-Za-zd]+)*@([A-Za-zd]+[-.])+[A-Za-zd]{2,5}$/;
                    if(this.email==''){
                       alert("请输入邮箱");
                    }else if(!regEmail.test(this.email)){
                        alert("邮箱格式不正确");
                    }
                }
            }
        }

  • 相关阅读:
    《MongoDB入门教程》第03篇 MongoDB基本概念
    Flutter 常见异常分析
    openfeign整合sentinel进行降级
    Hadoop集群搭建
    网络安全的规划
    Node.js_会话控制
    Java 基于 SpringBoot 的简历招聘系统
    如何在华为OD机试中获得满分?Java实现【任务总执行时长】一文详解!
    Houdini 19.5更新Karma渲染器新功能,来了解一下
    【代码扫描修复】绝对路径遍历
  • 原文地址:https://blog.csdn.net/weixin_43167662/article/details/125554890