首先,给大家介绍下注册界面以及获取手机验证码的一些原理和规则逻辑,方便大家在今后更好的使用此功能,分别注意以下几点:(代码写的怎么样看看就知道,不含糊);
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;
}
好了。今天就为大家写到这里,还会继续写更好的文章,让更多的初学者得到帮助和解决困扰,如果有什么问题可以留言或者联系博主,看到信息会立马给你们解答,祝大家每天学习多一点,希望帮助到更多的朋友和志同道合的伙伴们。