- 实验目的
本实验目标为,掌握JavaScript的基本用法、调试、页面元素操作以及页面数据验证的验证。支撑专业核心能力的培养。
- 实验内容
CSS内联样式、嵌入样式、外部样式定义与使用;
通用选择器、类型选择器、类选择器、Id选择器的使用;
Css盒子模型样式;
Div+css布局;
修改实验2布局,在注册按钮上方增加一个异常信息区域(将样式置为隐藏display: none),在发送验证码链接位置处增加一个验证码输入框(将样式置为隐藏display: none);异常区域和验证码输入框布局的设计在“网页设计图.jpg”中。
<script>
function init() {
document.getElementById("errorArea").style.display = "none"
}
function checkpag() {
var errorArea = document.getElementById("errorArea");
var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
if (document.getElementById("userText").value == "") {
errorArea.style.display = "block";
errorArea.innerText = "*用户名不能为空";
}
else if (document.getElementById("phoneText").value == "") {
errorArea.style.display = "block";
errorArea.innerText = "*手机号不能为空";
}
else if (!myreg.test(document.getElementById("phoneText").value)) {
errorArea.style.display = "block";
errorArea.innerText = "*手机号错误";
}
else if (document.getElementById("codeText").value == "") {
errorArea.style.display = "block";
errorArea.innerText = "*验证码不能为空";
}
else if (document.getElementById("codeText").value != "123456") {
errorArea.style.display = "block";
errorArea.innerText = "*验证码不正确";
}
else if (document.getElementById("mimaText").value == "") {
errorArea.style.display = "block";
errorArea.innerText = "*密码不能为空";
}
else if (document.getElementById("mimaagainText").value == "") {
errorArea.style.display = "block";
errorArea.innerText = "*确认密码不能为空";
}
else if (document.getElementById("mimaText").value != document.getElementById("mimaagainText").value) {
errorArea.style.display = "block";
errorArea.innerText = "*两次输入密码不一致";
}
else {
errorArea.style.display = "block";
errorArea.innerText = "*已提交注册信息";
window.location.href = "lab3.1.html"
}
}
function checkpag2() {
var errorArea = document.getElementById("errorArea");
var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
if (document.getElementById("phoneText").value == "") {
errorArea.style.display = "block";
errorArea.innerText = "*手机号不能为空";
}
else if (!myreg.test(document.getElementById("phoneText").value)) {
errorArea.style.display = "block";
errorArea.innerText = "*手机号错误";
}
}
//出错后信息重新输入
function reinput() {
var errorArea = document.getElementById("errorArea");
errorArea.style.display = "none";
}
</script>
</head>
<body onload="init()">
<div id="header">
<div class="header_left"> </div>
<div class="header_right"> </div>
<div class="header_center">用户注册</div>
</div>
<div id="main">
<div class="main_left-1">用户名</div>
<div class="main_center"><input type="text" class="mykk-1" id="userText" placeholder="请输入用户名"
oninput="reinput()"></div>
<div class="main_left">手机号</div>
<div class="main_right"><input type="text" class="mykk2" id="codeText" placeholder="请输入验证码" onchange="check()"
onClick="checkpag2()" oninput="reinput()">
</div>
<div class="maine_center"><input type="text" class="mykk1" id="phoneText" placeholder="请输入手机号"
oninput="reinput()"></div>
<div class="main_left">密码</div>
<div class="main_center"><input type="password" class="mykk" id="mimaText" oninput="reinput()"></div>
<div class="mainer_left">确认密码</div>
<div class="main_center"><input type="password" class="mykk" id="mimaagainText" oninput="reinput()"></div>
<div class="empty" id="errorArea">*用户名不能为空</div>
<input type="button" class="main_denglv" value="注册" style="width: 100%" ; onClick="checkpag()">
<div class="help_left">已有账号</div>
<div class="help_right">更换手机号</div><br>
<div id="fansaolei">
<div id="tail">
<div class="tail_left"> </div>
<div class="tail_right"> </div>
</div>
<div id="tails">
<div class="tails_left">首页</div>
<div class="tails_right">设置</div>
</div>
<div id="fanlei"> </div>
</div>
</div>
</body>
</html>