资讯专栏INFORMATION COLUMN

vue中手机号,邮箱正则验证以及60s发送验证码

nemo / 1978人阅读

摘要:页面展示如图手机号验证码查询这里是里的内容获取验证码验证手机号码部分请输入手机号码手机格式不正确后重新获取获取验证码邮箱验证请输入邮箱邮箱格式不正确

今天写了一个简单的验证,本来前面用的组件,但是感觉写的组件在此项目不是很好用,由于用到的地方比较少,所以直接写在了页面中。页面展示如图

这里是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("邮箱格式不正确");
                }
            }
        }
    }

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/51448.html

相关文章

  • vue机号邮箱正则验证以及60s发送验证

    摘要:页面展示如图手机号验证码查询这里是里的内容获取验证码验证手机号码部分请输入手机号码手机格式不正确后重新获取获取验证码邮箱验证请输入邮箱邮箱格式不正确 今天写了一个简单的验证,本来前面用的组件,但是感觉写的组件在此项目不是很好用,由于用到的地方比较少,所以直接写在了页面中。页面展示如图 showImg(https://segmentfault.com/img/bVXFwB?w=984&h...

    monw3c 评论0 收藏0
  • VeeValidate 的使用场景以及配置

    摘要:创建项目安装本文中使用的版本为在中引入例子第一个测试例子验证通过更多配置请参考官网我们只是用些常用配置和常用的验证中文配置全局配置这样就可以使用中文提示了自定义错误提示昵称不得为空写法昵称不得小于个字符 创建vue项目: vue init webpack vee cd ./vee npm run dev # or yarn run dev 安装 VeeValidate npm...

    blair 评论0 收藏0
  • API设计防重放攻击

    摘要:数据加密是否可以防止重放攻击否,加密可以有效防止明文数据被监听,但是却防止不了重放攻击。防重放机制我们在设计接口的时候,最怕一个接口被用户截取用于重放攻击。这样,这个请求即使被截取了,你也只能在内进行重放攻击。 HTTPS数据加密是否可以防止重放攻击? 否,加密可以有效防止明文数据被监听,但是却防止不了重放攻击。 防重放机制 我们在设计接口的时候,最怕一个接口被用户截取用于重放攻击。重...

    vvpvvp 评论0 收藏0

发表评论

0条评论

nemo

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<