练习已完成，老师帮忙看一下有没有错误的地方
来源：4-8 编程练习
为爱修行
2019-03-13 22:08:54
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
body {
min-width: 1000px;
font-family: "宋体";
}
.container {
margin: 0 auto;
width: 1000px;
}
.caption {
height: 50px;
line-height: 50px;
padding: 0 10px;
background: lightblue;
color: #fff;
}
.content {
background: #eee;
padding: 50px 0 0 200px;
}
.content .item {
width: 90%;
height: 25px;
line-height: 25px;
font-size: 18px;
position: relative;
}
.content .item label {
display: inline-block;
width: 120px;
text-align: right;
}
.content .item input,
.content .item select {
width: 210px;
height: 21px;
}
.content .item .item_ {
font-size: 14px;
}
.content #handup {
width: 80px;
height: 40px;
margin: 50px 0 50px 180px;
background: lightblue;
color: #fff;
outline: none;
border: none;
cursor: pointer;
border-radius: 10px;
font-size: 18px;
}
</style>
</head>
<body>
<div class="container">
<div class="caption">用户注册</div>
<div class="content">
<div class="item">
<label for="userAccount">用户名：</label>
<input class="input" type="text" id="userAccount" placeholder=" 用户设置成功后不可修改">
<span class="item_"></span>
</div>
<br>
<!--_____________________________________________________________________________________________-->
<div class="item">
<label for="userPass">登陆密码：</label>
<input class="input" type="password" id="userPass" placeholder=" 6-18位字母,数字或符号">
<span class="item_"></span>
</div>
<br>
<!--_____________________________________________________________________________________________-->
<div class="item">
<label for="userPass_">确认密码：</label>
<input class="input" type="password" id="userPass_">
<span class="item_"></span>
</div>
<br>
<!--_____________________________________________________________________________________________-->
<div class="item">
<label for="userName">姓名：</label>
<input class="input" type="text" id="userName" placeholder=" 请输入姓名">
<span class="item_"></span>
</div>
<br>
<!--_____________________________________________________________________________________________-->
<div class="item">
<label for="sex">性别：</label>
<select id="sex">
<option value="male">男</option>
<option value="female">女</option>
</select>
</div>
<br>
<!--_____________________________________________________________________________________________-->
<div class="item">
<label for="information">身份证号：</label>
<input class="input" type="text" id="information" placeholder=" 请输入身份证号">
<span class="item_"></span>
</div>
<br>
<!--_____________________________________________________________________________________________-->
<div class="item">
<label for="email">邮箱：</label>
<input class="input" type="email" id="email" placeholder=" 请输入正确邮箱格式">
<span class="item_"></span>
</div>
<br>
<!--_____________________________________________________________________________________________-->
<div class="item">
<label for="telephone">手机号码：</label>
<input class="input" type="tel" id="telephone" placeholder=" 请输入您的手机号码">
<span class="item_"></span>
</div>
<br>
<!--__________________________________________________________________________________________________-->
<div id="end">
<button id="handup">提交</button>
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
var userAccount = document.getElementById("userAccount");
var userPass = document.getElementById("userPass");
var userPass_ = document.getElementById("userPass_");
var userName = document.getElementById("userName");
var information = document.getElementById("information");
var email = document.getElementById("email");
var telephone = document.getElementById("telephone");
var handup = document.getElementById("handup");
var input = document.getElementsByClassName("input");
//当鼠标离开用户名输入框，产生验证
var test = [false, false, false, false, false, false, false];
var items = document.querySelectorAll(".item_"); //获取所有提示元素的下标
var reg = /正则/;
var submit = false;
userAccount.onblur = function() { //验证用户名
var reg = /^\w{6,20}$/;
if (!reg.exec(this.value)) {
items[0].innerHTML = "请输入6--20位数字、字母、'_'，字母开头";
items[0].style.color = "red";
} else {
items[0].innerHTML = "OK";
items[0].style.color = "green";
test[0] = true;
}
}
userPass.onblur = function() {
var reg = /^\S{6,18}$/;
if (!reg.exec(this.value)) {
items[1].innerHTML = "6-18位，包括数字字母或符号，中间不能有空格";
items[1].style.color = "red";
} else {
items[1].innerHTML = "OK";
items[1].style.color = "green";
test[1] = true;
}
}
userPass_.onblur = function() {
if (this.value != userPass.value || this.value == "") {
items[2].innerHTML = "两次输入密码不一致";
items[2].style.color = "red";
} else {
items[2].innerHTML = "OK";
items[2].style.color = "green";
test[2] = true;
}
}
userName.onblur = function() {
var reg = /^[\u4e00-\u9fa5]{2,4}$/;
if (!reg.exec(this.value)) {
items[3].innerHTML = "真实姓名，两位到四位的中文汉字";
items[3].style.color = "red";
} else {
items[3].innerHTML = "OK";
items[3].style.color = "green";
test[3] = true;
}
}
information.onblur = function() {
var reg = /^\d{14}[0-9x]$|^\d{17}[0-9x]$/;
if (!reg.exec(this.value)) {
items[4].innerHTML = "要求15位或者18位的数字，18位时最后一位可能是x";
items[4].style.color = "red";
} else {
items[4].innerHTML = "OK";
items[4].style.color = "green";
test[4] = true;
}
}
email.onblur = function() {
var reg = /^\w+@\w+\.[a-zA-Z_]+\.?[a-zA-Z_]+$/;
if (!reg.exec(this.value)) {
items[5].innerHTML = "邮箱格式不对";
items[5].style.color = "red";
} else {
items[5].innerHTML = "OK";
items[5].style.color = "green";
test[5] = true;
}
}
telephone.onblur = function() {
var reg = /^\d{11}$/;
if (!reg.exec(this.value)) {
items[6].innerHTML = "手机号码格式不对";
items[6].style.color = "red";
} else {
items[6].innerHTML = "OK";
items[6].style.color = "green";
test[6] = true;
}
}
//注册的时候，必须前面所有数据都是正确的 才能提交
handup.onclick = function() {
submit = false;
for (var i = 0; i < input.length; i++) {
test[i] = false;
input[i].onblur();
}
for (var i = 0; i < test.length; i++) {
if (test[i] == false) {
break;
} else if (i == test.length - 1) {
submit = true;
}
}
if (submit == true) {
alert("确认提交");
console.log(test);
} else {
alert("你填写的信息有误！");
console.log(test);
}
}
</script>写回答
1回答
-
你好，测试了代码整体效果还是不错的。
1、用户名正则验证与提示信息不相符：
可以修改为：
2、手机号码的验证可以更具体一些，例如：
自己可以重新测试下，祝学习愉快 ！
0
相似问题