weui框架学习：项目练习（二）
今天一天时间写了智学无忧微信的注册页面，和忘记密码中的通过邮箱重置密码。先来谈谈注册页面的编写吧。
截面图如下：
页面的布局基本和昨天写的登录页面是一样的，页面分为头部，基本信息部分，表单部分，三个部分。其中链接和跳转部分是使用<a>标签，只有button提交是使用open()方法在原窗口打开新的页面。
头部：是使用 weui-cell 来布局。html代码如下：
<div class="weui-cell" style="background-color: #35495E; color: white;">
<div class="weui-cell__hd">
<a href="zhixuewuyouindex.html" style="color: #D1D1D1;">< 返回</a>
</div>
<div class="weui-cell__bd" style="text-align:center;">
学生注册
</div>
</div>
基本信息部分：也是使用weui-cell来布局，其中使用徽章badge来实现图标。中间的线条，是给weui-cell__bd一个上边框。
html代码如下：
<div style="background-color: #FBF9FE; padding: 20px 0;">
<div class="weui-cells__title" style="text-align: center;">
以下资料需要审核，请认真填写！
</div>
<div class="weui-cell">
<div class="weui-cell__hd">
<i class="weui-badge" style="background-color: green; font-style:normal; font- size:16px;">1</i>
<span>基本信息</span>
<h4 style="text-align: center;">第1步</h4>
</div>
<div class="weui-cell__bd" style="border-top: #CFCFCF 2px solid; margin:0 2%;"></div>
<div class="weui-cell__ft">
<i class="weui-badge" style="background-color:white; border: #666666 1px solid; font-style:normal; color: #999999; font-size: 16px;">2</i>
<span>学校信息</span>
<h4 style="text-align:center;">第2步</h4>
</div>
</div>
</div>
表单部分：是和昨天的表单是一样的，这里就不在写了，其中在今天表单事件是困扰我最久的，就是点提交按钮时，对每个表单的判断。
注：刚开始是给每个表单函数一个返回值，在点提交事件时利用返回值的判断来决定是否能够提交。在最后发现在进行判断的时候函数还会调用一次导致输入框重置不能提交。最后使用给每一个函数一个计数器，当某一个函数判断正确的时候计数器的值为1，否则为0。以手机号的判断为例js代码如下：
var cout1, cout2, cout3, cout4;
// 手机号
var telsrge = /^1[3|4|5|8][0-9]\d{4,8}$/;
$("#telsa").on("focus", function() {
$("#tels").children("i").eq(0).show();
$("#tels").children("i").eq(2).show();
$("#tels").children("i").eq(1).hide();
$("#tell").css("color", "red");
$("#telsa").css("color", "red");
$("#telsa").attr("placeholder", "")
$("#tels .cleals").on("click", function() {
$("#telsa").val("");
})
})
function poth() {
var inpval = $(this).val();
cout1 = 0;
if(!telsrge.test(inpval)) {
$("#tels").children("i").eq(0).show();
$("#tels").children("i").eq(2).show();
$("#tels").children("i").eq(1).hide();
$("#telsa").attr("placeholder", "请输入手机号")
$(".ts").html("手机格式不正确，请重新输入！")
$(".ts").css({
"transform": "translateY(50px)",
"transition": "all 1s"
})
setTimeout(function() {
$(".ts").css({
"transform": "translateY(0px)",
"transition": "all 1s"
})}, 3000);
} else {
$("#tels").children("i").eq(1).show().siblings().hide();
$("#tell").css("color", "#757575");
$("#telsa").css("color", "#757575");
cout1 = 1;
var nember = $("#telsa").val();
sessionStorage.setItem("nember", nember);
}
}
$("#telsa").on("blur", poth)
button点击提交事件的js代码如下：
$(window).on("click", function() {
var cou;
cou = cout1 + cout2 + cout3 + cout4;
if(cou == 4) {
$("#btns").removeClass("weui-btn_disabled");
} else {
$("#btns").addClass("weui-btn_disabled");
}
$("#btns").on("click", function() {
if(!$(btns).hasClass("weui-btn_disabled")) {
open("zxwyitregister02.html", "_self");
}
})
})
注册页面的第二个页面界面图如下：
布局基本都是一样就，其中不同的是界面中的表单是使用select下拉框来实现的，html代码如下：
<!--班级-->
<div class="weui-cells" style="margin: 0;">
<div class="weui-cell weui-cell_select weui-cell_select-after">
<div class="weui-cell__hd">
<label class="weui-label" style="text-align: center;">班级：</label>
</div>
<div class="weui-cell__bd ">
<select class="weui-select" name="select1">
<option selected="" value="0">请选择班级</option>
<option value="1">9班</option>
<option value="2">10班</option>
<option value="3">11班</option>
<option value="4">12班</option>
</select>
</div>
</div>
</div>
其中使用了weui-cell_select-after类，weui-select类，weui-cell_select类对表单进行样式的布局。其中button的提交也是使用的计数器的判断一样的方法。
忘记密码界面：
忘记密码界面比较简单，头部基本都是一样的，值改了其中的字的内容和返回链接的地址。这里唯一不同的就是，使用<a>链接把整个weui-cell包起来。代码如下：
<!--邮箱找回-->
<a href="yx01.html">
<div class="weui-cell weui-cells" style="margin: 0;">
<div class="weui-cell__hd" style="margin-right: 6px;">
<i class="iconfont icon-youxiang" style="font-size: 18px; color: #555555;"></i>
</div>
<div class="weui-cell__bd">
<p style="font-size: 18px; color: #555555;">已绑定的邮箱</p>
<span style="font-size: 16px; color: #999999;">通过邮箱地址重置密码</span>
</div>
<div class="weui-cell__ft">
<i class="iconfont icon-arrow-right"></i>
</div>
</div>
</a>
还写了两个通过邮箱来确认身份的界面，布局基本一样的，这里面做了一个假的验证码。界面图如下：
这里就只说一下这个假的验证，js代码如下：
//验证码
var arr=new Array();
arr=["n042z","6h24t","02n0z","j68r8"];
var cou=1;
// 换图片
$("#imgs").on("click",function(){
cou++;
if (cou==5) {
cou=1;
}
$(this).attr("src","img/yan0"+cou+".jpg");
})
$("#yan").on("focus", function() {
$("#yans").children("i").eq(0).show();
$("#yans").children("i").eq(2).show();
$("#yans").children("i").eq(1).hide();
$("#yanl").css("color", "red");
$("#yan").css("color", "red");
$("#yan").attr("placeholder", "")
$("#yans .cleals").on("click", function() {
$("#yan").val("");
})
})
$("#yan").on("blur",function(){
count2=0;
var yanvals = $(this).val().toLocaleLowerCase();
if (yanvals!=arr[cou-1]) {
$("#yans").children("i").eq(0).show();
$("#yans").children("i").eq(2).show();
$("#yans").children("i").eq(1).hide();
$("#yan").attr("placeholder", "输入右图的随机码");
}else{
$("#yans").children("i").eq(1).show().siblings().hide();
$("#yanl").css("color", "#757575");
$("#yan").css("color", "#757575");
count2=1;
}
})
这里通过一个技术器来实现图片和文字的对应关系，通过数组的方式来保存文字。最后判断输入的文字是否也对应图片文字的内容是不是一样。
最后讲一讲我最的数据保存，数据的保存我是临时保存在浏览器中，只要关掉浏览器数据就没有了。
数据传入浏览器中js代码：
sessionStorage.setItem("nember", nember);
第一个参数是一个key值，第二个变量是一个value值。
数据从浏览器中提取js代码如下：
sessionStorage.getItem("nember");
参数为你要获取的key值。