css部分

    header{height: 50px;line-height: 50px;display: flex;}.callback{text-align: left;display: block;margin-left: 10px;}header span:nth-child(2){flex: 1}.content{background: black;height: 100%;overflow: hidden;padding: 0 20px;}.logo{margin: 33px 46px;}.logo img{width: 100%;height: 100%;}.content p{color: white;text-align: left;font-size: 13px;}.enjoy{color: #FF9900}.phoneNumber{display: flex;border-bottom: 1px solid white;padding: 5px 0px;}.phoneNumber input{border: none;background: black;color: white;font-size: 15px;width: 100%;outline:none;padding: 0;margin: 0}.phoneNumber button{background: black;width: 117px;height: 36px;border: 1px solid white;color: white;font-size: 13px;border-radius: 5px;outline:none;}.register{margin-top: 27px;}.Submission{height: 45px;width: 100%;margin-top: 40px;background-color: #EABC2E;border: none;outline:none;border-radius: 5px;}.introduce{margin: 54px 0;height: 154px;border: 1px solid #EABC2E;border-radius: 5px;padding-left: 11px;}.introduce ul li{text-align: left;color: white;line-height: 25px;font-size: 13px;}.introduce p{line-height: 40px;}.Copyright{height: 50px;background-color: black;color: white;margin: 0;font-size: 12px;text-align: center;}.errorFalse{position: fixed;background: rgba(0, 0, 0, 0.7);z-index: 999;width: 100%;height: 100%;top: 0;bottom: 0;display: none;}.errorFalse .link{position: absolute;top: 42%;width: 79%;left: 0;right: 0;height: 100px;margin: 0 auto;border-radius: 5px;border: 1px solid #EABC2E;}.errorFalse .link p{color: white;line-height: 0px;padding-top: 36px;}

页面部分

    <section><div class="content"><div class="logo"><img src="data:images/logo.png" alt="" srcset=""></div><p>{{Inviter_name}}邀请你注册X的现身</p><p>注册成功后,你在「X的现身」APP中将<span class="enjoy">永久享受充值优惠权限!</span></p><form name="myForm" novalidate><!-- 手机验证 --><div class="register"><div class="phoneNumber"><input type="number" placeholder="请输入您的手机号" ng-model="user.phone" name="phone" maxlength="11" required/><button ng-click="getCode()" ng-bind="description" ng-disabled="canClick">获取验证码</button></div><div class="phoneNumber"><input type="text" value="" placeholder="请输入短信中的验证码" ng-model="user.code" required/></div><button class="Submission" ng-click="register()">下一步</button></div></form><!-- 介绍 --><div class="introduce"><p>「X的现身」APP 介绍:</p><ul><li>· 一款可以玩的狼人杀主题社交APP</li><li>· 全新的狼人杀游戏体验,回归经典的面杀形式</li><li>· 在这里可以发现更多有趣的人和事</li><li>· 新一代陌生人之间的破冰神器</li></ul></div><div class="Copyright"><p>Copyright © 2017-2018 北京咱们一起文化发展有限公司</p></div></div><div class="errorFalse "><div class="link"><p>该手机号已注册「X的现身」</p><p>系统将自动为您跳转到下载页面</p></div></div>
</section>    

js 部分

var app = angular.module("myApp", []);
app.controller("myCtrl", function ($scope, $http, $interval, $location) {//初始化$scope.canClick = false;$scope.description = '获取验证码';$scope.second = 60;$scope.Inviter_name = $location.search().Inviter_name;$scope.user = {"phone": "","code": ""}//验证手机号$scope.checkphone = function () {phone = $scope.user.phone;if (phone == '') {mui.toast('手机号码不能为空');return false;} else if (!(/^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/.test(phone))) {mui.toast('请填写正确的手机号');return false;}return true;}//验证验证码  $scope.checkcode = function () {code = $scope.user.code;if (code == '') {mui.toast('验证码错误');return false;}return true;}//获取验证码$scope.getCode = function () {//验证手机号if (!$scope.checkphone()) {return false;}// 判断是canClick == true的时候说明获取验证码是点击后if ($scope.canClick == false) {$scope.url = phone = $scope.user.phone;$http({method: "GET",url: $scope.url,dataType: 'jsonp',params: {}}).success(function (data) {console.log(data)if (data.status = 22000) {var timePromise = $interval(function () {if ($scope.second <= 0) {$interval.cancel(timePromise);$scope.second = 60;$scope.description = "重发验证码";$scope.canClick = false;} else {$scope.second--;$scope.description = $scope.second + "秒后重发";$scope.canClick = true;}}, 1000);}})}}//提交信息$scope.register = function () {$scope.invite_code = $location.search().invite_code;if (!$scope.checkphone()) {return false;}if (!$scope.checkcode()) {return false;}$scope.url = $http({method: "GET",url: $scope.url,params: {}}).success(function (result) {});}
})

话不多说,直借粘贴代码用吧。 https://www.xappearance.com/m/ 这个我们的官网可以下载狼人杀的游戏。 代码不完美,请赐教。。

转载于:https://www.cnblogs.com/Zhangqwr/p/9298885.html

angular.js 验证码注册登录相关推荐

  1. php 短信验证登录,短信验证码注册登录的实现,php接入的3种方法(附示例)

    上周,有朋友需要帮忙做一个关于手机短信验证码注册登录的功能,之前没有做过,于是我查查资料,汇总出PHP接入短信验证码的3种方法,现在和大家分享: 1.cURL $curl = curl_init(); ...

  2. 使用阿里云短信验证码API发送短信验证码(配置,获取短信验证码,注册,登录,密码重置)

    获取阿里云短信验证码需要的配置信息. 如果是新用户,可以免费领取3个月,老用户的话就只能购买了,但是也不贵. 申请短信签名 申请短信模板 编写发送短信验证码的工具类 代码中我已经进行了详细的注释,也写 ...

  3. Node.js实践----注册-登录-个人中心(更换密码、头像)接口实现(包含mysql数据库)

    项目结构目录如下 1.初始化 1.1创建项目 1.2 配置cors跨域 1.3配置解析表单数据 1.4初始化路由 1.5抽离用户路由模块中的处理函数 2.注册登录 2.1新建ev_user表 2.3注 ...

  4. springboot整合redis之用户手机验证码注册登录

    目录 1搭建项目开发环境 1.1安装redis 1.1.1下载redis 1.1.2安装redis 1.1.3设置redis为windows服务 安装为windows服务 1.2启动idea 1.3增 ...

  5. JS实现注册登录发送短信验证码动态显示60S倒计时完整案例

    通常在web项目中都会遇到账户注册或者忘记密码时需要发送短信验证码的功能,虽然说这种功能很常见,但是实际开发过程中很多人还会遇到不少坑.笔者经过整理把最近项目中的用到的这个发送短信验证码动态显示60S ...

  6. 手写邮箱获取验证码注册登录功能

    找回密码的困扰 自己做了一个博客网站,有登录注册功能,但是没有找回密码功能,思考了许久,发现可以通过第三方来实现,第一想到的就是通过短信验证码,但是资金问题,一条0.1元,属是有点贵(多了就贵了),然 ...

  7. Laravel后端接口使用mews/captcha验证码注册+登录流程讲解

    大致的流程讲解: 注册流程: 获取图形验证码并正确填写->请求注册验证短信->填写注册的用户信息+短信验证码->用户注册成功 登录流程: 前端请求短信->已注册用户:返回登录的 ...

  8. Security实现手机验证码注册登录

    准备工作: <!-- 导入security依赖 --> <dependency><groupId>org.springframework.boot</grou ...

  9. C# - RestSharp实现短信验证码注册登录完整示例

    这次给大家介绍C# - RestSharp实现短信验证功能的方法,由于,短信验证码是现在不可或缺的一种身份验证方式,所以,就来看看通过C#通过RestSharp的方式实现验证功能,下面就以云市场服务商 ...

  10. 有趣的HTML实例(七) 注册登录界面Ⅱ(css+js)

    你知道,有些鸟儿是注定不会被关在牢笼里的,它们的每一片羽毛都闪耀着自由的光辉. --<肖申克的救赎> 目录 一.前言 二.往期作品回顾 三.作品介绍 四.本期代码介绍 五.效果显示 六.编 ...

最新文章

  1. 【转】:Andriod开发环境搭建 (1)
  2. 第1个实验:用汇编语言点亮一盏LED
  3. ALV通过F4事件,实现自定义搜索帮助F4
  4. linux malloc命令,减少 curl 中内存分配操作(malloc)
  5. Sqoop2开启Kerberos安全模式
  6. SpringBoot2.1.5(33)---SpringBoot整合 Thymeleaf 模板引擎
  7. 英语形容词的排列顺序
  8. FIR滤波器结合快速卷积滤波
  9. 2021走出数字化迷航,个体的获得感已成指路“灯塔”
  10. 世界性能服务器图片,王思聪花了一百万组装了台服务器:全球跑分第四 64核心128线程!快来围观~...
  11. core+Fleck+redis
  12. 御坂坂的c++学习之路(4)
  13. Dell T40和Dell T140有啥区别?
  14. 整理了一周的Python资料,包含各阶段所需网站、项目,收藏了慢慢来
  15. 计算机网络安全ipc默认共享,IPC$、ADMIN$、C$、D$都是什么?如何关闭取消删除Windows默认共享...
  16. 风水招财用品:貔貅的材质与区别
  17. 涂鸦智能股权曝光:王学集持股19.9% 公司市值蒸发超百亿美元
  18. wp/wordpress分享到微信/QQ…代码
  19. 手机组态软件利用4G网络直接通信三菱E700变频器
  20. 软件工程大作业(3)

热门文章

  1. 拓端tecdat|python在Scikit-learn中用决策树和随机森林预测NBA获胜者
  2. labelImg 标签bug
  3. 允许其他用户通过本计算机连接+连接手机,如何用手机搜索到的WF网络通过数据线连接台式电脑,让台式电脑共享网络...
  4. 【领域适应】训练梯度反向层(gradient reversl layer, GRL)
  5. python mysql传入多个参数
  6. 利用matlab求图像均值和方差的几种方法
  7. 帝豪gl车机系统降级_鲜试车丨10万元级国民轿车再升级,试驾2020款吉利帝豪GL...
  8. String类中重写Object中的equals方法源码解析
  9. C++ std::map sort 如何按值排序 自定义比较函数 比较对象某个字段
  10. C++ TBB concurrent_unordered_map find() at() return static_cast<size_t>( t ) * internal::hash_multip