Just go to the code without saying much nonsense
html code:
<form method="post" enctype="multipart/form-data" action="/"> <input type="hidden" name="phoneTemplet" > <input type="hidden" name="regType" > <div class="c-login-input"> <div class="form-group"> <label for="inputEmail3" class="label-control label-width120 pull-left t-r-f f16">Phone number</label> <div class="pull-left"> <input type="tel" autocomplete="off" class="input-control put-width440 j-telphone" name="phones" placeholder="Please enter your phone number" value=""> <span class="f12 red tel-msg"></span> <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">Login password</label> <div class="pull-left"> <input type="password" class="input-control put-width440 fistpwd" name="password" placeholder="Please enter your password" value=""> <span class="f12 red pwd-msg"></span> </div> </div> <div class="form-group"> <label for="inputEmail3" class="label-control label-width120 pull-left t-r-f f16">Verification code</label> <div class="pull-left"> <input type="tel" class="input-control put-with100 vericode" name="code" placeholder="Please enter verification code"> <input type="button" value="Get verification code for free" class="j-getcode f12 b-i-k btn code-btn c-p" /> <span class="f12 red code-msg"></span> </div> </div> </div> <div class="form-group"> <a class="j-sends" type="submit" name="submit" target="_self" href="javascript:void(0)">register</a> </div> </form>
JS code:
<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('Please enter your mobile phone number, it cannot be empty'); return false; }else if (!(phones)) { $('.tel-msg').text('Please enter a valid mobile phone number'); return false; }else{ //Is the mobile phone number present?$.ajax({ url : "/", // type:"post", dataType:"JSON", data:{ phones: phones, }, contentType:'application/json;charset=UTF-8', //async: false, success:function(data){ if ( == "1") { // $('.tel-msg').html(); // return false; }else{ $('.tel-msg').html(); //Can} }, error:function(){ } }); } }) //Countdown to the verification codevar InterValObj; // timer variable, control timevar count = 30; //The interval function is executed in 1 secondvar curCount;//The current number of seconds remainingvar code = ""; //Verification codevar regType; var phoneTemplet; var codeLength = 4;//Verification code length$(".code-btn").click(function(){ curCount = count; var phone=$.trim($(".j-telphone").val());//phone numbervar isMobile=/^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/; var jtel = $(".j-telphone"); if(phone != "" && (phone) && ==11){ //Set the button effect and start timing$("#btnSendCode").attr("disabled", "true"); $("#btnSendCode").val("Please enter verification code in" + curCount + "Input verification code within seconds");InterValObj = (SetRemainTime, 1000); //Start the timer and execute once in 1 second//Generate verification codefor (var i = 0; i < codeLength; i++) { code += parseInt(() * 9).toString(); } //Get verification code from the background$.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(=="F"){ $(".code-msg").html(); }else{ $(".code-msg").html(); } } }); }else{ $('.tel-msg').text('Please enter a valid mobile phone number'); } }); //timer processing functionfunction SetRemainTime() { if (curCount == 0) { (InterValObj);//Stop the timer$("#btnSendCode").removeAttr("disabled");//Enable button$("#btnSendCode").val("Resend verification code");code = ""; //Clear the verification code. If it is not cleared, after the time has passed, the received verification code will still be valid} else { curCount--; $("#btnSendCode").val("Please enter verification code in" + curCount + "Input verification code within seconds");} } }) </script>
The above is the JS implementation form verification function introduced by the editor (verify whether the mobile phone number exists, the verification code countdown) I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support for my website!