Bootstrap项目（表单）实践3
一、成果展示
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传
二、主要代码
表单代码：
<form class="form-horizontal container-fluid">
<div class="form-group">
<label for="phone" class="col-xs-3 control-label" >手机号:</label>
<div class="col-xs-4">
<input type="text" class="form-control" autocomplete="off" id="phone" placeholder="请输入11位手机号">
</div>
<div class="col-xs-5">
<i class="iconfont"></i>
</div>
</div>
<div class="form-group">
<label for="info" class="col-xs-3 control-label">短信验证:</label>
<div class="col-xs-4">
<input type="text" class="form-control" id="info" autocomplete="off" placeholder="请输入6位验证码">
</div>
<div class="col-xs-5">
<i class="iconfont"></i>
</div>
</div>
<div class="form-group">
<label for="password" class="col-xs-3 control-label">登录密码:</label>
<div class="col-xs-4">
<input type="password" class="form-control" id="password" autocomplete="off" placeholder="请输入6~10位的密码">
</div>
<div class="col-xs-5">
<i class="iconfont"></i>
</div>
</div>
<!--密码安全等级-->
<div class="form-group">
<ul class="col-xs-offset-3 col-xs-5">
<li class="left">安全等级:</li>
<li id="grade1" class="left grade">低</li>
<li id="grade2" class="left grade">中</li>
<li id="grade3" class="left grade">强</li>
</ul>
</div>
<div class="form-group">
<label for="pass_error" class="col-xs-3 control-label">确认密码:</label>
<div class="col-xs-4">
<input type="password" class="form-control" id="pass_error" placeholder="请验证密码">
</div>
<div class="col-xs-5">
<i class="iconfont"></i>
</div>
</div>
<div class="form-group">
<div class="col-xs-offset-3 col-xs-5">
<div class="checkbox">
<label>
<input type="checkbox" id="checkbox">
同意协议并注册<a href="javascript:;">《知晓用户协议》</a>
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-offset-4 col-xs-4">
<div><input type="button" value="完成注册" id="submit"></div>
</div>
</div>
</form>
js代码：
提交按钮响应函数有些地方没去优化，重复地方可以去封装简化。
<script type="text/javascript ">
window.onload = function(){
var phone = document.getElementById("phone"); //获取手机号
var info = document.getElementById("info"); //获取验证码
var password = document.getElementById("password"); //获取密码
var pass_error = document.getElementById("pass_error"); //获取密码
// 获取单选按钮
var radio = document.getElementById("checkbox");
// 绑定提交按钮
var submit = document.getElementById("submit");
submit.onclick = function(){
var iconfont = document.getElementsByClassName("iconfont"); //获取输入框元素
var ul_ = document.getElementsByTagName("ul")[0];
var grade = document.getElementsByClassName("grade"); //获取安全等级元素
if(radio.checked !== true){
alert("请勾选协议!");
}else{
if(/^\w{6,10}$/.test(password.value)){
ul_.style.display = "block";
if ((/[A-z]+/.test(password.value))&&(/[0-9]+/.test(password.value))&&(/_+/.test(password.value))&&(/\w{10}/.test(password.value))) {
grade[0].style.display = "block";
grade[1].style.display = "block";
grade[2].style.display = "block";
} else if (/\w{10}/.test(password.value)||((/[A-z]+/.test(password.value))&&(/[0-9]+/.test(password.value))&&(/_+/.test(password.value)))) {
grade[0].style.display = "block";
grade[1].style.display = "block";
grade[2].style.display = "none";
} else{
grade[0].style.display = "block";
grade[1].style.display = "none";
grade[2].style.display = "none";
}
}else{
ul_.style.display = "none";
}
if((/^1(\d){10}$/.test(phone.value))&&(/^[0-9]{6}$/.test(info.value))&&(/\w{6,10}$/.test(password.value))&&(/\w{6,10}$/.test(pass_error.value))&&(password.value === pass_error.value)){
iconfont[0].innerHTML = "手机号格式正确";
iconfont[1].innerHTML = "验明证正确";
iconfont[2].innerHTML = "密码格式正确";
iconfont[3].innerHTML = "密码正确";
for(var i=0;i<=3;i++){
iconfont[i].className = "iconfont iconcheck-item-filling";
iconfont[i].style.color = "green";
}
alert("恭喜您注册成功！");
}else{
if(/^1(\d){10}$/.test(phone.value)){
iconfont[0].className = "iconfont iconcheck-item-filling";
iconfont[0].innerHTML = "手机号格式正确";
iconfont[0].style.color = "green";
}else{
iconfont[0].className = "iconfont icondelete-filling";
iconfont[0].innerHTML = "手机号格式错误，请重新输入";
iconfont[0].style.color = "red";
}
if(/^[0-9]{6}$/.test(info.value)){
iconfont[1].className = "iconfont iconcheck-item-filling";
iconfont[1].innerHTML = "验明证正确";
iconfont[1].style.color = "green";
}else{
iconfont[1].className = "iconfont icondelete-filling";
iconfont[1].innerHTML = "验证码错误，请重新输入";
iconfont[1].style.color = "red";
}
if(/^\w{6,10}$/.test(password.value)){
iconfont[2].className = "iconfont iconcheck-item-filling";
iconfont[2].innerHTML = "密码格式正确";
iconfont[2].style.color = "green";
}else{
iconfont[2].className = "iconfont icondelete-filling";
iconfont[2].innerHTML = "密码为任意字母、数字、下划线";
iconfont[2].style.color = "red";
}
if((password.value === pass_error.value)&&(/^\w{6,10}$/.test(pass_error.value))){
iconfont[3].className = "iconfont iconcheck-item-filling";
iconfont[3].innerHTML = "密码正确";
iconfont[3].style.color = "green";
}else{
iconfont[3].className = "iconfont icondelete-filling";
iconfont[3].innerHTML = "密码不一致，请重新输入";
iconfont[3].style.color = "red";
}
}
}
}
}
</script>
三、遇到的问题
1.布局
因为之前是用css来进行布局，后又在其基础上改成boot strap框架来写，导致之前的样式错乱，自己又慢慢的把不用的样式删除，最后修改过来。
2.表单宽度
因为在缩小视口时表单的宽度太大导致样式错乱，我把表单最小宽度设为定值，当宽度将小于定制时表单宽度不在响应视口变化
3.栅格系统布局
我开始直接应用框架的代码，后来在响应时发现栅格设置有问题，宽度不够，而且源代码只设置了sm级别，导致在sx级别时排版错乱，自己又改变不同位置的列宽来解决，并且通过偏移让一些列移到相应位置。