js 注册界面 获取手机验证码

首先，给大家介绍下注册界面以及获取手机验证码的一些原理和规则逻辑，方便大家在今后更好的使用此功能，分别注意以下几点：（代码写的怎么样看看就知道，不含糊）；

1，界面div这个必不可少的；（输入账户、输入密码、验证码获取、点击注册按钮）

 

<div class="mui-input-row">
        <label>账号</label>
        <input type="text" id="zhvalue" value="" class="" placeholder="请输入手机号">
        <input type="button" id="btninfo" value="获取验证码"  /> 
    </div>

<div class="mui-input-row">
        <label>验证码</label>
        <input type="text" id="yzinfo" class="mui-input-clear" placeholder="请输入验证码">
    </div>
    <div class="mui-input-row">
        <label>登录密码</label>
        <input type="password" id="dlinfo" value="123456" class=" mui-input-password" placeholder="密码(6-16位英文，数字)">
    </div>
     </div>

<button id="zhuce" class="mui-btn mui-btn-success">注册</button>

2，js部分，写个应该算详细了吧，如下：

第一部分倒计时；

var countdown=60; 
function settime(obj) { 
    if (countdown == 0) { 
        obj.removeAttribute("disabled");    
        obj.value="获取验证码"; 
        countdown = 60; 
        return;
    } else {
        obj.setAttribute("disabled", true); 
        obj.value="重新发送(" + countdown + ")"; 
        countdown--; 
     } 
setTimeout(function() { 
    settime(obj)
     }
     ,1000) 
}

第二部分；检测手机号码是否是正常的号码。

var byzm;  
 document.getElementById('btninfo').addEventListener('tap',function(){
  var zhuceBox = document.getElementById('zhvalue').value;
  if(zhuceBox==''){
mui.toast('手机号不能为空');
return false; 
}else if(!(/^1[3|4|5|8][0-9]\d{4,8}$/.test(zhuceBox))){
        mui.toast("手机号不正确");
        return false; 
}else if(zhuceBox.length!=11){
mui.toast("手机号不正确");
           return false; 
}else{
settime(this);
byzm=GetCode(zhuceBox);
   }
});

第三部；点击注册按钮事件；

document.getElementById('zhuce').addEventListener('tap',function(){
var zhuceBox = document.getElementById('zhvalue').value;
var yzinfoBox = document.getElementById('yzinfo').value;
var dlinfoBox = document.getElementById('dlinfo').value;
if(zhuceBox==''){
mui.toast('手机号不能为空');
return false; 
}
else if(zhuceBox.length!=11){
mui.toast('手机号不正确');
return false; 
}else if(yzinfoBox==''){
mui.toast('请填写验证码');
return false; 
}else if(dlinfoBox==''||dlinfoBox.length<6){
mui.toast('密码不能为空并且不能少于6个字符')
}else{
if(yzinfoBox==byzm){
console.log("注册成功");
adduse(zhuceBox,dlinfoBox);
mui.toast('注册成功！！')
setTimeout(function() { 
      mui.back();
    }
    ,1000)
  }else{
  mui.toast('验证码输入不对')
  }
   };
});

第四部分；此处为注册接口调用；

function adduse(zh,mm){
    mui.ajax({
type:'post',
contentType: "application/json",
              url:http...//此处填写自己的服务器url地址；
dataType: "json",
data: {//data携带的参数，根据自己的服务器参数写就ok；
  sortname:zh,
  username:zh,
  pwd:mm,
  model:1
},
success: function(data) {
console.log(JSON.stringify(data.d));
}
}); 
 }

第五部分：此处为点击获取验证码，服务器返回数据给客户端，接收验证码的接口：

function GetCode(tels){
  var yzm;
  mui.ajax({
type:'post',
contentType: "application/json",
              url:http.......//此处填服务器url，
dataType: "json",
async: false,
data: {
  username:tels,
  msg:'',
},
success: function(data) {//成功的data函数
var json = eval('('+ data.d + ")");
yzm=json.code; 
console.log("返回的验证："+yzm);
}
}); 
return yzm;
  }

好了。今天就为大家写到这里，还会继续写更好的文章，让更多的初学者得到帮助和解决困扰，如果有什么问题可以留言或者联系博主，看到信息会立马给你们解答，祝大家每天学习多一点，希望帮助到更多的朋友和志同道合的伙伴们。