jQuery实现订单提交页发送短信功能前端处理方法


Posted in Javascript onJuly 04, 2016

本文实例讲述了jQuery实现订单提交页发送短信功能前端处理方法。分享给大家供大家参考,具体如下:

1.效果如图所示:

jQuery实现订单提交页发送短信功能前端处理方法

jQuery实现订单提交页发送短信功能前端处理方法

2.html代码:

<div class="indFpho" >
  <p>手机号码:</p>
  <p>
    <input type="text" name="telphone" id="telphone" value="{$order_info.consignee_mobile}" />
  </p>
  <p class="timeT">
    <input type="button" id="submitPhone" value="发送到手机">
  </p>
   <font id="submitPhone_info">已发送,1分钟后可重新获取</font>
   <font id="telphone_info" color="red">手机号格式不正确 !</font>
</div>

3.jquery代码:

$(function(){
  $('#submitPhone').bind('click',submit_success);
  $("#telphone").blur(function(){
    //获取手机号,并去除左右两边空格
    var telphone=$.trim($("#telphone").val());
    if(is_mobile(telphone)){
      $("#telphone_info").html("");
    }else{
      $("#telphone_info").html("手机号码格式不正确");
    return false;
    }
  });
})
//订单提交页-验证手机号
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;
  }
}
//验证手机号码
function checkMobile(){
  var sMobile = document.getElementById('telphone').value;
  if(!(/^1[3|4|5|8][0-9]\d{8}$/.test(sMobile))){
    popAlert("请输入正确的手机号码");
    return false;
  }else{
    return true;
  }
}
//60秒后重新获取
var time=60;
function submit_success(){
  if(checkMobile()){//判断手机号格式是否正确
    $("#submitPhone_info").html('已发送,1分钟后可重新获取');
    //发送短信
    $.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){//返回值
      //根据订单号、手机号及选择的银行来异步发送不同的短信到用户手机
    });
    $('#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('已发送,1分钟后可重新获取');
        time--;
        a=setTimeout(timeends,1000);
      }
    });
    return true;
  }else{//如果不是正确的手机号,则返回false
    return false;
  }
}

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
基于jQuery的ajax功能实现web service的json转化
Aug 29 Javascript
JQuery之拖拽插件实现代码
Apr 14 Javascript
JavaScript学习笔记记录我的旅程
May 23 Javascript
jQuery基于当前元素进行下一步的遍历
May 20 Javascript
JavaScript中的null和undefined区别介绍
Jan 01 Javascript
精通JavaScript的this关键字
May 28 Javascript
AngularJs  Understanding Angular Templates
Sep 02 Javascript
JS+html5 canvas实现的简单绘制折线图效果示例
Mar 13 Javascript
详解angularjs利用ui-route异步加载组件
May 21 Javascript
webpack-dev-server自动更新页面方法
Feb 22 Javascript
原生JS+HTML5实现的可调节写字板功能示例
Aug 30 Javascript
JS使用Chrome浏览器实现调试线上代码
Jul 23 Javascript
实用jquery操作表单元素的简单代码
Jul 04 #Javascript
jQuery实现左侧导航模块的显示与隐藏效果
Jul 04 #Javascript
将List对象列表转换成JSON格式的类实现方法
Jul 04 #Javascript
jQuery解析与处理服务器端返回xml格式数据的方法详解
Jul 04 #Javascript
jQuery ajaxSubmit 实现ajax提交表单局部刷新
Jul 04 #Javascript
jQuery通用的全局遍历方法$.each()用法实例
Jul 04 #Javascript
JS构造函数与原型prototype的区别介绍
Jul 04 #Javascript
You might like
虹吸式咖啡探讨–研磨
2021/03/03 冲泡冲煮
isset和empty的区别
2007/01/15 PHP
PHP 事件机制(2)
2011/03/23 PHP
PHP内核探索:变量概述
2014/01/30 PHP
微信公众号点击菜单即可打开并登录微站的实现方法
2014/11/14 PHP
jquery获取多个checkbox的值异步提交给php的方法
2015/06/24 PHP
javascript使用正则获取url上的某个参数
2014/09/04 Javascript
js超时调用setTimeout和间歇调用setInterval实例分析
2015/01/28 Javascript
原生js的RSA和AES加密解密算法
2016/10/08 Javascript
Bootstrap modal 多弹窗之叠加显示不出弹窗问题的解决方案
2017/02/23 Javascript
jquery仿ps颜色拾取功能
2017/03/08 Javascript
js a标签点击事件
2017/03/30 Javascript
nodejs和C语言插入mysql数据库乱码问题的解决方法
2017/04/14 NodeJs
jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
2017/06/13 jQuery
使用 vue.js 构建大型单页应用
2018/02/10 Javascript
10种检测Python程序运行时间、CPU和内存占用的方法
2015/04/01 Python
利用Python实现Windows下的鼠标键盘模拟的实例代码
2017/07/13 Python
Python 文件操作的详解及实例
2017/09/18 Python
pycharm中使用anaconda部署python环境的方法步骤
2018/12/19 Python
Python爬虫实现使用beautifulSoup4爬取名言网功能案例
2019/09/15 Python
python 字典有序并写入json文件过程解析
2019/09/30 Python
使用python-pptx包批量修改ppt格式的实现
2020/02/14 Python
python读取与处理netcdf数据方式
2020/02/14 Python
Python基于network模块制作电影人物关系图
2020/06/19 Python
Dillard’s百货官网:Dillards.com
2018/05/26 全球购物
新加坡最早生产电动滑板车的制造商之一:FunsToTheFore
2020/09/08 全球购物
几个Linux面试题笔试题
2016/08/01 面试题
教师自我鉴定
2013/12/13 职场文书
销售心得体会
2014/01/02 职场文书
关于打架的检讨书
2014/01/17 职场文书
3分钟英语演讲稿
2014/04/29 职场文书
谢师宴邀请函
2015/02/02 职场文书
技术员岗位职责
2015/02/04 职场文书
同学聚会通知短信
2015/04/20 职场文书
go 原生http web 服务跨域restful api的写法介绍
2021/04/27 Golang
python中os.path.join()函数实例用法
2021/05/26 Python