JS实现表单验证功能(验证手机号是否存在，验证码倒计时)
废话不多说直接上代码
html代码：
<formmethod="post"id="form_hroizon"enctype="multipart/form-data"action="/"> <inputtype="hidden"name="phoneTemplet"id="phoneTemplet"> <inputtype="hidden"name="regType"id="regType"> <divclass="c-login-input"> <divclass="form-group"> <labelfor="inputEmail3"class="label-controllabel-width120pull-leftt-r-ff16">手机号</label> <divclass="pull-left"> <inputtype="tel"autocomplete="off"class="input-controlput-width440j-telphone"id="inputtel"name="phones"placeholder="请输入您的电话号码"value=""> <spanclass="f12redtel-msg"></span> <divclass="c-login-errtips"style="display:none;"></div> </div> </div> <divclass="form-group"> <labelfor="inputEmail3"class="label-controllabel-width120pull-leftt-r-ff16">登录密码</label> <divclass="pull-left"> <inputtype="password"class="input-controlput-width440fistpwd"id="inputpwd"name="password"placeholder="请输入密码"value=""> <spanclass="f12redpwd-msg"></span> </div> </div> <divclass="form-group"> <labelfor="inputEmail3"class="label-controllabel-width120pull-leftt-r-ff16">验证码</label> <divclass="pull-left"> <inputtype="tel"class="input-controlput-with100vericode"id="inputEmail3"name="code"placeholder="请输入验证码"> <inputid="btnSendCode"type="button"value="免费获取验证码"class="j-getcodef12b-i-kbtncode-btnc-p"/> <spanclass="f12redcode-msg"></span> </div> </div> </div> <divclass="form-group"> <aclass="j-sends"type="submit"name="submit"target="_self"href="javascript:void(0)">注册</a> </div> </form>
JS代码：
<scripttype="text/javascript">
$(function(){
$(".j-sends").click(function(){
varphones=$.trim($(".j-telphone").val());
varisMobile=/^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
if(!phones){
$('.tel-msg').text('请输入手机号码，不能为空');
returnfalse;
}elseif(!isMobile.test(phones)){
$('.tel-msg').text('请输入有效的手机号码');
returnfalse;
}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);//
returnfalse;
}else{
$('.tel-msg').html(data.errorInfo);//可
}
},
error:function(){
}
});
}
})
//验证码倒计时
varInterValObj;//timer变量，控制时间
varcount=30;//间隔函数，1秒执行
varcurCount;//当前剩余秒数
varcode="";//验证码
varregType;
varphoneTemplet;
varcodeLength=4;//验证码长度
$(".code-btn").click(function(){
curCount=count;
varphone=$.trim($(".j-telphone").val());//手机号码
varisMobile=/^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
varjtel=$(".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(vari=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处理函数
functionSetRemainTime(){
if(curCount==0){
window.clearInterval(InterValObj);//停止计时器
$("#btnSendCode").removeAttr("disabled");//启用按钮
$("#btnSendCode").val("重新发送验证码");
code="";//清除验证码。如果不清除，过时间后，输入收到的验证码依然有效
}
else{
curCount--;
$("#btnSendCode").val("请在"+curCount+"秒内输入验证码");
}
}
})
</script>
以上所述是小编给大家介绍的JS实现表单验证功能(验证手机号是否存在，验证码倒计时)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！