SoFunction
Updated on 2025-03-03

JS implements form verification function (verify whether the mobile phone number exists, and countdown of the verification code)

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!