笔记:web页面短信验证功能

♀尐吖头ヾ 提交于 2020-03-12 08:51:04

在做毕业设计的时候要用到短信验证功能,就整理了一下记在这里;

短信验证平台我使用的是Bmob.后端云平台

1.js引入

在引入JQuery和Bootstrap的相关js与css文件后;
在去Bomb下载引入短信验证的js

<script src="js/bmob-min.js"></script>

2.jsp页面简例

我是要做一个通过短信验证更改密码的功能;
首先输入手机号;
输入要改的新密码;
然后就是拿出手机获取你的验证码输入了;

<form role="form" action="">
        <div class="form-group">
            <label for="phone">您的手机号:</label>
            <input type="text" class="form-control" name="phone" id="phone" />
        </div>
        <br>
        <div class="form-group">
            <label for="password1">请输入新密码:</label>
            <input type="text" class="form-control" name="password1" id="password1" />
        </div>
        <br>
        <span class="btn btn-info" id="getCode">点击获取验证码</span>
        <br><br>
        <div class="form-group">
            <label for="checkCode">输入验证码:</label>
            <input type="text" class="form-control" name="checkCode" id="checkCode" />
        </div>
        <br>
        <span class="btn btn-primary" id="submit">点击验证,更改密码</span>

    </form>

3.javascript方法

1.在javascript中首先要注册你在Bomb申请的Application ID和REST API Key。
2.然后就是发送验证码请求;
发送成功会收到短信获得验证码;
发送失败呢,他有回调函数,会有alert弹窗提示失败原因;
要是你既没有alert提示错误,也没有收到短信,那你没了,你可能是输入了别人的手机号;
3.当你得到正确的验证码并且验证后
此处you两个回调函数:

  • 验证正确验证成功的
    此处我使用了swal来提示成功;
    使用swal也要引入对应的css
  • 验证错误的
    同上使用swal提示;
/*短信验证修改密码*/
    Bmob.initialize("你的Application ID", "你的REST API Key");
    /*发送验证码*/
    $(function () {
        $("#getCode").click(function () {
            var phone = $("#phone").val();
            if (phone.length == 11) {
                console.log("手机号:" + phone);
                Bmob.Sms.requestSmsCode({"mobilePhoneNumber": phone}).then(function (obj) {
                    console.log("smsId:" + obj.smsId);
                }, function (err) {
                    alert("发送失败:" + err + ",请重新输入手机号");
                });
            } else {
                alert("请重新输入正确格式的手机号:")
            }

        });

        /*验证码验证*/
        $("#submit").click(function(){
            var phone = $("#phone").val();
            var password = $("#password1").val();
            var code = $("#checkCode").val();
            if (password==null) {
                alert("请输入新密码");
            }else if (code == null) {
                alert("请输入验证码");
            } else {
                console.log("phone:" + phone + "code:" + code + "password:" + password);
                Bmob.Sms.verifySmsCode(phone, code).then(function(obj) {
                    console.log(obj.msg);
                    if (obj.msg == "ok") {
                        swal({
                            title: "更改密码",
                            text: "更改成功!",
                            type: "success"
                        }, function () {
                            location.replace("user/update2?userId=" + phone + "&userWord=" + password);
                        });
                    }
                }, function(err){
                    console.log("验证失败:" + err);
                    swal("更改失败","验证失败","error");
                });
            }
        });
    });

4.关于swal使用;

如图所示:

swal({
                title: "Are you sure?",
                text: "请确认是否删除用户!",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "Yes, 删除!",
                cancelButtonText: "No, 不删除!",
                closeOnConfirm: false,
                closeOnCancel: false
            }, function (isConfirm) {
                if (isConfirm) {
                    swal({
                        title: "删除用户",
                        text: "删除成功!",
                        type:"success"
                    },function () {
                        location.replace("manager/delete?userId=" + userId);
                    });
                } else {
                    swal("取消删除", "你的操作已取消! :)", "error");
                }
            });

这个是比较长的swal里面的;
在这里插入图片描述
这个是回调函数中if里简洁的使用:
在这里插入图片描述
需要引入的js和css如下:

<link rel="stylesheet" href="css/sweetalert/sweetalert.css">
<script src="css/sweetalert/sweetalert.min.js"></script>
标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!