js实现行为验证码发送短信

前端html

 <div class="row" style="width: 100%; height: auto;margin: auto;">
            <div style="width: 60%;margin: auto;">
                <form class="form-horizontal" style="width: 100%;overflow-y:hidden;overflow-x:hidden" >
                    <div class="form-group custom-control-inline">
                        <label class="control-label">手机号码：</label>
                        <div style="width: 61%">
                            <input class="form-control" style="height: 45px;" name="txtMobile" type="text" id="txtMobile" placeholder="输入手机号码">
                        </div>
                        <label id="tips_user">&nbsp;</label>
                    </div>

                    <div class="form-group custom-control-inline">
                        <label class="control-label">验 证 码：</label>
                        <div class="" style="width: 20%">
                            <input class="form-control" name="txtYzm" style="height: 45px;" type="text" id="txtYzm" placeholder="输入验证码" datatype="s4-20" nullmsg="请输入右边显示的验证码" sucmsg=" ">
                        </div>
                        <div style="width: 30%; padding-left:20px;" id="content">
                            <input id="btn" type="button" value="发送验证码" style="width: 100%; height: 45px;background-color:#16519d;color: white;cursor: pointer"/>
                        </div>
                        <label id="tips_code">&nbsp;</label>
                    </div>

                    <div class="form-group" style="text-align: center" id="login">
                        <input type="submit" value="立即登录" style="width: 61%;background-color:#16519d;color: white;cursor: pointer" class="btn btn-primary">
                        
                        <input type="hidden" id="turl" value="/index.aspx" />
                    </div>
                </form>
            </div>
            
        </div>

 

js

<script>
  
  
    $('#content').slideVerify({          
            baseUrl: 'https://mirror.anji-plus.com/captcha-api',  //服务器请求地址, 默认地址为安吉服务器;
            containerId: 'btn',//pop模式 必填 被点击之后出现行为验证码的元素id
            mode: 'pop',     //展示模式
            imgSize: {       //图片的大小对象,有默认值{ width: '310px',height: '155px'},可省略
                width: '400px',
                height: '200px',
            },
            barSize: {          //下方滑块的大小对象,有默认值{ width: '310px',height: '50px'},可省略
                width: '400px',
                height: '40px',
            },
            beforeCheck: function () {  //检验参数合法性的函数  mode ="pop"有效
                let flag = true;
                //实现: 参数合法性的判断逻辑, 返回一个boolean值
                return flag
            },
            ready: function () { },  //加载完毕的回调
            success: function (params) { //成功的回调
                // params为返回的二次验证参数 需要在接下来的实现逻辑回传服务器   发送验证码
                //例如: login($.extend({}, params))
                var phone = $('#txtMobile').val();
                if (phone != "") {
                    $.ajax({
                        type: "GET",
                        url: "调用后台的接口”，
                        dataType: "json",
                        timeout: 8000,
                        success: function (data, textStatus) {
                            if (data.status == 0) {
                                alert('发送失败，请填写手机号码！');
                            }
                            else if (data.status == 1) {
                                alert('发送成功，请注意查收！');
                            }
                        }
                    });
                   
                } else {
                    alert('手机号不能为空');
                }              
            },
            error: function () { }        //失败的回调
        });

 

开源项目地址https://gitee.com/anji-plus/captcha  感谢