你的位置:首页 > Java教程

[Java教程]表单验证(验证手机号是否存在,验证码倒计时)


话不投机,话就多,直接上代码

css代码:

html代码:

<form method="post" id="form_hroizon" enctype="multipart/form-data" action="/">
    <input type="hidden" name="phoneTemplet" id="phoneTemplet">
    <input type="hidden" name="regType" id="regType">
    <div >
        <div >
            <label for="inputEmail3" >手机号</label>
            <div >
                <input type="tel" autocomplete="off" id="inputtel" name="phones" placeholder="请输入您的电话号码" value="">
                <span ></span>
                <div ></div>
            </div>
        </div>
        <div >
            <label for="inputEmail3" >登录密码</label>
            <div >
                <input type="password" id="inputpwd" name="password" placeholder="请输入密码" value="">
                <span ></span>
            </div>
        </div>
        <div >
            <label for="inputEmail3" >验证码</label>
            <div >
                <input type="tel" id="inputEmail3" name="code" placeholder="请输入验证码">
                <input id="btnSendCode" type="button" value="免费获取验证码" />
                <span ></span>
            </div>
        </div>
     </div>
   
    <div >
        <a type="submit" name="submit" target="_self" href="javascript:void(0)">注册</a>
    </div>
</form>

JS代码:

<script type="text/javascript">
    $(function(){
        $(".j-sends").click(function(){
            var phones = $.trim($(".j-telphone").val());
            var isMobile=/^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
            if(!phones){
                 $('.tel-msg').text('请输入手机号码,不能为空');
                 return false;
            }else if (!isMobile.test(phones)) {
                $('.tel-msg').text('请输入有效的手机号码');
                return false;
            }else{
                //手机号码是否存在
                $.ajax({
                    url : "/",  //
                    type:"post",
                    dataType:"JSON",
                    data:{
                        phones: phones,
                    },
                    contentType:'application/json;charset=UTF-8',
                    //async: false,
                    success:function(data){
                        if (data.flag == "1") {  //
                            $('.tel-msg').html(data.errorInfo); //
                            return false;
                        }else{
                            $('.tel-msg').html(data.errorInfo);  //可
                        }
                    },
                    error:function(){
                    }
                });        
            }
        })
        
    //验证码倒计时
    var InterValObj; //timer变量,控制时间  
    var count = 30; //间隔函数,1秒执行  
    var curCount;//当前剩余秒数  
    var code = ""; //验证码  
    var regType;
    var phoneTemplet;
    var codeLength = 4;//验证码长度  
    $(".code-btn").click(function(){
        curCount = count;  
        var phone=$.trim($(".j-telphone").val());//手机号码  
        var isMobile=/^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
        var jtel = $(".j-telphone");
        if(phone != "" && isMobile.test(phone) && phone.length==11){  
            //设置button效果,开始计时  
            $("#btnSendCode").attr("disabled", "true");  
            $("#btnSendCode").val("请在" + curCount + "秒内输入验证码");  
            InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器,1秒执行一次
            //产生验证码  
            for (var i = 0; i < codeLength; i++) {  
                code += parseInt(Math.random() * 9).toString();  
            }
            
            //向后台获验证码
             $.ajax({  
                url : base + "/",
                type: "POST",
               // dataType: "text",  
               // data: "phones=" + phone + "&code=" + code,   
                dataType: "JSON",
                data:{
                    phones:phone,
                    code: code,
                    regType:"1",
                    phoneTemplet:"phone_uc"
                },
                success: function (data){
                    if(data.flag=="F"){
                        $(".code-msg").html(data.errorInfo);                   
                    }else{
                        $(".code-msg").html(data.errorInfo);
                    }
                }  
            });  
        }else{  
            $('.tel-msg').text('请输入有效的手机号码');                 
        }
    });
    //timer处理函数  
    function SetRemainTime() {  
        if (curCount == 0) {                  
            window.clearInterval(InterValObj);//停止计时器  
            $("#btnSendCode").removeAttr("disabled");//启用按钮  
            $("#btnSendCode").val("重新发送验证码");  
            code = ""; //清除验证码。如果不清除,过时间后,输入收到的验证码依然有效      
        }  
        else {  
            curCount--;  
            $("#btnSendCode").val("请在" + curCount + "秒内输入验证码");  
        }  
    }    
    })
</script>

喜欢就给赞个把,哈哈,对你有帮助把