前端入坑纪 13
今天是个好日子，晚上有锤子发布会！而且我也终于完成手头的一个逗逼项目。所以，又可以放浪形骸，上简书写自己想写的JS效果了。
外表朴素而内在丰富的表单
OK，first things first！项目链接
HTML 结构
<h2>注册</h2>
<div class="inptWrp">
<label>姓名</label>
<input type="text" name="" value="" data-check="name">
<p class="soMsg"></p>
</div>
<div class="inptWrp">
<label>手机号</label>
<input type="tel" name="" value="" data-check="phone">
<p class="soMsg"></p>
</div>
<div class="inptWrp">
<label>密码</label>
<input type="password" name="" value="" data-check="password">
<a id="psSwch" data-on="false" href="javascript:;"></a>
<p class="soMsg"></p>
</div>
<div class="inptWrp">
<label>验证码</label>
<input type="text" name="" value="" data-check="number">
<button id="sedMsg">获取验证码</button>
<p class="soMsg"></p>
</div>
<a class="btnSure" href="javascritp:;">确定</a>
div.inptWrp 除了用来作为输入外框的表现外，还是其内部元素定位的父级。
CSS结构
body {
font-family: "微软雅黑", Verdana, Geneva, Tahoma, sans-serif;
}
* {
margin: 0;
padding: 0;
}
ul,
ol,
li {
list-style: none;
}
a {
color: #333;
text-decoration: none;
}
.clearfix {
content: "";
display: table;
clear: both
}
h2 {
text-align: center;
line-height: 50px;
height: 50px;
margin: 6px auto;
}
.inptWrp {
border-radius: 5px;
border: 1px solid #999;
position: relative;
width: 90%;
margin: 30px auto;
height: 40px;
}
.inptWrp label {
font-size: 13px;
color: #999;
transition: all 200ms ease;
position: absolute;
left: 6px;
top: 13px;
}
.inptWrp input {
background: none;
border: none;
font-size: 15px;
line-height: 30px;
width: 100%;
height: 30px;
outline: none;
box-sizing: border-box;
padding-left: 6px;
margin-top: 5px;
}
.soMsg {
height: 20px;
line-height: 20px;
letter-spacing: 1px;
color: #999;
text-shadow: 0 0 1px #ccc;
border-radius: 2px;
text-align: right;
font-size: 12px;
font-weight: bold;
width: 90%;
margin: 0 auto;
position: absolute;
right: 0;
top: -20px;
transition: all 200ms;
}
#psSwch {
position: absolute;
top: 5px;
right: 3px;
display: block;
height: 30px;
width: 30px;
background: url("eyeOf.png") no-repeat center center;
}
#sedMsg {
outline: none;
border: none;
background: none;
height: 30px;
font-size: 12px;
color: #666;
border: 1px solid #ccc;
padding: 0 6px;
line-height: 30px;
border-radius: 3px;
position: absolute;
top: 5px;
right: 3px;
}
.btnSure {
display: block;
line-height: 40px;
height: 40px;
text-align: center;
width: 90%;
margin: 3% auto;
font-size: 15px;
color: #fff;
background-color: skyblue;
border: 1px solid #fff;
border-radius: 3px;
}
样式都很普通，比较关键的样式就是相对div父级的定位那些。
JS结构
var inpts = document.getElementsByClassName('inptWrp');
var omsg = document.getElementById("soMsg");
var aSwich = document.getElementById("psSwch");
var sedMsg = document.getElementById("sedMsg");
var CountMinus = null;
var seconds = 60; //设置总的间隔时长
var countMus = seconds;
// 正则的描述和表达，存在一个对象里
var checkType = {
name: "^[\\u4e00-\\u9fa5]{2,}$",
nameMsg: "请输入至少2个中文字符",
phone: "^(13[0-9]|17[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\\d{8}$",
phoneMsg: "请输入13、15、17、18开头的手机号",
password: "^(?=.*\\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$",
passwordMsg: "请输入8-10个包含大小写字母或数字的字符",
number: "^[0-9]{6}$",
numberMsg: "请输入您收到的6位验证码"
}
// 眼睛点击显示和隐藏密码
aSwich.onclick = function() {
// vals用来判断点击时，眼睛的状态即密码的状态是可看的，还是不可看的
var vals = this.getAttribute("data-on");
// 不可看见时的操作
if (vals == "false") {
this.style.backgroundImage = "url(eyeOn.png)";
this.parentNode.getElementsByTagName("input")[0].setAttribute("type", "text");
this.setAttribute("data-on", "true");
}
// 可看见时的操作
else {
this.style.backgroundImage = "url(eyeOf.png)";
this.parentNode.getElementsByTagName("input")[0].setAttribute("type", "password");
this.setAttribute("data-on", "false");
}
}
// 发送验证码的操作
sedMsg.onclick = function() {
// 点完就设置为disabled，免得用户点多了出错
this.setAttribute("disabled", "disabled");
// 判定现在的秒数是不是等于总秒数
if (countMus == seconds) {
// 这个this需要先存，不然代入setInterval会变
var _this = this;
// 开始减秒的操作
var CountMinus = setInterval(function() {
if (countMus !== 0) {
_this.setAttribute("disabled", "disabled");
_this.innerText = countMus + "秒后重新发送";
countMus--;
}
// 减完后，恢复原状
else {
clearInterval(CountMinus);
countMus = seconds;
_this.innerText = "获取验证码";
_this.removeAttribute("disabled", "disabled");
}
}, 1000)
}
}
// 检查输入值的判定和文字的定位动效
function checkVal() {
var regStr = this.getAttribute("data-check");
var testRG = new RegExp(checkType[regStr]);
var inputNode = this.parentNode.getElementsByTagName("p")[0];
var pNode = this.parentNode.getElementsByTagName("p")[0];
var labelNode = this.parentNode.getElementsByTagName("label")[0];
var thisVal = this.value;
// 值为空时，文字复位，退出
if (thisVal == "") {
labelNode.style.top = "13px";
return;
}
// 检验不通过，出提示
else if (!testRG.test(thisVal)) {
inputNode.style.display = "block";
pNode.innerText = checkType[regStr + "Msg"];
}
// 检测通过，隐藏提示
else {
pNode.style.display = "none";
}
}
// 当input失去焦点时，每个label文字的定位变更
for (var i = 0; i < inpts.length; i++) {
var oinput = inpts[i].getElementsByTagName("input")[0];
oinput.onfocus = function() {
this.parentNode.getElementsByTagName("label")[0].style.top = "-17px";
}
oinput.onblur = checkVal;
}
这次javascript的内容有点多，已经添加了关键性的注解。有兴趣的同学，可以多看看！
