老师请检查一下代码有没有问题
来源：4-8 编程练习
Jyuloeng
2019-07-11 22:53:12
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#wrap{
margin: 100px auto;
width: 800px;
height: 650px;
background-color: #f5f5f5;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.title{
font-size: 23px;
background-color: lightblue;
text-indent: 20px;
color: white;
line-height: 40px;
height: 40px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.userInput{
margin: 100px auto;
padding-left: 220px;
font-size: 15px;
}
label{
cursor: pointer;
display: inline-block;
padding: 3px 6px;
text-align: right;
width: 90px;
}
input{
width: 170px;
height: 18px;
line-height: 18px;
border: 1px solid #e5e5e5;
font-family: '微软雅黑';
}
select{
width: 172px;
height: 22px;
line-height: 23px;
border: 1px solid #e5e5e5;
font-family: '微软雅黑';
}
.userInput .tips{
color: red;
padding-left: 7px;
font-size: 12px;
}
#submit{
background-color: #2374b9;
color: white;
font-size: 17px;
line-height: 40px;
height: 42px;
width: 77px;
border: 1px solid #eee;
border-radius: 8px;
margin: 27px 145px;
}
</style>
</head>
<body>
<form id="wrap">
<h1 class="title">用户注册</h1>
<div class="userInput">
<p>
<label for="userPassName">用户名：</label>
<input type="text" id="userPassName">
<span class="tips"></span>
</p>
<p>
<label for="userPassWord">登陆密码：</label>
<input type="password" id="userPassWord">
<span class="tips"></span>
</p>
<p>
<label for="affPassWord">确认密码：</label>
<input type="password" id="affPassWord">
<span class="tips"></span>
</p>
<p>
<label for="userName">姓名：</label>
<input type="text" id="userName">
<span class="tips"></span>
</p>
<p>
<label for="userSex">性别：</label>
<select id="userSex">
<option>男</option>
<option>女</option>
</select>
</p>
<p>
<label for="userID">身份证号码：</label>
<input type="text" id="userID">
<span class="tips"></span>
</p>
<p>
<label for="userEmail">邮箱：</label>
<input type="text" id="userEmail">
<span class="tips"></span>
</p>
<p>
<label for="userPhoneNum">手机号码：</label>
<input type="text" id="userPhoneNum">
<span class="tips"></span>
</p>
<p>
<input type="button" value="提交" id="submit">
</p>
</div>
</form>
<script type="text/javascript">
//获取父元素
var wrapElem = document.getElementById('wrap');
// 获取子元素
var formElem = {
userPassName: wrapElem.querySelector('#userPassName'),
userPassWord: wrapElem.querySelector('#userPassWord'),
affPassWord: wrapElem.querySelector('#affPassWord'),
userName: wrapElem.querySelector('#userName'),
userSex: wrapElem.querySelector('#userSex'),
userID: wrapElem.querySelector('#userID'),
userEmail: wrapElem.querySelector('#userEmail'),
userPhoneNum: wrapElem.querySelector('#userPhoneNum'),
submit: wrapElem.querySelector('#submit'),
tips: wrapElem.querySelectorAll('.tips')
};
// 创建相应正则
var pattern = {
userPassName: /^[a-z]\w{5,19}$/i, //验证用户名
userPassWord: /^\S{6,18}$/, //验证用户密码
userName: /^[\u4e00-\u9fa5]{2,4}$/, //验证姓名
userID: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, //验证身份证号
userEmail: /^\w+@\w+.[a-zA-Z]{2,3}$/,
userPhoneNum: /^(?:13[0-9]|147|15[012356789]|18[0256789])\d{8}$/
};
//创建判断方法
var test = {
userPassName: function(){
if(!pattern.userPassName.test(formElem.userPassName.value)){
formElem.tips[0].innerHTML = '需6-20位字母、数字或“_”,字母开头';
return false;
}
else{
formElem.tips[0].innerHTML = 'OK';
return true;
}
},
userPassWord: function(){
if(!pattern.userPassWord.test(formElem.userPassWord.value)){
formElem.tips[1].innerHTML = '需6-18位，包括数字字母或符号，中间不能有空格';
return false;
}
else{
formElem.tips[1].innerHTML = 'OK';
return true;
}
},
affPassWord: function(){
if(formElem.userPassWord.value != formElem.affPassWord.value){
formElem.tips[2].innerHTML = '两次输入的密码不一致，请重新输入';
return false;
}
else if(formElem.userPassWord.value == ''){
formElem.tips[2].innerHTML = '请输入登录密码';
return false;
}
else{
formElem.tips[2].innerHTML = 'OK';
return true;
}
},
userName: function(){
if(!pattern.userName.test(formElem.userName.value)){
formElem.tips[3].innerHTML = '需6两位到四位的中文汉字';
return false;
}
else{
formElem.tips[3].innerHTML = 'OK';
return true;
}
},
userID: function(){
if(!pattern.userID.test(formElem.userID.value)){
formElem.tips[4].innerHTML = '请输入正确的身份证号码';
return false;
}
else{
formElem.tips[4].innerHTML = 'OK';
return true;
}
},
userEmail: function(){
if(!pattern.userEmail.test(formElem.userEmail.value)){
formElem.tips[5].innerHTML = '请输入正确的邮箱地址';
return false;
}
else{
formElem.tips[5].innerHTML = 'OK';
return true;
}
},
userPhoneNum: function(){
if(!pattern.userPhoneNum.test(formElem.userPhoneNum.value)){
formElem.tips[6].innerHTML = '请输入正确的手机号码';
return false;
}
else{
formElem.tips[6].innerHTML = 'OK';
return true;
}
}
};
//遍历执行onblur
for(var i in formElem){
formElem[i].onblur = test[i];
}
//判断是否能提交
formElem.submit.onclick = function(){
var judge = function(){
for(var i in test){
if(test[i]() != true){
test[i]();
return false;
}
}
return true
};
if(judge() == true){
alert('提交成功！');
}else{
alert('输入信息有误！');
}
}
</script>
</body>
</html>写回答
1回答
-
你好同学，代码实现的正确，非常棒，老师要给你一个表扬哦。
希望同学继续加油，祝学习愉快！
1
相似问题