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 相关文章推荐
js 获取中文拼音,Select自动匹配字母获取值的代码
Sep 23 Javascript
一些主流JS框架中DOMReady事件的实现小结
Feb 12 Javascript
js加载读取内容及显示与隐藏div示例
Feb 13 Javascript
JQuery中两个ul标签的li互相移动实现方法
May 18 Javascript
Vue实现web分页组件详解
Nov 28 Javascript
jQuery实现表单动态添加与删除数据操作示例
Jul 03 jQuery
vue实现图片预览组件封装与使用
Jul 13 Javascript
jQuery实现checkbox全选、反选及删除等操作的方法详解
Aug 02 jQuery
微信小程序wx.getUserInfo授权获取用户信息(头像、昵称)的实现
Aug 19 Javascript
多个Vue项目部署到服务器的步骤记录
Oct 22 Javascript
js实现日历
Nov 07 Javascript
js判断两个数组相等的5种方法
May 06 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
神族 Protoss 历史背景
2020/03/14 星际争霸
php上传图片并压缩的实现方法
2015/12/22 PHP
使用php实现从身份证中提取生日
2016/05/09 PHP
CutePsWheel javascript libary 控制输入文本框为可使用滚轮控制的js库
2010/02/07 Javascript
js 跳出页面的frameset框架示例介绍
2013/12/23 Javascript
纯js和css实现渐变色包括静态渐变和动态渐变
2014/05/29 Javascript
提升PHP安全:8个必须修改的PHP默认配置
2014/11/17 Javascript
JavaScript使用yield模拟多线程的方法
2015/03/19 Javascript
jQuery选择器及jquery案例详解(必看)
2016/05/20 Javascript
jQuery 弹出层插件(推荐)
2016/05/24 Javascript
总结JavaScript的正则与其他语言的不同之处
2016/08/25 Javascript
炫酷的js手风琴效果
2016/10/13 Javascript
javascript事件捕获机制【深入分析IE和DOM中的事件模型】
2016/12/15 Javascript
基本DOM节点操作
2017/01/17 Javascript
Vue实现双向数据绑定
2017/05/03 Javascript
js防抖和节流的深入讲解
2018/12/06 Javascript
微信小程序时间选择插件使用详解
2018/12/28 Javascript
ES6之Proxy的get方法详解
2019/10/11 Javascript
JavaScript实现浏览器网页自动滚动并点击的示例代码
2020/12/05 Javascript
[05:02]2014DOTA2 TI中国区预选赛精彩TOPPLAY第三弹
2014/06/25 DOTA
[04:45]上海特级锦标赛主赛事第三日TOP10
2016/03/05 DOTA
Python基于Matplotlib库简单绘制折线图的方法示例
2017/08/14 Python
python绘制散点图并标记序号的方法
2018/12/11 Python
Python正则表达式实现简易计算器功能示例
2019/05/07 Python
使用Python正则表达式操作文本数据的方法
2019/05/14 Python
keras导入weights方式
2020/06/12 Python
聊聊python在linux下与windows下导入模块的区别说明
2021/03/03 Python
H5 meta小结(前端必看篇)
2016/08/24 HTML / CSS
HTML5实现签到 功能
2018/10/09 HTML / CSS
澳大利亚领先的在线机械五金、园艺和存储专家:Edisons
2018/03/24 全球购物
说出ArrayList,Vector, LinkedList的存储性能和特性
2015/01/04 面试题
党小组考察意见
2015/06/02 职场文书
2016初一新生军训心得体会
2016/01/11 职场文书
2017年大学生寒假社会实践活动总结
2016/04/06 职场文书
opencv用VS2013调试时用Image Watch插件查看图片
2021/07/26 Python
Python pandas求方差和标准差的方法实例
2021/08/04 Python