JS实现用户注册时获取短信验证码和倒计时功能

在用户注册时,通常需要短信验证码,而且为了交互效果,也需要增加倒计时。

效果如下:

<div class="user-form">
<form action="{{ path('zm_member_register') }}" method="post">
<div class="form-list">
<label class="register-label">手机号码</label>
<input class="regphone input-register" type="text" name="phone" placeholder="请输入手机号码" />
</div>
<div class="form-list">
<label class="register-label">验证码</label>
<input class="input-short" type="text" name="sms_salt" placeholder="请输短信验证码" />
<input class="input-code" id="btn" type="button" value="发送验证码" />
</div>
<input style="margin-top: 60px;" type="submit" class="registerSubmit form-sumbit" value="提交" />
</form>
</div>

这里的验证码是通过向后台这个url({{ path(‘zm_member_get_salt') }}))里面,传手机号码和类型(type=1为注册)这两个值,后台接收值成功则返回成功状态值。

基于这里,实现验证码倒计时,即可以在判断成功后。调用封装了的倒计时函数 time(),注意验证码应使用type为button的input,此时可以方便地更改其value值,来展示倒计时的时间。

<script type="text/javascript">
//倒计时60秒
var wait=60;
function time(o) {
if (wait == 0) {
o.removeAttribute("disabled");
o.value="获取动态码";
wait = 60;
} else {
o.setAttribute("disabled", true);
o.value="重新发送(" + wait + ")";
wait--;
setTimeout(function() {
time(o)
}, 1000)
}
}
$('.input-code').click(function() {
var phone = $('.regphone').val();
$.ajax({
type: 'post',
url: "{{ path('zm_member_get_salt') }}",
data: {
phone: phone,
type: 1
},
dataType: 'json',
success: function (result) {
if (result.flag == 1) {
// alert('成功');
time(btn);
} else {
alert(result.content);
}
}
});
});
</script>

以上所述是小编给大家介绍的JS实现用户注册时获取短信验证码和倒计时功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持

时间: 2016-10-26

js实现登录注册框手机号和验证码校验(前端部分)

开发的很多场景中都会用到手机号的校验和验证码的校验,具体实现如下 <div> <input type="text" name="phonenumber" placeholder="请输入您的手机号码" /> <input type="text" name="verify" placeholder="请输入验证码" /><input type=&q

mvc C# JavaScript LigerUI oracle实现用户的注册、登陆验证、登陆

一.登录数据库,在数据库中创建表User00,并且插入数据. 表的字段分别为: Id(编号).Name(姓名).Grid(级别).Score(积分).Password(密码).Age(年龄).Code(邀请码).(其中编号是自动编号) 部分命令如下: select * from User00; /*查询User00*/ insert into User00 values('one','优',10000,'123',24); /*插入一行数据*/ update User00 set Grid='优

原生js验证简洁注册登录页面

序 一个以js验证表单的简洁的注册登录页面,不多说直接上图 效果 主要文件 完整代码 1 sign_up.html 注册表单 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>sign-up</title> <link rel="stylesheet" href="css

js正则表达式注册页面表单验证

正则表达式方式的验证方式,这个验证比较标准而且比较全面,不过也是通过点击提交按钮才进行验证,本实例可以这样验证,具体内容如下 也可以这样验证 具体代码 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>表单验证类Validator v1</title> <style&g

js注册时输入合法性验证方法

本文实例为大家分享了js正则表达式验证输入合法性的具体代码,供大家参考,具体内容如下 // 验证用户名,只允许 字母 数字 下划线 中文 //在input元素后面增加一个span元素,提示 function confirmName(){ var name=document.getElementById("user_name"); name.onblur=function(){ if((name.value).length!=0){ reg=/^[\u4e00-\u9fa5_a-zA-Z

javascript制作的简单注册模块表单验证

一个注册框  进行表单验证处理 如图 有简单的验证提示功能 代码思路也比较简单 输入框失去焦点时便检测,并进行处理 表单具有 onsubmit = "return check()"行为,处理验证情况 点击提交表单按钮时,进行最终的验证,达到是否通过表单提交的请求. 先是最基本的html+css部分 <style type="text/css"> body{margin:0;padding: 0;} .login{position:relative;mar

php用户注册页面利用js进行表单验证具体实例

复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">     <head>         <meta ht

AngularJS实现注册表单验证功能

本文为大家分享了案例: 注册表单验证,供大家参考,具体内容如下 需要使用的两张图片: dui.gif:cuo.gif: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="jquery

Ionic+AngularJS实现登录和注册带验证功能

登录: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title></title> <li

JS+jQuery实现注册信息的验证功能

用JS和JQuery实现的效果是一样的. HTML代码 <legend> 请填写注册信息</legend> <form action="index.html" method="post"> <table style="text-align: right;"> <tr> <td>用户名:</td> <td><input type="tex

JS+HTML5本地存储Localstorage实现注册登录及验证功能示例

本文实例讲述了JS+HTML5本地存储Localstorage实现注册登录及验证功能.分享给大家供大家参考,具体如下: 源码引用的js.jquery都是在线的,代码拷到本地就能运行 登录: <html ng-app="ionicApp"> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, m

JS实现的简单表单验证功能完整实例

本文实例讲述了JS实现的简单表单验证功能.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head&

使用JQuery实现智能表单验证功能

先给大家展示下表单效果图,具体效果如下所示: 1.前台一开始用JQuery实现,先来上HTML标记: <body> <form id="form1" runat="server"> <table class="tble"> <tr><td class="td1">用户名 <input type="text" class="td&qu

Java使用正则表达式对注册页面进行验证功能实现

本文给大家介绍java使用正则表达式对注册页面进行验证的代码,代码如下所示: package regex; import java.util.Scanner; import java.util.regex.Matcher; import java.util.regex.Pattern; public class registered { public static void main(String[] args) { //注册用户 Scanner sc=new Scanner(System.in

jquery实现用户信息修改验证输入方法汇总

本文实例讲述了jquery实现用户信息修改验证输入方法.分享给大家供大家参考.具体如下: var realnameFlag = 0; var addressFlag = 0; var zipFlag=0; var cellphoneFlag=0; var homephoneFlag=0; var oldpasswordFlag=1; var newpasswordFlag=1; //判断email function check_email() { $("#showSpan").hide

JS实现的简单表单验证功能示例

本文实例讲述了JS实现的简单表单验证功能.分享给大家供大家参考,具体如下: 源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <

js仿网易表单及时验证功能

今天研究了网易"用户注册表单"与"及时验证功能",不得不说,无论是它的布局结构,还是验证功能,都是刷新了本真人的眼界,居然可以这样! 来图镇楼! html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.or

Django如何实现网站注册用户邮箱验证功能

我们在很多网站上都可以看到用户注册使用电子邮件激活或启用的方式.也就是说,用户在注册后填写正确的电子邮件地址,接着网站会发送一封启用电子邮件到用户设置的电子邮件的邮箱中,并在邮件中提供一个激活或启用的链接,在用户单击此链接后,账号正式激活或启用. 这里我们使用 Django 的 django-registration 模块可以快速实现这一过程. 1. django-registration 安装与设置 使用 pip 安装: pip install django-registration 此模块暂