辛苦老师检查，这样可行吗
来源：4-8 编程练习
Lanny_Chung
2020-05-27 19:43:50
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>正则表达式</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.container{
width: 800px;
height: 600px;
margin: 0 auto;
background-color: #eee;
border-radius: 3px;
}
.nav{
height: 40px;
line-height: 40px;
font-size: 16px;
text-indent: 1em;
color: #fff;
background-color:#3092D1;
}
section{
margin-left: 200px;
}
ul{
list-style-type: none;
margin-top: 40px;
}
ul>li{
height: 40px;
}
.toRight{
display: inline-block;
text-align: right;
width: 100px;
color:#656565;
}
input,select{
width:160px;
text-align: left;
}
div{
width: 80px;
height: 40px;
line-height: 40px;
margin:60px 0 0 130px;
background-color: #3082d1;
text-align: center;
border-radius: 5px;
cursor: pointer;
color:#fff;
}
.tips{
margin-left: 10px;
color:red;
font-size: 12px;
}
</style>
</head>
<body>
<article class="container">
<nav class="nav">用户注册</nav>
<section>
<ul>
<li class="change">
<span class="toRight">用户名：</span><input class="userName" type="text" name="userName" title="^[a-zA-Z]\w{5,19}$"><span class="tips"></span>
</li>
<li class="change">
<span class="toRight">登录密码：</span><input class="password1" type="password" name="password1" title="^\S{6,18}$"><span class="tips"></span>
</li>
<li class="change">
<span class="toRight">确认密码：</span><input class="password2" type="password" name="password2"><span class="tips"></span>
</li>
<li class="change">
<span class="toRight">姓名：</span><input type="name" name="name" title="^[\u4e00-\u9fa5]{2,4}$"><span class="tips"></span>
</li>
<li>
<span class="toRight">性别：</span>
<select class="sex">
<option selected>男</option>
<option>女</option>
<option>保密</option>
</select>
</li>
<li class="change">
<span class="toRight">身份证号码：</span><input type="text" name="idCard" title="^(\d{15}||\d{17}[0-9xX])$"><span class="tips"></span>
</li>
<li class="change">
<span class="toRight">邮箱：</span><input type="text" name="email" title="^[a-zA-Z0-9]+@[\w]+\.([a-zA-Z]){2,6}$"><span class="tips"></span>
</li>
<li class="change">
<span class="toRight">手机号码：</span><input type="text" name="phone" title="^1(?:3[\d]|5[0-3|5-9]|8[0|2|5-9]|47)\d{8}$"><span class="tips"></span>
</li>
</ul>
<div class="btn">提交</div>
</section>
</article>
<script type="text/javascript">
var lists=document.querySelectorAll(".change"),
tips=document.querySelectorAll(".tips"),
userName=document.querySelector(".userName"),
password1=document.querySelector(".password1"),
password2=document.querySelector(".password2"),
newErrors={
userName:"6-20位字母、数字或“_”,字母开头",
password1:"6-18位，包括数字字母或符号，中间不能有空格",
password2:"两次输入密码不一致",
name:"真实姓名，两位到四位的中文汉字",
idCard:"请填写正确的18位身份证号码",
email:"邮箱格式不正确",
phone:"电话号码不正确"
},
verification,
btn=document.querySelector(".btn");
for(var i=0;i<lists.length;i++){
lists[i].addEventListener("blur",function(){
if (this.children[1].value.search(this.children[1].title)!=-1) {
this.children[2].innerHTML="ok";
verification=true;
}else{
this.children[2].innerHTML=newErrors[this.children[1].name];
verification=false;
}
if (this.children[1].name=="password2" && password1.value!=password2.value) {
tips[2].innerHTML=newErrors.password2;
}
},true)
}
btn.onclick=function(){
var sum=-1;
if (tips[0].innerHTML!=="ok" || tips[1].innerHTML!=="ok" || tips[2].innerHTML!=="ok" || tips[3].innerHTML!=="ok" || tips[4].innerHTML!=="ok" || tips[5].innerHTML!=="ok" || tips[6].innerHTML!=="ok") {
alert("请输入注册信息");
for(var k in newErrors){
sum++;
tips[sum].innerHTML=newErrors[k];
}
tips[2].innerHTML="请输入密码";
}else{
alert("验证成功");
}
}
</script>
</body>
</html>写回答
1回答
-
同学你好，代码中有如下问题：
1. 身份证的正则表达式，15位和18位之间的“|”写一个就行，同学写了两个，可以去掉一个，如下：
2. 如果有一项验证不通过，点击“提交”按钮时，会将验证通过的项的提示文字“ok”更改成提交不成功时的提示文字，如下：
此时即使将剩下几项都填写正确，让它们的提示文字变成“ok”，但由于之前验证通过的项的提示文字不是“ok”，不满足如下条件：
所以还是无法提交表单。
建议更改提交时的验证条件，可以给每一项都设置一个标志变量，记录该项验证是否通过，然后通过这些标志变量来判断是否可以提交。另外“verification”这个变量，也没有实际使用上，可以去除。可以参考如下：
如果我的回答帮到了你，欢迎采纳，祝学习愉快！
0
相似问题