检查一下代码
来源：4-8 编程练习
weixin_慕的地5241954
2019-10-01 03:29:01
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户注册表验证</title>
<style>
body{
margin: 0;
padding: 0;
}
/* 内容区 */
.content{
width: 1200px;
height: 740px;
margin: 100px auto;
}
/* 标题区 */
.title{
width: 100%;
height: 30px;
line-height: 30px;
background-color: #3092d1;
}
.title h2{
margin: 0;
text-indent: 20px;
font-size: 20px;
font-weight: lighter;
color: #fff;
}
/* 注册区 */
.register{
width: 100%;
height: 700px;
background-color: #ededee;
float: left;
/* 浮动是为了紧贴标题 */
}
.register-form{
margin: 100px auto;
width: 800px;
position: relative;
}
/* 这几步微调很关键 */
.register-form table{
margin-left: 150px;
}
.register-form table tr{
height: 50px;
}
.register-form table tr td{
text-indent: 10px;
}
/* 这几步微调很关键 */
.register-form table tr td:first-child{
text-align: right;
}
.register-form table tr td span{
color: red;
}
.register-form table tr td select{
width: 170px;
height: 20px;
}
.submit{
width: 80px;
height: 40px;
margin-top: 50px;
position: absolute;
left: 50%;
margin-left: -80px;
border: 1px solid #000;
border-radius: 5px;
background-color: #2375ba;
color: #fff;
text-align: center;
line-height: 40px;
font-size: 16px;
cursor: pointer;
}
</style>
</head>
<body>
<!-- 内容区 -->
<div class="content">
<!-- 标题区 -->
<div class="title"><h2>用户注册</h2></div>
<!-- 用户注册区 -->
<div class="register">
<!-- 用户注册表 -->
<!-- 这里如果用form标签，会把提交结果马上发送过去，正则验证的显示结果会丢失 -->
<div action="" method="" class="register-form">
<!-- <p><b>用户名：</b><input type="text"><span></span></p>
<p><b>登录密码：</b><input type="password"><span></span></p>
<p><b>确认密码：</b><input type="password"><span></span></p>
<p><b>姓名：</b><input type="text"><span></span></p>
<p><b>性别：</b>
<select>
<option>男</option>
<option>女</option>
</select>
<span></span>
</p>
<p><b>身份证号码：</b><input type="text"><span></span></p>
<p><b>邮箱：</b><input type="text"><span></span></p>
<p><b>手机号码：</b><input type="text"><span></span></p> -->
<table>
<tr>
<td>用户名：</td>
<!-- 用户名是6-20位字母、数字或“_”,字母开头 -->
<td><input type="text" title="^[a-zA-Z][\w_]{5,19}$"></td>
<td><span ></span></td>
</tr>
<tr>
<td>登录密码：</td>
<!-- 密码6-18位，包括数字字母或符号，中间不能有空格 -->
<td><input type="password" title="^\S{6,18}$"></td>
<td><span></span></td>
</tr>
<tr>
<td>确认密码：</td>
<td><input type="password" title=""></td>
<td><span></span></td>
</tr>
<tr>
<td>姓名：</td>
<!-- 两位到四位的中文汉字 -->
<td><input type="text" title="^[\u4e00-\u9fa5]{2,4}$"></td>
<td><span></span></td>
</tr>
<tr>
<td>性别：</td>
<!-- 微调 -->
<td colspan="2">
<select>
<option value="man">男</option>
<option value="woman">女</option>
</select>
</td>
</tr>
<tr>
<td>身份证号码：</td>
<!-- 要求15位或者18位的数字，18位时最后一位可能是x -->
<!-- (?:) ?是非贪婪，:是不获取匹配的值,加()组合在一起是或的简写-->
<td><input type="text" title="^(?:\d{15}|\d{18}|\d{17}x)$"></td>
<td><span></span></td>
</tr>
<tr>
<td>邮箱：</td>
<!-- 邮箱的格式大概分为这么几种，12323@qq.com、lulu_s@open.com、lu_lu_z@qq.com.cn等 -->
<td><input type="text" title="^(?:\w+\.)*\w+@(?:\w+\.)+[a-z]+$"></td>
<td><span></span></td>
</tr>
<tr>
<td>手机号码：</td>
<!-- 验证手机号码 -->
<td><input type="text" title="^1[3458][0-9][\d]{8}$"></td>
<td><span></span></td>
</tr>
</table>
<input type="submit" class="submit">
</div>
</div>
</div>
</body>
<script>
var inputs = document.querySelectorAll('input');
var spans = document.querySelectorAll('span');
var content = [
"6-20位字母、数字或“_”,字母开头",
"6-18位，包括数字字母或符号，中间不能有空格",
"请输入相同的密码",
"真姓名，两位到四位的中文汉字",
"15位或者18位的数字，18位时最后一位可能是x",
"请输入正确的邮箱地址",
"请输入正确的手机号码"
];
var pattern,
sum = 0;
//对每一项input的正则验证，并输出验证结果
inputs[0].onblur = function(){
pattern = new RegExp(inputs[0].title);
// if(pattern.exec(inputs[0].value)){
// spans[0].innerHTML = 'OK';
// }else{
// spans[0].innerHTML = content[0];
// }
pattern.exec(inputs[0].value)?spans[0].innerHTML = 'OK':spans[0].innerHTML = content[0];
};
// console.log(pattern) pattern是全局变量，在函数里面赋值的pattern是局部变量
inputs[1].onblur = function(){
pattern = new RegExp(inputs[1].title);
pattern.exec(inputs[1].value)? spans[1].innerHTML = 'OK': spans[1].innerHTML = content[1];
};
inputs[2].onblur = function(){
inputs[2].value == inputs[1].value?spans[2].innerHTML = 'OK':spans[2].innerHTML = content[2];
};
inputs[3].onblur = function(){
pattern = new RegExp(inputs[3].title);
pattern.exec(inputs[3].value)? spans[3].innerHTML = 'OK':spans[3].innerHTML = content[3];
};
inputs[4].onblur = function(){
pattern = new RegExp(inputs[4].title);
pattern.exec(inputs[4].value)?spans[4].innerHTML = 'OK':spans[4].innerHTML = content[4];
};
inputs[5].onblur = function(){
pattern = new RegExp(inputs[5].title);
pattern.exec(inputs[5].value)?spans[5].innerHTML = 'OK':spans[5].innerHTML = content[5];
};
inputs[6].onblur = function(){
pattern = new RegExp(inputs[6].title);
pattern.exec(inputs[6].value)?spans[6].innerHTML = 'OK':spans[6].innerHTML = content[6];
};
inputs[7].onclick = function(){
for(var i = 0;i < spans.length;i++){
if(spans[i].innerHTML != 'OK'){
spans[i].innerHTML = content[i];
}else{
sum++;
}
}
sum == 7?alert('验证成功'):alert('验证失败');
}
// 对每一项input的正则验证函数封装该怎么写，我下面尝试了两种办法都不行，能教一下吗？
// for(var i = 0;i < inputs.length;i++){
// inputs[i].onblur = function(){
// for(var j = 0;j < inputs.length;j++){
// console.log(j)
// pattern = new RegExp(inputs[j].title);
// pattern.exec(inputs[j].value)?spans[j].innerHTML = 'OK':spans[j].innerHTML = content[j];
// }
// };
// }
// function regExp(elem, idx){
// pattern = new RegExp(inputs[idx].title);
// inputs[idx].onblur = function(){
// for(var i = 0;i < spans.length;i++){
// spans[i].innerHTML = '';
// if(i == idx){
// pattern.test(inputs[idx].value);
// spans[i].innerHTML = 'ok';
// break;
// }else{
// spans[i].innerHTML = content[i];
// }
// }
// }
// }
// for(var i = 0;i < inputs.length;i++){
// regExp(inputs,i);
// }
</script>
</html>1、//console.log(pattern) pattern是全局变量，在函数里面赋值的pattern是局部变量。这里每一项中的pattern = new RegExp(inputs[0].title);赋值后，return pattern；在外面的pattern也是未定义的，为什么return不出去呢？
2、对每一项input的正则验证函数封装该怎么写，我下面尝试了两种办法都不行，能教一下吗？我在代码中有注释，麻烦看一下
写回答
1回答
-
同学，你好。要实现的话有点麻烦，我先给你讲一下，你能听懂的话更好，要是听不懂的话，也没关系，先往后学习，先记住这些。
关于你的第一个问题：
1.首先纠正一个错误，在javascript中,不使用关键字声明的变量会出现变量提升，变量会提升至全局作用域。所以函数内赋值的pattern实际上是对全局变量pattern进行赋值；说大白话就是只要没有用var声明的，都是全局变量。
2.console.log之所以输出未定义，是由于javacript的事件循环机制(Event Loop)造成的。
详细解释：
根据事件循环机制的规定，javacript会先执行所有的同步操作，待同步操作执行完毕之后，才会执行异步队列中的方法。
onblur并非函数声明，而是属于回调方法。js中所有回调均为异步操作。
而console.log是javascript的内置函数，属于同步方法，所以，在console.log输出时，全局变量pattern并未被赋值，自然是未定义的。
如果想要打印全局pattern，可以声明一个函数输出window.pattern，在赋值完成后调用。如:
第二个问题，比较方便的就是修改你的第一种方法，参考下面的代码，里面也有备注：
function print_f (){
console.log(window.pattern)
}
inputs[0].onblur = function(){
pattern = new RegExp(inputs[0].title);
pattern.exec(inputs[0].value)?spans[0].innerHTML = 'OK':spans[0].innerHTML = content[0];
print_f();
};
如果帮助到了你，欢迎采纳！
祝学习愉快！
0h019-10-06
相似问题