前端HTML 点击发送短信验证 js代码

1.HTML(+js库)

<div class="form-group">
    <label for="email_input">手机号</label>
    <input name="phone" type="text" class="form-control" id="phone_input" placeholder="请输入手机号">
    <span id="phone_info" class="res-error"></span>
</div>
<div class="form-group">

    <label for="email_input" style="float: left">短信验证码</label>

    <div class="clear"></div>

    <input name="smscode" type="text" class="form-control"id="smscode" placeholder="请输入验证码">


    <input type="button" value="发送验证码" id="sendsms" disabled>


    <span id="smscode_info" class="res-error"></span>
</div>

2.js

<script>
{# 页面加载完成之后执行, 能获取页面上的所有对象 #}
    $(function () {

        {# 如果手机号input中没有数据，那么发送短信按钮不能点击 #}
        {# keyup 点击按钮,松开 触发 #}
        $('#phone_input').keyup(function(){

            {# trim()去除左右两边空格 #}
            if($(this).val().trim()!=''){
                $('#sendsms').prop('disabled', false)
        }
    });

        {# 获取发送验证码按钮点击事件 #}
        $('#sendsms').click(function () {
           {# 判断手机号是否符合要求 #}
            {# 获取手机号 #}
            var mobile = $('#phone_input').val().trim();
            {# 编写正则表达式规则 #}
            var re = /^1[3-9]\d{9}$/;
             {# 利用正则判断手机号是否正确 #}
            if(!re.test(mobile)){
                {# 手机号格式不正确,输出错误信息 #}
                $('#phone_info').html('手机号格式错误').css('color','red');
                return
            }
            {# 再次输入正确手机号,清空错误信息 #}
            $('#phone_info').html('');

            {# 使用箭头函数(function() --> ()=> ),可以直接使用$(this) #}
            {# var _this = $(this); #}

            {# 设置倒计时长 #}
            var num = 59
            $('#sendsms').val(num+'秒');
            {# 设置计时器 #}
            var t = setInterval(()=>{

                {# disabled checked selected enabled 这些属于input元素的属性 #}
                {# 这些属性不能够用 attr 来获取，必须用prop获取 #}
                {# 除了这些属性，其他任何属性都用 attr 获取 #}
                {# prop 不能获取自定义属性 #}

                {# 为了防止触发多个定时器, 在定时的时间之内，不能在点击 #}
                $(this).prop('disabled', true);

                num -= 1;
                $('#sendsms').val(num+'秒');

                {# 停止计时器 #}
                if(num==0){

                    clearInterval(t);
                    $('#sendsms').val('发送验证码');
                    $(this).prop('disabled', false);

                    {# _this.prop('disabled', false) #}

                }

            },1000);

            {# 通过ajax执行后端程序， 发送短信验证码 #}
            $.ajax({
                url: '{% url "user:sms" %}',
                type: 'post',
                dataType: 'json',
                data: {'mobile': mobile},
                headers: {'X-CSRFToken': '{{ csrf_token }}'},
                success: function (res) {
                    if(res.status=='ok'){
                        $('#smscode_info').html('发送验证码成功').css('color', 'green')
                    }
                }
            })

        })

    })
</script>

3.效果图

• 错误手机号
  
• 正确手机号