jQuery實(shí)現(xiàn)訂單提交頁(yè)發(fā)送短信功能前端處理方法
本文實(shí)例講述了jQuery實(shí)現(xiàn)訂單提交頁(yè)發(fā)送短信功能前端處理方法。分享給大家供大家參考,具體如下:
1.效果如圖所示:
2.html代碼:
<div class="indFpho" > <p>手機(jī)號(hào)碼:</p> <p> <input type="text" name="telphone" id="telphone" value="{$order_info.consignee_mobile}" /> </p> <p class="timeT"> <input type="button" id="submitPhone" value="發(fā)送到手機(jī)"> </p> <font id="submitPhone_info">已發(fā)送,1分鐘后可重新獲取</font> <font id="telphone_info" color="red">手機(jī)號(hào)格式不正確 !</font> </div>
3.jquery代碼:
$(function(){ $('#submitPhone').bind('click',submit_success); $("#telphone").blur(function(){ //獲取手機(jī)號(hào),并去除左右兩邊空格 var telphone=$.trim($("#telphone").val()); if(is_mobile(telphone)){ $("#telphone_info").html(""); }else{ $("#telphone_info").html("手機(jī)號(hào)碼格式不正確"); return false; } }); }) //訂單提交頁(yè)-驗(yàn)證手機(jī)號(hào) function is_mobile(mobile) { if( mobile == "") { return false; } else { if( ! /^0{0,1}(13[0-9]|15[0-9]|18[0-9]|14[0-9])[0-9]{8}$/.test(mobile) ) { return false; } return true; } } //驗(yàn)證手機(jī)號(hào)碼 function checkMobile(){ var sMobile = document.getElementById('telphone').value; if(!(/^1[3|4|5|8][0-9]\d{8}$/.test(sMobile))){ popAlert("請(qǐng)輸入正確的手機(jī)號(hào)碼"); return false; }else{ return true; } } //60秒后重新獲取 var time=60; function submit_success(){ if(checkMobile()){//判斷手機(jī)號(hào)格式是否正確 $("#submitPhone_info").html('已發(fā)送,1分鐘后可重新獲取'); //發(fā)送短信 $.post("/index.php?c=goods&a=send_sms",{oid:$("#oid_info").val(),bank_radio:$('input:radio[name="bank_radio"]:checked').val(),telphone:$.trim($("#telphone").val())},function(data){//返回值 //根據(jù)訂單號(hào)、手機(jī)號(hào)及選擇的銀行來異步發(fā)送不同的短信到用戶手機(jī) }); $('#submitPhone').html(function timeends(){ if( time < 0){ time=60; document.getElementById("submitPhone").disabled=false; document.getElementById("submitPhone").value="重新獲取"; $("#submitPhone_info").html(''); }else{ document.getElementById("submitPhone").disabled=true; document.getElementById("submitPhone").value="重新獲取("+time+")"; $("#submitPhone_info").html('已發(fā)送,1分鐘后可重新獲取'); time--; a=setTimeout(timeends,1000); } }); return true; }else{//如果不是正確的手機(jī)號(hào),則返回false return false; } }
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jquery中Ajax用法總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動(dòng)畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
- jQuery實(shí)現(xiàn)購(gòu)物車多物品數(shù)量的加減+總價(jià)計(jì)算
- jQuery實(shí)現(xiàn)加入購(gòu)物車飛入動(dòng)畫效果
- 基于JQuery實(shí)現(xiàn)的類似購(gòu)物商城的購(gòu)物車
- JQuery實(shí)現(xiàn)的購(gòu)物車功能(可以減少或者添加商品并自動(dòng)計(jì)算價(jià)格)
- 純jquery實(shí)現(xiàn)模仿淘寶購(gòu)物車結(jié)算
- jQuery實(shí)現(xiàn)購(gòu)物車數(shù)字加減效果
- jQuery實(shí)現(xiàn)購(gòu)物車計(jì)算價(jià)格功能的方法
- jQuery實(shí)現(xiàn)類似淘寶購(gòu)物車全選狀態(tài)示例
- jQuery+HTML5加入購(gòu)物車代碼分享
- 基于jQuery實(shí)現(xiàn)咖啡訂單管理簡(jiǎn)單應(yīng)用
相關(guān)文章
淺析jQuery(function(){})與(function(){})(jQuery)之間的區(qū)別
本篇文章主要是對(duì)jQuery(function(){})與(function(){})(jQuery)之間的區(qū)別進(jìn)行了介紹,需要的朋友可以過來參考下,希望對(duì)大家有所幫助2014-01-01jQuery中的deferred對(duì)象和extend方法詳解
本篇文章主要介紹了jQuery中的deferred對(duì)象和extend方法,具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-05-05bootstrap與Jquery UI 按鈕樣式?jīng)_突的解決辦法
這篇文章主要介紹了bootstrap與Jquery UI 按鈕樣式?jīng)_突的解決辦法的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-09-09jquery $.ajax()取xml數(shù)據(jù)的小問題解決方法
今天想做一個(gè)用$.ajax()從xml中讀取數(shù)據(jù)的這么一個(gè)異步交互過程2010-11-11