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 相关文章推荐
实现连缀调用的map方法(prototype)
Aug 05 Javascript
js实现禁止中文输入的方法
Jan 14 Javascript
对js eval()函数的一些见解
Aug 15 Javascript
最常见的左侧分类菜单栏jQuery实现代码
Nov 28 Javascript
JS搜狐面试题分析
Dec 16 Javascript
ECMAScript6--解构
Mar 30 Javascript
node.js中EJS 模板快速入门教程
May 08 Javascript
vue实现父子组件之间的通信以及兄弟组件的通信功能示例
Jan 29 Javascript
「中高级前端面试」JavaScript手写代码无敌秘籍(推荐)
Apr 08 Javascript
Vue源码探究之虚拟节点的实现
Apr 17 Javascript
JS去除字符串最后的逗号实例分析【四种方法】
Jun 20 Javascript
详解js location.href和window.open的几种用法和区别
Dec 02 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
php网页病毒清除类
2014/12/08 PHP
Yii2创建控制器(createController)方法详解
2016/07/23 PHP
javascript仿php的print_r函数输出json数据
2013/09/13 Javascript
js中javascript:void(0) 真正含义
2020/11/05 Javascript
jQuery实现鼠标经过时出现隐藏层文字链接的方法
2015/10/12 Javascript
js数组去重的5种算法实现
2015/11/04 Javascript
jQuery遍历节点树方法分析
2016/09/08 Javascript
JS 调试中常见的报错问题解决方法
2017/05/20 Javascript
深入理解AngularJs-scope的脏检查(一)
2017/06/19 Javascript
jQuery图片缩放插件smartZoom使用实例详解
2017/08/25 jQuery
原生JavaScript实现随机点名表
2021/01/14 Javascript
python清除字符串里非数字字符的方法
2015/07/02 Python
Python中字符串的常见操作技巧总结
2016/07/28 Python
python数据清洗系列之字符串处理详解
2017/02/12 Python
Python IDLE 错误:IDLE''s subprocess didn''t make connection 的解决方案
2017/02/13 Python
python指定写入文件时的编码格式方法
2018/06/07 Python
Python批处理更改文件名os.rename的方法
2018/10/26 Python
Django项目之Elasticsearch搜索引擎的实例
2019/08/21 Python
Python爬虫爬取、解析数据操作示例
2020/03/27 Python
python实现手势识别的示例(入门)
2020/04/15 Python
python实现批处理文件
2020/07/28 Python
Python加载数据的5种不同方式(收藏)
2020/11/13 Python
详解Css3新特性应用之过渡与动画
2017/01/10 HTML / CSS
详解CSS3的opacity属性设置透明效果的用法
2016/05/09 HTML / CSS
Avène雅漾美国官方网站:敏感肌肤护理专家
2016/10/24 全球购物
介绍一下Linux文件的记录形式
2013/09/29 面试题
七一表彰活动方案
2014/01/18 职场文书
大学生水果店创业计划书
2014/01/28 职场文书
信息技术教学反思
2014/02/12 职场文书
建房协议书
2014/04/11 职场文书
节约用水演讲稿
2014/05/21 职场文书
助学感谢信范文
2015/01/21 职场文书
新生开学寄语大全
2015/05/28 职场文书
新闻稿标题
2015/07/18 职场文书
校园安全教育心得体会
2016/01/15 职场文书
2016年庆祝六一儿童节活动总结
2016/04/06 职场文书