JS實現(xiàn)表單驗證功能(驗證手機號是否存在,驗證碼倒計時)
更新時間:2016年10月11日 10:39:20 作者:danran68
js實現(xiàn)表單驗證功能,通過js代碼驗證手機號是否存在驗證碼倒計時功能,代碼簡單易懂非常不錯,具有參考借鑒價值,感興趣的朋友一起看看吧
廢話不多說直接上代碼
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=""> <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">登錄密碼</label> <div class="pull-left"> <input type="password" class="input-control put-width440 fistpwd" id="inputpwd" name="password" placeholder="請輸入密碼" 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">驗證碼</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" /> <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)">注冊</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; //間隔函數(shù),1秒執(zhí)行
var curCount;//當前剩余秒數(shù)
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 + "秒內(nèi)輸入驗證碼");
InterValObj = window.setInterval(SetRemainTime, 1000); //啟動計時器,1秒執(zhí)行一次
//產(chǎn)生驗證碼
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處理函數(shù)
function SetRemainTime() {
if (curCount == 0) {
window.clearInterval(InterValObj);//停止計時器
$("#btnSendCode").removeAttr("disabled");//啟用按鈕
$("#btnSendCode").val("重新發(fā)送驗證碼");
code = ""; //清除驗證碼。如果不清除,過時間后,輸入收到的驗證碼依然有效
}
else {
curCount--;
$("#btnSendCode").val("請在" + curCount + "秒內(nèi)輸入驗證碼");
}
}
})
</script>
以上所述是小編給大家介紹的JS實現(xiàn)表單驗證功能(驗證手機號是否存在,驗證碼倒計時),希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關文章
javascript將浮點數(shù)轉(zhuǎn)換成整數(shù)的三個方法
將浮點數(shù)轉(zhuǎn)換成整數(shù)方法有很多,本例為大家介紹常用的三個方法,如果讀者想到其他好用方法,也可以交流一下2014-06-06
判斷目標是否是window,document,和擁有tagName的Element的代碼
判斷目標是否是window,document,和擁有tagName的Element的代碼,需要的朋友可以參考下。2010-05-05
微信小程序中不同頁面?zhèn)鬟f參數(shù)的操作方法
這篇文章主要介紹了微信小程序中不同頁面?zhèn)鬟f參數(shù)的操作方法,在開發(fā)項目中,避免不了不同頁面之間傳遞數(shù)據(jù)等,那么就需要進行不同頁面之間的一個數(shù)據(jù)傳遞的,需要的朋友可以參考下2023-12-12

