您的位置:88bifa必发唯一官网 > 必发88首页 > 作者会及时过来我们的【必发88首页】

作者会及时过来我们的【必发88首页】

发布时间:2019-07-02 01:25编辑:必发88首页浏览(89)

    废话不多说直接上代码

    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 class="c-login-input">
    <div class="form-group">
    <label for="inputEmail3" class="label-control label-width120 pull-left t-r-f f16">手机号</label>
    <div class="pull-left">
    <input type="tel" autocomplete="off" class="input-control put-width440 j-telphone" id="inputtel" name="phones" placeholder="请输入您的电话号码" value="">
    
    <div class="c-login-errtips" style="display:none;"></div>
    </div>
    </div>
    <div class="form-group">
    <label for="inputEmail3" class="label-control label-width120 pull-left t-r-f f16">登录密码</label>
    <div class="pull-left">
    <input type="password" class="input-control put-width440 fistpwd" id="inputpwd" name="password" placeholder="请输入密码" value="">
    
    </div>
    </div>
    <div class="form-group">
    <label for="inputEmail3" class="label-control label-width120 pull-left t-r-f f16">验证码</label>
    <div class="pull-left">
    <input type="tel" class="input-control put-with100 vericode" id="inputEmail3" name="code" placeholder="请输入验证码">
    <input id="btnSendCode" type="button" value="免费获取验证码" class="j-getcode f12 b-i-k btn code-btn c-p" />
    
    </div>
    </div>
    </div>
    <div class="form-group">
    <a class="j-sends" 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>
    

    以上所述是小编给大家介绍的JS实现表单验证功能(验证手机号是否存在,验证码倒计时),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

    您可能感兴趣的文章:

    • React-Native中使用验证码倒计时的按钮实例代码
    • jQuery实现倒计时重新发送短信验证码功能示例
    • jQuery实现发送验证码并60秒倒计时功能
    • JS实现用户注册时获取短信验证码和倒计时功能
    • JS/jQ实现免费获取手机验证码倒计时效果
    • 必发88首页,Android账号注册实现点击获取验证码倒计时效果
    • IOS实现验证码倒计时功能(二)
    • jquery实现手机发送验证码的倒计时代码
    • JS实现验证码倒计时的注册页面

    本文由88bifa必发唯一官网发布于必发88首页,转载请注明出处:作者会及时过来我们的【必发88首页】

    关键词: 必发88首页

上一篇:这9个权限是三个三个一组的

下一篇:没有了