您好,登錄后才能下訂單哦!
開發的很多場景中都會用到手機號的校驗和驗證碼的校驗,具體實現如下
<div> <input type="text" name="phonenumber" placeholder="請輸入您的手機號碼" /> <input type="text" name="verify" placeholder="請輸入驗證碼" /><input type="button" value="發送驗證碼" class="verify_code" /> <input type="button" name="btn" placeholder="立即領取" class="btn" /> </div> <!--彈出層--> <div class="layer" > <p>領取成功</p> <img src="img/close-btn.png" class="close-btn"> </div>
$(document).ready(function(){ //點擊關閉按鈕關閉彈出層 $(".close-btn").click(function(){ $("layer").hide(); }); //只有再手機號和驗證碼驗證為有效后,點擊領取按鈕跳出彈出層事件才生效 $('[name=btn]').click(function(){ if(!validate()){ return false; } $(".layer").show(); }); //驗證 function validate(){ //正則表達式,十一位數字的電話號碼 var phoneReg = /^(0|86|17951)?(13[0-9]|15[012356789]|17[0-9]|18[0-9]|14[57])[0-9]{8}$/; //如果手機號碼輸入為空,則再輸入框后插入錯誤信息 if($('[name=phonenumber]').val==''){ $('[name=phonenumber]').after(errMsg('手機號碼不能為空!')); return false; } //驗證輸入的電話號碼是否是11位數字 if(!phoneReg.test($('[name=phonenumber]').val())){ $('[name=phonenumber]').after(errMsg('請輸入正確的手機號碼!')); return false; } //驗證碼不為空驗證 if($('[name=verify]').val==''){ $('[name=verify]').after(errMsg('驗證碼不能為空!')); return false; } $('.error').remove(); return true;} //點擊發送驗證碼按鈕,進行倒計時 $('.verify_code').on('',function(){ if(!this.b){ setTimer(); this.b=true; } }) //倒計時 function setTimer(){ var time=60; var timers=setInterval(function(){ time--; if(time <= 0){ time=0; console.log(time); $('.verify_code').eq(0)[0].b=false; $('.verify_code').val('獲取驗證碼'); clearInterval(timers); return false; } $('.verify_code).val( time+ '秒后重新獲取'); },1000) } //錯誤信息顯示 function errMsg(html){ $('.error').remove(); var str='<div class="error">*'+html+'</div>'; return str; } });
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持億速云。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。