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

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

短信验证平台我使用的是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>

来源：CSDN

作者：Lz先生

链接：https://blog.csdn.net/qq_42583216/article/details/104795274