晕了晕了。JS整不出来，复制别人的也看不懂，JS部分的那几个函数，老师能帮我解释下不？绕晕了

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
padding: 0;
margin:0;
font-size: 16px;
}
body{
background:#eee; 
}
header{
width: 100%;
height:2em;
line-height: 2em;
background-color:#3096d1; 
color: #fff;
}
span{
display: inline-block;
padding-left:20px; 
}
.content{
width: 80%;
margin:50px auto auto;
position: relative;
}
.content__left{
left: 0%;
width: 32%;
position: absolute;
float: left;
background: gray;
}
.content__left__box{
position: absolute;
right:0;
width: 200px;
/*top:30px;*/
line-height: 50px;
text-align: right;
color: #656565;
}
.content__right{
left: 32%;
position: absolute;
float: right;
background:red; 
}
.content__right_box{
position: absolute;
/*left:26px;*/
line-height: 50px;
text-align: right;
}
.content__right_box__con{ width: 204px; }
.content__right_box__con select{
display: inline-block;
width: 170px;
}

.content__input{text-align: center;margin-top: 50px;}
.content__input__btn{
display: inline-block;
background: #3096d1;
padding: 10px 27px;
border-radius: 5px;
border: 0px;
color: #fff;
}
</style>
</head>
<body>
<div class="table">
<header><span>用户注册</span></header>
<div class="content">
<div class="content__left">
<div class="content__left__box">
<div class="content__left__box__con">用户名：</div>
<div class="content__left__box__con">登录密码：</div>
<div class="content__left__box__con">确认密码：</div>
<div class="content__left__box__con">姓名：</div>
<div class="content__left__box__con">性别：</div>
<div class="content__left__box__con">身份证号码：</div>
<div class="content__left__box__con">邮箱：</div>
<div class="content__left__box__con">手机号码：</div>
</div>
</div>
<div class="content__right">
<div class="content__right_box">
<div class="content__right_box__con">
<input type="text" name="userName" id="userName">
</div>
<div class="content__right_box__con">
<input type="password" name="password" id="password">
</div>
<div class="content__right_box__con">
<input type="password" name="passwordConfirm" id="passwordConfirm">
</div>
<div class="content__right_box__con">
<input type="text" name="name" id="name">
</div>
<div class="content__right_box__con">
<select name="sex" id="sex">
<option value="">--请选择--</option>
<option value="male">男</option>
<option value="female">女</option>
</select>
</div>
<div class="content__right_box__con">
<input type="text" name="identityCard" id="identityCard">
</div>
<div class="content__right_box__con">
<input type="text" name="email" id="email">
</div>
<div class="content__right_box__con">
<input type="text" name="phone" id="phone">
</div>
<div class="content__input">
<input type="submit" value="提交" name="submit" id="submit" class="content__input__btn"/>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
// 获取dom元素
    var form = {
userName: document.querySelector("#userName"),
password: document.querySelector("#password"),
passwordConfirm: document.querySelector("#passwordConfirm"),
name: document.querySelector("#name"),
sex: document.querySelector("#sex"),
identityCard: document.querySelector("#identityCard"),
email: document.querySelector("#email"),
phone: document.querySelector("#phone"),
    }
    // 正则匹配
var patterns = {
userName: /^[A-z]\w{5,19}$/,
password: /^\S{6,18}$/,
passwordConfirm: /^\S{6,18}$/,
name: /^[\u4a00-\u9fa5]{2,4}$/,
sex: /^(?:male|female)$/,
identityCard: /^\d{15}$|^\d{17}[\dxX]$/,
email: /^\w+@\w+\.com(\.cn)?$/,
phone: /^(15[0-35-9]|13\d|18[025-9]|147)\d{8}$/
}
// 标志位，全部为true才允许提交
var flag = {
userName: false,
password: false,
passwordConfirm: false,
name: false,
sex: false,
identityCard: false,
email: false,
phone: false
};
// 这是提示内容
var tips = {
userName: '<span style="color:red">用户名是6-20位字母、数字或“_”,字母开头<span>',
password: '<span style="color:red">密码6-18位，包括数字字母或符号，中间不能有空格<span>',
passwordConfirm: '<span style="color:red">两次密码不一致<span>',
name: '<span style="color:red">两位到四位的中文汉字<span>',
sex: '<span style="color:red">未选择性别<span>',
identityCard: '<span style="color:red">15位或者18位的数字，18位时最后一位可能是x<span>',
email: '<span style="color:red">邮箱格式不正确<span>',
phone: '<span style="color:red">手机号格式不正确<span>',
ok: '<span style="color:green">OK<span>'
}
var content=document.querySelector(".content");
var submit=document.querySelector("#submit");
// 绑定事件
for (let elem in form) {
form[elem].onblur = inspect;
}
// 正则匹配判断
function inspect() {
if (patterns[this.name].test(this.value)) {
if (this.name == 'passwordConfirm') {
if (this.name == 'passwordConfirm') {
flag[this.name] = true;
this.nextElementSibling.outerHTML = tips['ok'];
} else {
flag[this.name] = false;
this.nextElementSibling.outerHTML = tips[this.name];
}
}
else {
flag[this.name] = true;
this.nextElementSibling.outerHTML = tips['ok'];
}
} else {
flag[this.name] = false;
this.nextElementSibling.outerHTML = tips[this.name];
}
};
// 提交确认
function confirm() {
for (let elem in form) {
form[elem].onblur();
}
for (let elem in flag) {
if (flag[elem] != true) {
console.log(elem);
return;
}
}
console.log("成功提交");
content.submit();
}
// 绑定提交事件
button.onclick = confirm;
</script>
</html>

Sherlock_bourne 2019-05-24

源自：正则表达式 4-8 编程练习

收起

1回答

好帮手慕夭夭回答被采纳获得+3积分 2019-05-25 14:34:24

你好同学，不要着急，老师建议你练习的时候不要直接复制别人的，因为代码实现很灵活，大家都会有自己的思路，如果直接去抄别人的，很容易造成思路混乱。这样不利于你自己的学习与提升。

例如在这个代码中，并没有定义button,所以代码运行会报错

还有nextElementSibling是获取元素之后的下一个兄弟元素，这里的this是获取焦点的元素input，而html代码中它后面没有兄弟元素，所以如下语句也是会报错的：

以上的如下调整：

为每一个input元素后面加一个兄弟元素，用来存放提示信息的，参考如下：

因为加了结构，小盒子的宽度要修改一下哦

另外，代码中的两个函数参考注释理解一下。

不过老师还是建议自己要做一下，不要直接复制别人的。这样自己还是会理解不透彻，如果自己没有思路，你可以参考着这个代码多敲几遍。难理解的地方就有多花时间去思考，慢慢的就会明白了。加油！

祝学习愉快，望采纳。

收起回答

Sherlock_bourne 提问者 #1

老师真厉害，这样改下就好了！感谢~！只有一个没理解，怎么分辨出，this是指获取焦点的input框的？

2019-05-25 18:40:15
好帮手慕夭夭回复提问者 Sherlock_bourne #2

this指向的就是函数的调用者，例如事件绑定的函数，这个事件函数是获取某一个input焦点触发的，所以函数里面的this指向的就是获取焦点的input哦。

2019-05-25 18:58:06
Sherlock_bourne 提问者回复好帮手慕夭夭 #3

感谢老师！

2019-05-28 22:14:38