老师 我目前有两个问题
来源：4-8 编程练习
anan_123
2020-01-02 17:04:25
1.为什么我验证密码这行，输入的不符合要求 也显示正确的。
2.为什么我用户名不输入，先输入登陆密码，验证信息“OK”也是在用户名后面显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.total{
width: 800px;
margin: 0px auto ;
}
.total::after{
display: block;
clear: both;
content: "";
}
.head{
background-color: rgb(35, 123, 211);
color: white;
height: 30px;
line-height: 30px;
padding: 5px 10px 5px;
}
.left{
width: 390px;
height: 400px;
text-align: right;
padding: 20px 5px;
float: left;
background-color: rgb(189, 185, 185);
}
.s{
width: 170px;
}
.right{
width: 390px;
float: right;
padding: 20px 5px;
height: 400px;
background-color: rgb(189, 185, 185);
}
.in{
margin-top: 20px;
}
.b{
width: 80px;
height: 40px;
border-radius: 10px;
background-color: rgba(32, 139, 182, 0.918);
color: white;
font-size: 20px;
}
</style>
</head>
<body>
<div class="total">
<div class="head">
用户注册
</div>
<div class="fot left">
<div class="in ">用户名：<input class="o" type="text" id="yhm" ></div>
<div class="in ">登录密码：<input class="o" type="text" id="dlm" ></div>
<div class="in ">确认密码：<input class="o" type="text" id="qrm"></div>
<div class="in ">姓名：<input class="o" type="text" id="xm"></div>
<div class="in ">性别：
<select class="s">
<option value="男">男</option>
<option value="女">女</option>
</select>
</div>
<div class="in ">身份证号码：<input class="o" type="text" id="sfz"></div>
<div class="in ">邮箱：<input class="o" type="text" id="yx"></div>
<div class="in ">手机号码：<input class="o" type="text" id="sjh"></div>
</div>
<div class="fot right">
<div type="text" class="in iok"></div>
<div type="text" class="in iok"></div>
<div type="text" class="in iok"></div>
<div type="text" class="in iok"></div>
<div type="text" class="in iok"></div>
<div type="text" class="in iok"></div>
<div type="text" class="in iok"></div>
<div type="text" class="in iok"></div>
</div>
</div>
<div class="sub" style="text-align: center; margin: 20px 0px;" ><input class="b" type="button" value="提交" id="sub"></div>
<script>
var yhm=document.getElementById("yhm"),
dlm=document.getElementById("dlm"),
qrm=document.getElementById("qrm"),
xm=document.getElementById("xm"),
sfz=document.getElementById("sfz"),
yx=document.getElementById("yx"),
sjh=document.getElementById("sjh"),
iok=document.getElementsByClassName("iok"),
isTure;
yhm.onblur=function(){
var pattern1=/^[a-z]\w{5,19}$/i;
if (yhm.value.match(pattern1)) {
iok[0].innerHTML="OK";
isTure=true;
}else{
iok[0].innerHTML="6-20位字母，数字或下划线，字母开头";
isTure=false;
}
}
dlm.onblur=function(){
var pattern2=/^\S{6,18}$/;
if (yhm.value.match(pattern2)) {
iok[1].innerHTML="OK";
isTure=true;
}else{
iok[1].innerHTML="密码6-18位，包括数字字母或符号，中间不能有空格";
isTure=false;
}
}
qrm.onblur=function(){
var pattern2=/^\S{6,18}$/;
if (qrm.value.match(pattern2)=true&&qrm.value==dlm.value) {
iok[2].innerHTML="OK";
isTure=true;
}else{
iok[2].innerHTML="两次输入密码不一致";
isTure=false;
}
}
</script>
</body>
</html>
2回答
-
好帮手慕夭夭
2020-01-02
同学你好，问题解答如下：
1.按照老师的方式修改，结构更好。如果想要对齐，给元素设置固定的宽度就行。
2.按照同学的做法，给提示信息设置一个高度，它让占个位置即可。如下：
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0 -
好帮手慕夭夭
2020-01-02
同学你好，问题解答如下：
1.老师这边测试，与同学描述的不一样。是输入正确，也显示错误。如下图所示：
这是因为获取密码框value值时，单词拼错，如下修改：
2.这是因为前面的div没有添加上内容，高度为0，不占据页面的位置，所以第二个div默认在最上面：
建议整体都调整结构，把提示信息放在对应的输入框后面。可以使用span标签，这样与其他行内元素排列在一行显示。示例：
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0h020-01-02
相似问题