针对用户在个人中心绑定手机认证的一些js代码。

需求:

1:手机号码校验(格式的校验,手机号码是否已经绑定过)---未实现

2:填完手机号码,点击发送验证码,手机会收到一条信息

3:发送验证码按钮不可用,变成重新发送的倒计时

1):60秒以后又可以发送

2):前台页面刷新,点击发送验证码按钮,只要不到时间60s,仍然不能发送,前台提示  发送频繁

4:输入收到的手机验证码

5:点击确定,验证验证码正确,绑定手机

1):验证码错误,无法绑定

2):绑定的手机号必须和发送验证码的手机号相同

3):验证码本身设置过期时间  一般5分钟

js代码:

 1     $(function(){
 2         //如果没绑定手机才会出现这些代码
 3         <#if !userinfo.isBindPhone>
 4         //给点击绑定手机添加时间
 5         $("#btn_showBindPhone").click(function(){
 6             $("#bindPhoneModal").modal("show");
 7         })
 8
 9         //点击发送按钮的倒计时处理
10         $("#sendVerifyCode").click(function(){
11             var phonenumber=$("#phoneNumber").val();
12             var _me=$(this);
13             if(phonenumber){
14                 _me.attr("disabled",true);
15                 var time=60;
16                 $.ajax({
17                     dataType:"json",
18                     type:"POST",
19                     url:"/sendVerifyCode.do",
20                     data:{phoneNumber:phonenumber},
21                     success:function(data){
22                         if(data.success){
23                             //发送成功,开始倒计时处理
24                             var timer=window.setInterval(function(){
25                                 time--;
26                                 if(time>0){
27                                     _me.text(time+"秒后重新发送!");
28                                 }else{
29                                     //清除计时器
30                                     window.clearInterval(timer);
31                                     _me.text("重新发送验证码");
32                                     _me.attr("disabled",false);
33                                 }
34                             },1000);
35                         }else{
36                             //发送失败,提示错误信息
37                             $.messager.popup(data.msg);
38                             _me.attr("disabled",false);//重置按钮为可用
39                         }
40                     }
41                 });
42             }
43         });
44
45         //提交绑定手机按钮响应事件
46         $("#bindPhone").click(function(){
47             $("#bindForm").ajaxSubmit(function(data){
48                 if(data.success){
49                     $.messager.confirm("提示","绑定手机成功!",function(){
50                         //绑定成功,重新加载页面
51                         window.location.reload();
52                     });
53                 }else{
54                     $.messager.popup(data.msg);
55                 }
56             });
57         })
58     });
59         </#if>

模态框:

 1 <#if !userinfo.isBindPhone>
 2         <!-- 绑定手机模式窗口 -->
 3         <div class="modal fade" id="bindPhoneModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
 4           <div class="modal-dialog" role="document">
 5             <div class="modal-content">
 6               <div class="modal-header">
 7             <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
 8             <h4 class="modal-title" id="exampleModalLabel">绑定手机</h4>
 9               </div>
10               <div class="modal-body">
11                 <form class="form-horizontal" id="bindForm" method="post" action="/bindPhone.do">
12                     <div class="form-group">
13                             <label for="phoneNumber" class="col-sm-2 control-label">手机号:</label>
14                             <div class="col-sm-4">
15                               <input type="text" class="form-control" id="phoneNumber" name="phoneNumber" />
16                               <button id="sendVerifyCode" class="btn btn-primary" type="button">发送验证码</button>
17                             </div>
18                         </div>
19                         <div class="form-group">
20                             <label for="verifyCode" class="col-sm-2 control-label">验证码:</label>
21                             <div class="col-sm-4">
22                               <input type="text" class="form-control" id="verifyCode" name="verifyCode" />
23                             </div>
24                         </div>
25                 </form>
26               </div>
27               <div class="modal-footer">
28                 <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
29                 <button type="button" class="btn btn-primary" id="bindPhone">保存</button>
30               </div>
31             </div>
32           </div>
33         </div>
34  </#if>

原文地址:https://www.cnblogs.com/xuyou551/p/8118561.html

时间: 2024-10-22 11:32:54

针对用户在个人中心绑定手机认证的一些js代码。的相关文章

[日常] 项目中业务绑定手机验证手机号的实现

在进行设置自动转发,增删来信规则,修改密码等操作时,增加必须绑定手机并且验证手机号的安全认证操作.在这个过程中使用控制反转的设计模式封装一个单独的类可以灵活的复用代码和调整逻辑 首先定义一个SecureTel的class类,这个类里面提供所有业务方法.在生成SecureTel对象的时候,需要使用框架内提供的一个生成对象的方法来操作,不能直接去new这个类,这个方法就是Sina_Application::resource('securetel'),在这个生成器中,会去调用SecureTel类中的c

自定义HttpModule,用于未登录用户,不弹出Windows认证窗口,而是跳转回SSO站点

2012年的一篇随笔记录,可以学习到如何自定义HttpModule,而具体里面针对需求开发的代码,可能未必能让大伙了解到什么,可快速扫描而过. 1 using System; 2 using System.Web; 3 4 using System.Configuration; 5 using System.Web.Configuration; 6 using Microsoft.SharePoint; 7 using System.Net; 8 using System.Security.Pr

server宕机监控、检測、报警程序(139绑定手机短信报警)monitor_down.sh

宕机监控报警程序 一.   需求来源 宕机对运维人员来说,最痛苦了.怎样检測一台server是否还在正常执行,假设该server宕机,怎样在第一时间监測到并通知一线运维人员进行维护,最大化降低损失. 二.   程序功能 对指定server进行宕机监測,假设确实宕机,则发送email到139邮箱(绑定手机,实现短信报警) 三.源程序 #!/bin/bash #author longxibendi #blog http://blog.csdn.net/longxibendi #function pi

SpringCloud学习心得—1.2—Eureka注册中心的密码认证、高可用的设置

SpringCloud学习心得—1.2—Eureka注册中心的密码认证.高可用的设置 这是相关代码 链接 Eureka开启密码配置 添加依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-security</artifactId> </dependency> 向properties添加密码与用户名 spr

基于HTML5手机登录注册表单代码

分享一款基于HTML5手机登录注册表单代码.这是一款鼠标点击注册登录按钮弹出表单,适合移动端使用.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="demo"> <nav class="main_nav"> <ul> <li><a class="cd-signin" href="#0">登录</a></li&

jquery实现手机发送验证码的倒计时代码(转)

var wait = 60;//时间 function time(o, p) {//o为按钮的对象,p为可选,这里是60秒过后,提示文字的改变 if (wait == 0) { //o.removeAttr("disabled"); //o.val("点击发送验证码");//改变按钮中value的值 //p.html("如果您在1分钟内没有收到验证码,请检查您填写的手机号码是否正确或重新发送"); $('#'+p).removeAttr(&quo

分享JAVA用户权限管理框架源代码JAVA权限管理java源代码框架代码,学习有帮助

JAVA用户权限管理框架源代码JAVA权限管理java源代码框架代码,用户功能权限控制到菜单以及菜单的操作按钮 MyEclipse+JDK1.6+apache-tomcat-6.0.14+SQL2005/2008/2012 是一套非常成熟的框架程序,可直接用于大型系统.基础框架快速开发,及程序员学习. .兼容 IE6,7,8,9 /Firefox /Google Chrome 这些浏览器都测试过 支持3级菜单导航. 框架包括用户管理.菜单管理.角色管理.权限管理.日志管理等功能. 内容包括源代码

手机平板等移动端适配跳转URL的js代码

<script type="text/javascript"> if(/AppleWebKit.*mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.userAgent)

百度判断手机终端并自动跳转uaredirect.js代码及使用实例

百度siteapp下的一款跳转的产品,使用起来很方便.你可以用这款JS跳转到手机版,也可以跳转到任何你想跳转的位置. js代码如下: function uaredirect(f) { try { if (document.getElementById("bdmark") != null) { return } var b = false; if (arguments[1]) { var e = window.location.host; var a = window.location.