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 相关文章推荐
javascript cookie解码函数(兼容ff)
Mar 17 Javascript
js 自定义个性下拉选择框示例
Aug 20 Javascript
JS实现闪动的title消息提醒效果
Jun 20 Javascript
JavaScript基础函数整理汇总
Jan 30 Javascript
JS判断网页广告是否被浏览器拦截过滤的代码
Apr 05 Javascript
JS实现密码框根据焦点的获取与失去控制文字的消失与显示效果
Nov 26 Javascript
js实现多图左右切换功能
Aug 04 Javascript
js实现各种复制到剪贴板的方法(分享)
Oct 27 Javascript
JavaScript数据结构之二叉树的遍历算法示例
Apr 13 Javascript
jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法
Jan 18 jQuery
微信小程序实现滴滴导航tab切换效果
Jul 24 Javascript
使用TS来编写express服务器的方法步骤
Oct 29 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
Linux安装配置php环境的方法
2016/01/14 PHP
基于Swoole实现PHP与websocket聊天室
2016/08/03 PHP
phpstudy默认不支持64位php的解决方法
2017/02/20 PHP
PHP面向对象中new self()与 new static()的区别浅析
2017/08/17 PHP
laravel实现按时间日期进行分组统计方法示例
2019/03/23 PHP
qTip2 精致的基于jQuery提示信息插件
2012/02/17 Javascript
JS图片预加载 JS实现图片预加载应用
2012/12/03 Javascript
js原型继承的两种方法对比介绍
2014/03/30 Javascript
JQuery中使用.each()遍历元素学习笔记
2014/11/08 Javascript
jQuery构造函数init参数分析续
2015/05/13 Javascript
javascript字符串与数组转换汇总
2015/05/26 Javascript
基于zepto的移动端轻量级日期插件--date_picker
2016/03/04 Javascript
jquery实现简单Tab切换菜单效果
2020/07/17 Javascript
js捕捉键盘事件和按键键值的方法
2016/10/10 Javascript
浅析如何利用angular结合translate为项目实现国际化
2016/12/08 Javascript
vue解决跨域路由冲突问题思路解析
2017/11/03 Javascript
vue 详情跳转至列表页实现列表页缓存
2019/03/27 Javascript
nodejs中的异步编程知识点详解
2021/01/17 NodeJs
[46:20]TFT vs Secret Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
Python中查看文件名和文件路径
2017/03/31 Python
django使用图片延时加载引起后台404错误
2017/04/18 Python
Python3.6.2调用ffmpeg的方法
2019/01/10 Python
python实现连连看辅助之图像识别延伸
2019/07/17 Python
Django之使用内置函数和celery发邮件的方法示例
2019/09/16 Python
python的time模块和datetime模块实例解析
2019/11/29 Python
DataFrame.to_excel多次写入不同Sheet的实例
2019/12/02 Python
python实现FTP文件传输的方法(服务器端和客户端)
2020/03/20 Python
python 读txt文件,按‘,’分割每行数据操作
2020/07/05 Python
利用django创建一个简易的博客网站的示例
2020/09/29 Python
美丽的现代设计家具:2Modern
2018/07/26 全球购物
预备党员党校学习自我评价分享
2013/11/12 职场文书
副厂长岗位职责
2014/02/02 职场文书
《陈涉世家》教学反思
2014/04/12 职场文书
防邪知识进家庭活动方案
2014/08/26 职场文书
2019毕业论文致谢词
2019/06/24 职场文书
node快速搭建后台的实现步骤
2022/02/18 NodeJs