前方高能！登陆注册实战篇代码！

小马甲~-~ · 发表于 2016-11-16 11:03:53

听说单身狗月分享代码有红包，诶，这怎么好意思呢~我可不是为了红包~是为了发扬这样子的精神！好了单身狗们注意了啊我开始放代码了

首先我个人习惯，做一个功能之前要思考怎么去做，自己去设计一个计划，然后自己问自己（神经模式）我如果是用户会遇到什么问题,然后做一个逻辑图
这里我推荐 naotu.baidu.com
先上2个图

大家看到了吧你要做的任务就出来了是吧，现在要做的就是根据你的设计去一步步的实现而已
好了~现在就进入注册功能。
页面样子：

注册页面

下面会贴出来，
第一步，我们在主页面打开这个注册页面是 windowDialog 打开这个页面
第二步，正常的用户进入页面输入手机号码比如 15862254556 然后点击获取验证码按钮按钮会倒计时并且会去数据库校验是否存在手机号码

代码：// 点击获取验证码
Model.prototype.input1Click = function(event) {
var self = this;
var shoujihao = this.comp("username").val();
var sendtime =new Date().getTime();

var phonehaoReg = /^1[358][0-9]{9}$/;
// 正则校验
var phoneReg = phonehaoReg.test(shoujihao);
if (shoujihao != "") {
if (phoneReg) {
justep.Baas.sendRequest({
"url" : "/***/****", //这里输入你的后台地址
"action" : "fasongyanzhengma",
"async" : false,
"params" : {
"shoujihao" : shoujihao
},
"success" : function(data) {
var ret = data.ret;
if (ret != "") {
// 将短信放入页面隐藏域
var checkcode = data.checkcode;
localStorage.setItem('checkcode', checkcode);
localStorage.setItem('checkcodesendtime', sendtime);
// self.comp("input2").val(checkcode);
// self.comp("messageDialog").show({
// "title" : "温馨提示",
// "message" : "<div class='text' style='
// text-align:center;'>返回成功</div>"
// });
self.countdown =60;
self.daojishi();
} else {
hintC.hintcustom("<div class='text' style='text-align:center;background-color:#000000;padding:12px;border-radius:6px;font-size:16px;color:#fff;'>手机号码已被注册</div>", {
"delay" : 3000,
"position" : "bottom"// ,
});
}
},
"error" : function(data) {
hintC.hintcustom("<div class='text' style='text-align:center;background-color:#000000;padding:12px;border-radius:6px;font-size:16px;color:#fff;'>操作失败</div>", {
"delay" : 3000,
"position" : "bottom"// ,
});
}
});
} else {
hintC.hintcustom("<div class='text' style='text-align:center;background-color:#000000;padding:12px;border-radius:6px;font-size:16px;color:#fff;'>请输入正确的手机号码</div>", {
"delay" : 3000,
"position" : "bottom"// ,
});
}
} else {
hintC.hintcustom("<div class='text' style='text-align:center;background-color:#000000;padding:12px;border-radius:6px;font-size:16px;color:#fff;'>请输入手机号码</div>", {
"delay" : 3000,
"position" : "bottom"// ,
});
}
};
注意了我的这个hintC.hintcustom(" 是我们自己封装的你要自己去做
页面源码：
<div xid="div14" class="input-group username" style="width:100%;">
            <input component="$UI/system/components/justep/input/input" class="form-control"
               xid="username" placeHolder="输入您的手机号码" autoFocus="true"
               maxLength="11" pattern="(^-?$)|(^-?[0-9]*$)" bind-keyup="usernameKeyup"/>
            <a component="$UI/system/components/justep/button/button"
               class="btn btn-default usernameBtn" label="重新输入" xid="button2"
               style="background-color:white;" bind-visible="qingkongyButton">
               <i xid="i2" class="iconfont iconfont-edu08" style="color:#999999;font-size:20px;"/>
            </a>
            <input class="yanzhengma" type="button" value="获取验证码" xid="input1"
               bind-click="input1Click"/>
            <input component="$UI/system/components/justep/input/input" class="form-control"
               type="hidden" xid="input2"/>
            </div>

第三步：这时候你的手机号码会收到我们后台调用的第三方发送的一个短信号码，比如收到是 123456  这个123456 我会在调用返回的时候放入本地
第四部：用户输入验证码点击注册：
// 点击提交手机号码跟验证码
Model.prototype.btnCheckUserLogin = function(event) {
var self = this;
var shoujihao = this.comp('username').val();
var sendcode = localStorage.getItem('checkcode');
if (sendcode == "" || sendcode == null) {
hintC.hintcustom("<div class='text' style='text-align:center;background-color:#000000;padding:12px;border-radius:6px;font-size:16px;color:#fff;'>请获取验证码</div>", {
"delay" : 3000,
"position" : "bottom"// ,
});
return;
}
var usercode = this.comp("checkcode").val();
// 正则表达式
var phonehaoReg = /^1[358][0-9]{9}$/;
var checkcodeReg = /^\d{6}$/;// 验证码
// 正则校验

var phoneReg = phonehaoReg.test(shoujihao);
var usercodeReg = checkcodeReg.test(usercode);
if (shoujihao != "" && sendcode != "" && usercode != "") {
var returntime =new Date().getTime();
var sendtime =localStorage.getItem('checkcodesendtime');
var shijiancha =returntime-sendtime;
if(shijiancha>120000){
hintC.hintcustom("<div class='text' style='text-align:center;background-color:#000000;padding:12px;border-radius:6px;font-size:16px;color:#fff;'>验证码失效！请重新获取</div>", {
"delay" : 3000,
"position" : "bottom"// ,
});
return;
}
if (phoneReg && usercodeReg) {
// 进入后台
justep.Baas.sendRequest({
"url" : "/***/***", //写你自己的方法地址
"action" : "zhuce",
"async" : false,
"params" : {
"shoujihao" : shoujihao,
"sendcode" : sendcode,
"usercode" : usercode
},
"success" : function(data) {
var ret = data.ret;
if (ret =="ok") {
localStorage.removeItem('checkcode');
localStorage.removeItem('checkcodesendtime');

var shoujihao = data.shoujihao;
// self.countdown=0;
// self.getElementByXid("input1").value = "重获验证码";

// 跳转输入密码页面
// var url =
// require.toUrl("./zhuce_sucess.w?shoujihao=" +
// shoujihao);
// justep.Shell.showPage(url);
// self.comp("zhuceshoujiDialog").open({
// data : {
// type : "zhuceshouji",
// shoujihao:shoujihao
// }
// });
self.comp("zhuceshoujiDialog").open({
data : {
shoujihao : shoujihao
}
});

} else {
hintC.hintcustom("<div class='text' style='text-align:center;background-color:#000000;padding:12px;border-radius:6px;font-size:16px;color:#fff;'>验证码错误</div>", {
"delay" : 3000,
"position" : "bottom"// ,
});
}
},
"error" : function(data) {
hintC.hintcustom("<div class='text' style='text-align:center;background-color:#000000;padding:12px;border-radius:6px;font-size:16px;color:#fff;'>操作失败</div>", {
"delay" : 3000,
"position" : "bottom"// ,
});
}
});
} else if (usercodeReg) {
hintC.hintcustom("<div class='text' style='text-align:center;background-color:#000000;padding:12px;border-radius:6px;font-size:16px;color:#fff;'>手机号码错误</div>", {
"delay" : 3000,
"position" : "bottom"// ,
});
} else {
hintC.hintcustom("<div class='text' style='text-align:center;background-color:#000000;padding:12px;border-radius:6px;font-size:16px;color:#fff;'>验证码错误</div>", {
"delay" : 3000,
"position" : "bottom"// ,
});
}

} else if (shoujihao == "") {
hintC.hintcustom("<div class='text' style='text-align:center;background-color:#000000;padding:12px;border-radius:6px;font-size:16px;color:#fff;'>请输入手机号码</div>", {
"delay" : 3000,
"position" : "bottom"// ,
});
return;
} else if (usercode == "") {
hintC.hintcustom("<div class='text' style='text-align:center;background-color:#000000;padding:12px;border-radius:6px;font-size:16px;color:#fff;'>请输入验证码</div>", {
"delay" : 3000,
"position" : "bottom"// ,
});
return;
} else {
hintC.hintcustom("<div class='text' style='text-align:center;background-color:#000000;padding:12px;border-radius:6px;font-size:16px;color:#fff;'>请获取验证码</div>", {
"delay" : 3000,
"position" : "bottom"// ,
});
return;
}

};

这里就是各种校验了  拿到本地的验证码跟用户输入的做对比，如果成功进入到下一个页面我是打开一个新的窗口 zhuceshoujiDialog 大家也看到了
好了到了新的页面

这里就是输入密码了
第五步：输入密码点击提交
js 代码

/

小马甲~-~ · 发表于 2016-11-16 11:04:23

/ 注册-点击提交密码
Model.prototype.button1Click = function(event) {
var self = this;
var context = this.getContext();
var mima1 = this.comp('password1').val();
var mima2 = this.comp("password2").val();

// 正则表达式
var mimaReg = /^(?![^a-zA-Z]+$)(?!\D+$)[0-9a-zA-Z]{6,12}$/;
// 正则校验
var m1Reg = mimaReg.test(mima1);
var m2Reg = mimaReg.test(mima2);
if ($.trim(mima1) != "" && $.trim(mima2) != "" && $.trim(mima1) != null && $.trim(mima2) != null) {
if (mima1 == mima2) {

if (m1Reg && m2Reg) {// 密码格式正确
justep.Baas.sendRequest({
"url" : "/***/****",
"action" : "zhuceSavemima",
"async" : false,
"params" : {
"shoujihao" : this.shoujihao,
"mima1" : mima1,
"mima2" : mima2
},
"success" : function(data) {
var ret = data.ret;
if (ret == "success") {
$.each(data.rows, function(idx, item) {
var user_id = item.user_id.value;
// var uuid = item.uuid.value;
var shoujihao = item.shoujihao.value;
var user_mima = item.user_mima.value;
var user_nicheng = item.user_nicheng.value;
var user_banjiid = item.user_banjiid.value;
var user_touxiang = item.user_touxiang.value;
var user_youxiang = item.user_youxiang.value;
// var user_dengluming = item.user_dengluming.value;
// var user_realname = item.user_realname.value;
localStorage.setItem('user_id', user_id);
// localStorage.setItem('uuid', uuid);
localStorage.setItem('shoujihao', shoujihao);
localStorage.setItem('user_mima', user_mima);
localStorage.setItem('user_nicheng', user_nicheng);
localStorage.setItem('user_banjiid', user_banjiid);
localStorage.setItem('user_touxiang', user_touxiang);
localStorage.setItem('user_youxiang', user_youxiang);

hintC.hintcustom("<div class='text' style='text-align:center;background-color:#000000;padding:12px;border-radius:6px;font-size:16px;color:#fff;'>注册成功</div>", {
"delay" : 3000,
"position" : "bottom"// ,
});
var guanbi = self.comp("zhuceshoujiReceiver");
guanbi.windowEnsure({
jieguo : "zhucesuccess"
});
});
} else if (ret == "isExisted") {
hintC.hintcustom("<div class='text' style='text-align:center;background-color:#000000;padding:12px;border-radius:6px;font-size:16px;color:#fff;'>手机号码已存在</div>", {
"delay" : 3000,
"position" : "bottom"// ,
});
} else {
hintC.hintcustom("<div class='text' style='text-align:center;background-color:#000000;padding:12px;border-radius:6px;font-size:16px;color:#fff;'>密码输入不一致</div>", {
"delay" : 3000,
"position" : "bottom"// ,
});
}
},
"error" : function(data) {
hintC.hintcustom("<div class='text' style='text-align:center;background-color:#000000;padding:12px;border-radius:6px;font-size:16px;color:#fff;'>操作失败</div>", {
"delay" : 3000,
"position" : "bottom"// ,
});
}
});
// } else if (m1Reg) {
// hintC.hintcustom("<div class='text'
// style='text-align:center;background-color:#000000;padding:12px;border-radius:6px;font-size:16px;color:#fff;'>重复密码错误</div>",
// {
// "delay" : 3000,
// "position" : "bottom"// ,
// });
} else {

hintC.hintcustom("<div class='text' style='text-align:center;background-color:#000000;padding:12px;border-radius:6px;font-size:16px;color:#fff;'>密码格式错误</div>", {
"delay" : 3000,
"position" : "bottom"// ,
});
}
} else {
hintC.hintcustom("<div class='text' style='text-align:center;background-color:#000000;padding:12px;border-radius:6px;font-size:16px;color:#fff;'>密码输入不一致</div>", {
"delay" : 3000,
"position" : "bottom"// ,
});
}
} else {
hintC.hintcustom("<div class='text' style='text-align:center;background-color:#000000;padding:12px;border-radius:6px;font-size:16px;color:#fff;'>请输入密码</div>", {
"delay" : 3000,
"position" : "bottom"// ,
});
}

};

页面源码：

<div class="x-contents-content" xid="content1">
<div class="form-vertical" component="$UI/system/components/bootstrap/form/form" xid="form1" style="border-top:1px solid #ddd;border-bottom:1px solid #ddd;background:#fff;">
<div xid="div12" class="form-group" style="margin-right:auto;margin-left:auto;width:100%;">
<label xid="label4" class="sr-only"><![CDATA[密码]]></label>
<div xid="div14" class="input-group username" style="width:100%;position:relative;">

    <input component="$UI/system/components/justep/input/password" class="form-control" xid="password1" maxLength="12" placeHolder="输入您的密码(字母+数字)" bind-focus="password1Focus" bind-keyup="password1Keyup"></input>
  <a component="$UI/system/components/justep/button/button" class="btn btn-default mima1Btn" label="重新输入" xid="button2" bind-visible="qingkongyButton">
<i xid="i2" class="iconfont iconfont-edu08" style="color:#999999;font-size:20px;"></i></a></div>
</div>
<div xid="div13" class="form-group" style="margin-right:auto;margin-left:auto;width:100%;">
<label xid="label5" class="sr-only"><![CDATA[密码]]></label>
<div xid="div16" class="input-group" style="width:100%;position:relative;">
<input component="$UI/system/components/justep/input/password" class="form-control" xid="password2" maxLength="12" placeHolder="再次输入密码(字母+数字)" bind-keyup="password2Keyup"></input>
<a component="$UI/system/components/justep/button/button" class="btn btn-default mima2Btn" label="重新输入" xid="button3" bind-visible="qingkongButton">
   <i xid="i3" class="iconfont iconfont-edu08" style="color:#999999;font-size:20px;"></i>
   </a></div>
</div>
</div>
<div component="$UI/system/components/justep/row/row" class="x-row" xid="row4">
<div class="x-col" xid="col10" style="text-align:center;">
<a component="$UI/system/components/justep/button/button" class="btn btn-success btn-block" label="开启东道学院" xid="button1" bind-touchstart="button1Touchstart" bind-touchend="button1Touchend">
<i xid="i1"></i>
<span xid="span1">开启东道学院</span>
</a>
</div>
</div>
<div component="$UI/system/components/justep/row/row" class="x-row" xid="row1" style="text-align:center;">
<div class="x-col xieyi" xid="col2">注册即代表您同意<a xid="a1" bind-click="a1Click">用户服务协议</a></div>
</div>
</div>

后台代码：
/**
   * 注册 1，获取手机号码，用户输入的2次密码 2，做对比
   */
public static JSONObject zhuceSavemima(JSONObject params, ActionContext context) throws SQLException, NamingException, java.sql.SQLException {
JSONObject ret = new JSONObject();
PreparedStatement pstmt = null;
// 获取参数
Table table = null;
String shoujihao = params.getString("shoujihao");
String mima1 = params.getString("mima1");
String mima2 = params.getString("mima2");
String touxiang = "img_touxiang/picture.jpg";
// long sendTime = Long.parseLong(params.getString("sendTime"));
// long reTime =new Date().getTime();//返回时间
Connection conn = null;
conn = context.getConnection(DATASOURCE_DONGDAO);
String uuid = genOrderNum();

try {
conn.setAutoCommit(false);
// 查找用户是否存在
String querysql = "select shoujihao from  t_user where shoujihao='" + shoujihao + "' and isdelete=0 ";
// System.out.println(querysql);
Object Shoujihao = DataUtils.getValueBySQL(conn, querysql, null);
String querysql2 = "select uuid from  t_user where uuid='" + uuid + "' and isdelete=0";
Object UUId = DataUtils.getValueBySQL(conn,querysql2, null);
while (UUId !=null) {
uuid=genOrderNum();
}
if (Shoujihao != null) {
ret.put("ret", "isExisted"); // 用户存在
} else {
if (mima1.equals(mima2)) {
String sql = "insert into t_user(uuid,shoujihao,user_nicheng,user_mima,user_banjiid,xingbie,user_touxiang,createTime,user_fenshishu,guanzhushu,user_jifen,user_dongbi,user_yonghuleixing,isdelete,isRegister,user_gerenjianli) values('"
+uuid+"','"+ shoujihao + "','" + shoujihao + "','" + mima1 + "'," + "0,2,'" + touxiang + "',NOW(),0,0,50,0,0,0,1,'这个人很懒什么都没写')";
// System.out.println(sql);
pstmt = conn.prepareStatement(sql);
pstmt.execute();
String sql2 = "select uuid,user_id,user_dengluming,user_realname,user_banjiid,shoujihao,user_mima,user_touxiang,user_youxiang,user_nicheng,isRegister from t_user  where shoujihao='"
+ shoujihao + "' and user_mima='" + mima1 + "' and  isdelete=0 ";
table = DataUtils.queryData(conn, sql2, null, null, null, null);
ret = Transform.tableToJson(table);
ret.put("ret", "success");
} else {
ret.put("ret", "codewrong"); // 密码不一致
}

// 再放入各种数据
}
} catch (java.sql.SQLException e) {
conn.rollback();
e.printStackTrace();
return null;
} catch (Exception e) {
conn.rollback();
e.printStackTrace();
} finally {
conn.setAutoCommit(true);
conn.close();
}

return ret;
}

小马甲~-~ · 发表于 2016-11-16 11:04:47

好了，注意这里成功的时候会关闭也个页面，会回到注册页面  再利用windowiDialog 的Received事件判断关闭本页面

这里注册有几个小细节要注意
1，是我前面说的清空X 会随着内容的出现出现随着空内容消失
2,下一步的按钮是可以设置touch事件变色还可以设置不让点击  除非你2个input输入值不为空
具体做法  this.jinyongbutton = justep.Bind.observable(true);  给button绑定属性
根据条件设置是否不让点击
this.jinyongbutton.set(true);
this.jinyongbutton.set(false);

3，关于倒计时大家应该都会的吧
Model.prototype.daojishi = function(event) {
// debugger;
var me = this;
//me.getElementByXid("input1").value = countdown;
if (me.countdown === 0) {
// me.getElementByXid("input1").setAttribute("disabled", false);
me.getElementByXid("input1").disabled = false;
me.getElementByXid("input1").value = "重获验证码";
me.countdown = 60;
return;
} else {
// me.getElementByXid("input1").setAttribute("disabled", true);
me.getElementByXid("input1").disabled = true;
me.getElementByXid("input1").value = me.countdown;
me.countdown = me.countdown - 1;
}
setTimeout(function() {
me.daojishi()
}, 1000)
};

4，还有一定要处理要各种情况  别如关闭页面进入下一个页面哪些是需要处理的  哪些值是需要清空保留  这些我就不说了毕竟要自己做才有意思

1254661866 · 发表于 2016-11-17 13:52:12

大神hintC.hintcustom怎么自己封装啊？

dongdenghua · 发表于 2016-11-21 16:19:07

顶，

raycg · 发表于 2016-11-21 20:49:07

感谢楼主，大爱啊

qinlongpk · 发表于 2016-11-22 14:37:55

感谢~~先收藏先~~~

voobor · 发表于 2016-11-28 20:07:59

喜欢的很

庞胜文 · 发表于 2016-12-3 18:25:27

多谢楼主

382575053 · 发表于 2017-3-4 12:14:07

这个注册写的好像不是很完整，手机验证码 6位随机数是在action 生成的6位然后发送短信也没有看到。忘指教。随机数是在js里面写，还是action里面写。然后也没有看到这么写调用短信端口

[分享] 前方高能！登陆注册实战篇代码！

评分

		自动登录	找回密码
密码			注册