请老师帮忙检查下代码。
来源：4-8 编程练习
慕尼黑2537189
2020-06-30 18:10:23
<!DOCTYPE html>
<html>
<head>
<title>用户注册</title>
<style type="text/css">
*{
margin:0;
padding: 0
border:none;
}
.wrap{
width: 1200px;
height: 600px;
background: #eee;
margin: 0 auto;
}
.register{
width: 1180px;
height: 30px;
line-height: 30px;
background: #1d9dd1;
padding-left: 20px;
}
.content{
width: 700px;
height: 300px;
margin: 0 auto;
position: relative;
}
.content .left{
width: 100px;
margin: 100px 0 0 150px;
position: absolute;
}
.content .left p{
position: relative;
font-size: 16px;
padding: 11px 0;
text-align: right;
top: -10px;
}
.content .right{
width: 408px;
float: left;
margin-left: 260px;
margin-top: 100px;
position: absolute;
}
.content .right input{
width: 200px;
height: 14px;
position: relative;
}
.content .right .sex{
width: 204px;
height: 20px;
}
.content .right span{
width: 204px;
height: 20px;
display: block;
position: relative;
top: -20px;
left: 204px;
font-size: 10px;
}
.btn{
width: 70px;
height: 26px;
border-radius: 7px;
border:none;
background: #1d9dd1;
}
</style>
</head>
<body>
<div class="wrap">
<div class="register">用户注册</div>
<div class="content">
<div class="left">
<p>用户名：</p>
<p>登录密码：</p>
<p>确认密码：</p>
<p>姓名：</p>
<p>性别：</p>
<p>身份证号码：</p>
<p>邮箱：</p>
<p>手机号码：</p>
</div>
<div class="right">
<input type="text" class="username" id="username"><span class="tip"></span>
<input type="password" class="pwd" id="pwd"><span class="tip"></span>
<input type="password" class="againPwd" id="againPwd"><span class="tip"></span>
<input type="name" class="name" id="name"><span class="tip"></span>
<select class="sex" id="sex">
<option class="man" value="man">男</option>
<option class="woman" value="woman">女</option>
</select><span class="tip"></span>
<input type="info" class="info" id="info"><span class="tip"></span>
<input type="email" class="email" id="email"><span class="tip"></span>
<input type="tell" class="tell" id="tell"><span class="tip"></span><br/>
<button class="btn" id = "btn">提交</button>
</div>
</div>
</div>
<script type="text/javascript">
var username = document.querySelector("#username"),
pwd = document.querySelector("#pwd"),
againPwd = document.querySelector("#againPwd"),
nam = document.getElementById('name'),
sex = document.querySelectorAll("sex"),
info = document.querySelector("#info"),
email = document.querySelector("#email"),
tell = document.querySelector("#tell"),
tips = document.querySelectorAll(".tip");
var btn = document.querySelector("#btn");
username.onblur = function(){
var pattern = /^[a-z][a-z0-9_]{5,19}$/ig;
if(pattern.test(username.value) === true){
tips[0].innerHTML = "ok";
tips[0].style.color = "red";
}else{
tips[0].innerHTML = "6-20位字母、数字或“_”，以字母开头";
tips[0].style.color ="red";
}
}
pwd.onblur = function(){
var pattern = /^\S{6,18}$/ig;
if(pattern.test(pwd.value) === true){
tips[1].innerHTML = "ok";
tips[1].style.color = "red";
}else{
tips[1].innerHTML = "密码为6-18位字母、数字或符号，中间不能有空格";
tips[1].style.color ="red";
}
}
againPwd.onblur = function(){
if(againPwd.value ===""){
tips[2].innerHTML = "密码不能为空";
tips[2].style.color = "red";
}else if(againPwd.value === pwd.value){
tips[2].innerHTML = "ok";
tips[2].style.color = "red";
}else{
tips[2].innerHTML = "两次输入密码不一致";
tips[2].style.color ="red";
}
}
nam.onblur = function(){
var pattern = /^[\u4e00-\u9fa5]{2,4}$/;
if(pattern.test(nam.value) === true){
tips[3].innerHTML = "ok";
tips[3].style.color = "red";
}else{
tips[3].innerHTML = "请输入中文真实姓名";
tips[3].style.color ="red";
}
}
info.onblur = function(){
var pattern = /^\d{15,18}$/;
var pattern1 = /^\d{17,17}[a-z]$/gi;
if(pattern.test(info.value) === true || pattern1.test(info.value) ===true){
tips[5].innerHTML = "ok";
tips[5].style.color = "red";
}else{
tips[5].innerHTML = "请输入本人15-18位身份证号码";
tips[5].style.color ="red";
}
}
email.onblur = function(){
var pattern = /(?:\w+\.)*\w+@(?:\w+\.)+[a-z]/i;
if(pattern.test(email.value) === true){
tips[6].innerHTML = "ok";
tips[6].style.color = "red";
}else{
tips[6].innerHTML = "邮箱格式不正确";
tips[6].style.color ="red";
}
}
tell.onblur = function(){
var pattern = /^[1]\d{10,10}$/;
if(pattern.test(tell.value) === true){
tips[7].innerHTML = "ok";
tips[7].style.color = "red";
}else{
tips[7].innerHTML = "请输入真实的手机号码";
tips[7].style.color ="red";
}
}
btn.onclick = function(){
for(var i=0;i<tips.length;i++){
if(tips[i].innerHTML == "ok"){
return alert("验证成功！");
}else{
return alert("请输入注册信息！");
}
}
}
</script>
</body>
</html>
1回答
-
同学你好，代码中存在的问题解答如下：
如下所示位置缺少分号，建议添加上，让代码更加规范
身份证最后一位只能是大小写字母x，但测试输入其他字母也可以通过验证，如下所示：
建议修改：
手机号第二位不能是任意数字，但测试时，输入0也可以通过验证
建议参考下图调整
由于在循环中直接使用return, 导致第一个满足条件后，就会退出循环，提示验证成功，如下所示：
建议：定义一个变量，用来记录满足条件的个数，循环结束后，通过判断变量的值，弹出对应的提示信息
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0
相似问题