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数组组合成字符串的脚本
Jan 06 Javascript
Javascript 陷阱 window全局对象
Nov 26 Javascript
js时间日期和毫秒的相互转换
Feb 22 Javascript
jQuery拖动图片删除示例
May 10 Javascript
编写自己的jQuery提示框(Tip)插件
Feb 05 Javascript
javascript实现数组中的内容随机输出
Aug 11 Javascript
使用json来定义函数,在里面可以定义多个函数的实现方法
Oct 28 Javascript
JavaScript数组和对象的复制
Mar 21 Javascript
浅谈vue的几种绑定变量的值 防止其改变的方法
Mar 01 Javascript
对layui中table组件工具栏的使用详解
Sep 19 Javascript
Javascript 关于基本类型和引用类型的个人理解
Nov 01 Javascript
jQuery实现简单评论区功能
Oct 26 jQuery
实用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
phpQuery占用内存过多的处理方法
2013/11/13 PHP
作为程序员必知的16个最佳PHP库
2015/12/09 PHP
phpMyAdmin通过密码漏洞留后门文件
2018/11/20 PHP
THINKPHP5分页数据对象处理过程解析
2020/10/28 PHP
用roll.js实现的图片自动滚动+鼠标触动的特效
2007/03/18 Javascript
jQuery 浮动广告实现代码
2008/12/25 Javascript
javascript for循环设法提高性能
2010/02/24 Javascript
jquery刷新页面的实现代码(局部及全页面刷新)
2011/07/11 Javascript
关闭浏览器时提示onbeforeunload事件
2013/12/25 Javascript
JavaScript使用Max函数返回两个数字中较大数的方法
2015/04/06 Javascript
jquery悬浮提示框完整实例
2016/01/13 Javascript
全面解析JavaScript里的循环方法之forEach,for-in,for-of
2020/04/20 Javascript
浅谈JavaScript中的分支结构
2016/07/01 Javascript
js生成随机数(指定范围)的实例代码
2016/07/10 Javascript
vue实现个人信息查看和密码修改功能
2018/05/06 Javascript
Angular-UI Bootstrap组件实现警报功能
2018/07/16 Javascript
轻松实现python搭建微信公众平台
2016/02/16 Python
python导入时小括号大作用
2017/01/10 Python
Django日志模块logging的配置详解
2017/02/14 Python
Python中shape计算矩阵的方法示例
2017/04/21 Python
Python使用matplotlib实现的图像读取、切割裁剪功能示例
2018/04/28 Python
详解python中Numpy的属性与创建矩阵
2018/09/10 Python
python实现简单加密解密机制
2019/03/19 Python
python+numpy按行求一个二维数组的最大值方法
2019/07/09 Python
如何通过python实现人脸识别验证
2020/01/17 Python
关于windows下Tensorflow和pytorch安装教程
2020/02/04 Python
python图形开发GUI库wxpython使用方法详解
2020/02/14 Python
CSS3 旋转立方体问题详解
2020/01/09 HTML / CSS
Move Free官方海外旗舰店:美国骨关节健康专业品牌
2017/12/06 全球购物
捷克原创男装和女装购物网站:Bolf.cz
2018/04/28 全球购物
经典c++面试题五
2014/12/17 面试题
优秀驾驶员先进事迹材料
2014/05/04 职场文书
多媒体教室标语
2014/06/26 职场文书
2015年社区工会工作总结
2015/05/26 职场文书
大学生创业计划书
2019/06/24 职场文书
《成长的天空》读后感3篇
2019/12/06 职场文书