老师帮忙看下这样实现可以吗
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
header {
width: 100%;
height: 50px;
background-color: skyblue;
line-height: 50px;
color: #fff;
font-size: 20px;
padding-left: 50px;
}
.content {
background-color: #ccc;
height: 650px;
width: 100%;
}
table {
margin: 0 auto;
padding-top: 80px;
text-align: right;
}
table td {
height: 40px;
width: 250px;
}
table .output {
text-align: left;
padding-left: 20px;
color: red;
font-size: 14px;
}
table td input {
height: 20px;
width: 200px;
}
table td select {
width: 200px;
height: 25px;
}
.submit {
height: 50px;
width: 70px;
border-radius: 10px;
color: #fff;
border: 1px solid #000;
background-color: skyblue;
font-size: 20px;
margin-right: 60px;
margin-top: 50px;
}
</style>
</head>
<body>
<header>
用户注册
</header>
<div class="content">
<form action="" class="form">
<table>
<tr>
<td>用户名：</td>
<td>
<input type="text" class="input" id="username" />
</td>
<td class="output"></td>
</tr>
<tr>
<td>登录密码：</td>
<td>
<input type="password" class="input" id="password" />
</td>
<td class="output"></td>
</tr>
<tr>
<td>确认密码：</td>
<td>
<input type="password" class="input" id="passwordAgain" />
</td>
<td class="output"></td>
</tr>
<tr>
<td>姓名：</td>
<td>
<input type="text" class="input" id="name" />
</td>
<td class="output"></td>
</tr>
<tr>
<td>性别：</td>
<td>
<select name="" id="sex">
<option value="man">男</option>
<option value="woman">女</option>
</select>
</td>
<td></td>
</tr>
<tr>
<td>身份证号：</td>
<td>
<input type="text" class="input" id="idNumber" />
</td>
<td class="output"></td>
</tr>
<tr>
<td>邮箱：</td>
<td>
<input type="text" class="input" id="eMail" />
</td>
<td class="output"></td>
</tr>
<tr>
<td>手机号码：</td>
<td>
<input type="text" class="input" id="telNumber" />
</td>
<td class="output"></td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" class="submit" id="submit" />
</td>
</tr>
</table>
</form>
</div>
<script>
// 定义正则
var pattern = {
username: /^[a-z]\w{5,19}$/i,
password: /^[^\s]{6,16}$/,
name: /^[\u4e00-\u9fa5]{2,4}$/,
idNumber: /^[1-9]\d{14}$|^[1-9]\d{16}(\d|x)$/,
eMail: /^\w+@[a-z]{2,}\.[a-z]{2,3}\.?([a-z]{2})?$/i,
telNumber: /^(15[0-35-9]|13\d|18[025-9]|147)\d{8}$/
};
// 定义提示文字
var tips = {
username: "6-20位字母、数字或_，字母开头",
password: "6-18位字母、数字或符号，不能有空格",
passwordAgain: "请再次输入密码",
name: "2-4位汉字",
idNumber: "15或18位身份证号",
eMail: "请输入正确的邮箱格式",
telNumber: "请输入正确的手机号"
};
// 定义判断
var result = {
username: "false",
password: "false",
passwordAgain: "false",
name: "false",
idNumber: "false",
eMail: "false",
telNumber: "false"
};
// 获取元素
var input = document.getElementsByClassName("input"),
password = document.getElementById("password"),
submit = document.getElementById("submit");
// 定义获取input后面的元素节点
function getOutput(name) {
return name.parentNode.nextElementSibling;
}
// 遍历input下的所有节点，绑定事件聚焦时设置后面元素的提示文字
for (var i = 0; i < input.length; i++) {
input[i].onfocus = function() {
// 获取input的ID值
inputId = this.getAttribute("id");
getOutput(this).innerHTML = tips[inputId];
};
// 鼠标移出时的绑定事件
input[i].onblur = function() {
// 判断二次输入密码是否和第一次相等
if (inputId == "passwordAgain") {
if(this.value==''){
getOutput(this).innerHTML = "输入值不能为空";
}
else if (this.value == password.value) {
getOutput(this).innerHTML = "ok";
result[inputId] = "true";
} else {
getOutput(this).innerHTML = tips[inputId];
this.focus();
}
} else {
if (this.value == "") {
getOutput(this).innerHTML = "输入值不能为空";
} else if (pattern[inputId].test(this.value)) {
getOutput(this).innerHTML = "ok";
result[inputId] = "true";
} else {
getOutput(this).innerHTML = tips[inputId];
this.focus();
}
}
};
}
// 绑定提交按钮事件
submit.onclick = function(){
for (var p in result) {
if (result[p] != 'true') {
alert('提交失败');
return;
}
}
alert('提交成功');
}
</script>
</body>
</html>
老师帮忙看看这样实现有没有问题，还有没有可以改进的空间
正在回答
同学你好，这样实现是可以的。
不过一般是在失去焦点的时候，提示用户需要输入的内容格式， 所以这里可以不用为输入框绑定获取焦点事件。 可以直接在失焦事件中进行判断。
如果帮助到了你， 欢迎采纳！
祝学习愉快~~~
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星