手机短信校验(前端js)

1、页面发送短信验证码的表单

<div class="form-group">
    <div>
       <input type="text"  id="phone" class="form-control" placeholder="请输入手机号码">
    </div>
    <div style="justify-content:flex-end;display: flex;">
       <button type="button" class="btn btn-info"  id="send">点击获取验证码</button>
    </div>
</div>

<div class="form-group">
    <input type="text" name="securityCode" class="form-control"  placeholder="请输入验证码">
</div>

2、发送短信验证码的JS

<script type="text/javascript">
        $("#send").click(function (){
            sendMsg($("#send"));
        });

        //用ajax提交到后台的发送短信接口
        function sendMsg(obj){
            var phone = $("#phone").val();
            var result = isPhoneNum();
            if(result) {
                $.ajax({
                    url:"http://127.0.0.1:8888/sendMsg",
                    data:{phone:phone},
                    dataType:"json",
                    type:"post",
                    async : false,
                    cache : false,
                    success:function(res){
                        if(res){
                            alert("验证码发送成功");
                        }
                    },
                    error:function(){
                        alert("验证码发送失败");
                    }
                })
                //开始倒计时
                setTime(obj);
            }

        }

        //设置60s倒计时实现逻辑
        var countdown = 60;
        function setTime(obj) {
            if (countdown == 0) {
                obj.prop('disabled', false);
                obj.text("点击获取验证码");
                //60秒过后button上的文字初始化,计时器初始化;
                countdown = 60;
                return;
            } else {
                obj.prop('disabled', true);
                obj.text("("+countdown+"s)后重新发送");
                countdown--;
            }
            //每1000毫秒执行一次
            setTimeout(function() { setTime(obj) },1000);
        }


        //校验手机号是否合法
        function isPhoneNum(){
            var phonenum = $("#phone").val();
            //正则校验
            var reg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
            if(!reg.test(phonenum)){
                alert('请输入有效的手机号码！');
                return false;
            }else{
                return true;
            }
        }
    </script>

3、后台接口随机生成验证码,调用第三方短信服务商接口发送短信,然后将验证码返回前端,用于前端校验对比即可。