老师，请帮忙看一下
来源：4-8 编程练习
weixin_慕先生7015352
2020-08-20 19:16:05
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>注册验证</title>
<style>
.wrap {
width: 1200px;
height: 800px;
margin: 0 auto;
border: 1px solid red;
}
.nav {
padding-left: 20px;
height: 30px;
line-height: 30px;
background-color: skyblue ;
color: #fff;
font-size: 18px;
}
.content {
background-color: #ececec;
height: 770px;
}
.box {
border: 1px solid #000;
width:1000px;
margin: 0 auto;
font-size: 18px;
color: rgb(140, 140, 150);
padding-top: 50px;
position: relative;
}
table {
margin: 0 auto;
}
tr {
line-height: 50px;
}
tr td:nth-child(1){
text-align: right;
padding-right: 20px;
}
tr td:nth-child(2){
width: 175px;
}
#sex {
width: 175px;
height: 21px;
}
.btn {
width: 70px;
height: 30px;
line-height: 30px;
text-align: center;
background-color: skyblue;
position: absolute;
margin-left: 50%;
left: -35px;
margin-top: 50px;
border-radius: 5px;
color: #fff;
}
.test {
/* display:none; */
color: red;
width: 400px;
font-size: 15px;
padding-left: 10px;
text-align: left;
}
</style>
</head>
<body>
<div class="wrap">
<div class="nav">用户注册</div>
<div class="content">
<div class="box">
<table>
<tr>
<td>用户名：</td>
<td><input type="text" id="username"></td>
<td id="Tusername" class="test"></td>
</tr>
<tr>
<td>登录密码：</td>
<td><input type="text" id="paw"></td>
<td id="Tpaw" class="test"></td>
</tr>
<tr>
<td>确认密码：</td>
<td><input type="text" id="pawa"></td>
<td class="test" id="Tpawa"></td>
</tr>
<tr>
<td>姓名：</td>
<td><input type="text" id="name"></td>
<td class="test" id="Tname"></td>
</tr>
<tr>
<td>性别：</td>
<td>
<select name="" id="sex">
<option value="男">男</option>
<option value="女">女</option>
</select>
</td>
<td class="test" id="Tsex"></td>
</tr>
<tr>
<td>身份证号码：</td>
<td><input type="text" id="idcard"></td>
<td class="test" id="Tidcard"></td>
</tr>
<tr>
<td>邮箱：</td>
<td><input type="text" id="email"></td>
<td class="test" id="Temail"></td>
</tr>
<tr>
<td>手机号码：</td>
<td><input type="text" id="tel"></td>
<td class="test" id="Ttel"></td>
</tr>
</table>
<div class="btn" id="btn">提交</div>
</div>
</div>
</div>
<script>
function getById(id){
return document.getElementById(id);
}
var getElem={
username:getById('username'),
paw: getById('paw'),
pawa:getById('pawa'),
name:getById('name'),
sex:getById('sex'),
idcard:getById('idcard'),
email:getById('email'),
tel:getById('tel'),
btn:getById('btn'),
Tusername:getById('Tusername'),
Tpaw: getById('Tpaw'),
Tpawa:getById('Tpawa'),
Tname:getById('Tname'),
Tsex:getById('Tsex'),
Tidcard:getById('Tidcard'),
Temail:getById('Temail'),
Ttel:getById('Ttel'),
Tbtn:getById('btn'),
tests: document.getElementsByClassName('test')
};
// 用户名
getElem.username.onblur = function(){
// console.log(111);
var pattern = /^[a-zA-Z]\w{5,19}$/i;
if(pattern.test(getElem.username.value)){
getElem.Tusername.innerHTML='OK';
}else{
getElem.Tusername.innerHTML="6-20位字母、数字或'_',字母开头";
}
}
// 密码
getElem.paw.onblur = function(){
var pattern = /^\S{6,18}$/i;
if(pattern.test(getElem.paw.value)){
getElem.Tpaw.innerHTML = "OK";
}else{
getElem.Tpaw.innerHTML = "6-18位，包括字母数字或符号，中间不能有空格";
}
}
// 验证密码
getElem.pawa.onblur=function(){
if(getElem.pawa.value==getElem.paw.value&&getElem.paw.value!=''){
getElem.Tpawa.innerHTML = 'OK';
}else{
getElem.Tpawa.innerHTML = '两次输入密码不一致';
}
}
// 姓名
getElem.name.onblur = function(){
var pattern = /^[\u4e00-\u9fa5]{2,4}$/;
if(pattern.test(getElem.name.value)){
getElem.Tname.innerHTML = "OK";
}else{
getElem.Tname.innerHTML = '真实姓名为两为到四位的中文汉字';
}
}
// 身份证号码
getElem.idcard.onblur=function(){
var pattern = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
if(pattern.test(getElem.idcard.value)){
getElem.Tidcard.innerHTML = "OK";
}else{
getElem.Tidcard.innerHTML = '15位或18位的数字，18位时最后一位可能是X';
}
}
// 邮箱
getElem.email.onblur = function(){
var pattern = /^[a-z0-9]+(?:[.-_][a-zA-Z]+)*@[a-z0-9]+(?:[.-_][a-z0-9]+)*\.+[a-z]{2,4}$/i;
if(pattern.test(getElem.email.value)){
getElem.Temail.innerHTML = "OK";
}else{
getElem.Temail.innerHTML = '邮箱格式不正确';
}
}
// 手机号
getElem.tel.onblur = function(){
var pattern = /^1[358]\d{9}$/;
if(pattern.test(getElem.tel.value)){
getElem.Ttel.innerHTML = "OK";
}else{
getElem.Ttel.innerHTML = "电话号码错误";
}
}
// 提交按钮
getElem.btn.onclick = function(){
getElem.username.onblur;
getElem.paw.onblur;
getElem.pawa.onblur;
getElem.name.onblur;
getElem.idcard.onblur;
getElem.email.onblur;
getElem.tel.onblur;
for(var i=0;i<getElem.tests.length;i++){
if(getElem.tests[i].innerHTML!="OK"){
return;
}else{
alert("验证成功");
return;
}
}
}
</script>
</body>
</html>
1回答
-
好帮手慕久久
2020-08-21
同学你好，代码中有如下问题：
1. box的边框可以去掉（样式不好看）：
2. 可输入的手机号不完整，调整如下:
其中中间两位要符合括号中的内容：3[0-9]|47|5[0-3|5-9]|8[0|2|5-9]，即中间两位可以是30-39、47、50-53、55-59等。
3. 点击提交按钮，没反应。
原因是执行onblur的事件处理函数时，没有加括号，修改如下:
4. 只输入一项，点击提交，就能验证成功：
原因是第一项的innerHTML是ok，会执行else语句，弹出验证成功。
可做如下修改：
如果我的回答帮到了你，欢迎采纳，祝学习愉快！
0
相似问题