有个问题。。。
来源：4-8 编程练习
非凡哥大战哥斯拉
2019-01-24 12:44:05
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
header{
width: 100%;
height: 40px;
background: rgb(109, 180, 234);
text-align: left;
text-indent: 20px;
font-size: 20px;
color: white;
line-height: 40px;
}
section{
width:100%;
height: 600px;
position: relative;
background-color: rgb(245, 243, 243)
}
.form{
width:100%;
height: 500px;
padding-top: 100px
}
form{
width:100%;
height: 100%;
}
.input{
width:100%;
height:20px;
margin-bottom: 20px;
}
.label,.text,.msg{
float: left;
}
.label{
width:43%;
text-align: right;
}
.text{
width:12%;
text-align: right;
}
.msg{
width:40%;
color: red;
text-indent: 15px;
}
.button{
display: block;
width: 87px;
height: 40px;
border-radius: 15px;
background: rgb(84, 130, 246);
margin: 40px auto;
color: white;
text-align: center;
line-height: 40px;
font-size: 18px;
cursor: pointer;
}
</style>
</head>
<body>
<header>用户注册</header>
<section>
<div class="form">
<form action="">
<div class="input">
<div class="label"><label for="username">用户名：</label></div>
<div class="text"><input type="text" name="username" id="username"></div>
<div class="msg username"></div>
</div>
<div class="input">
<div class="label"><label for="pwd">登录密码：</label></div>
<div class="text"><input type="password" name="pwd" id="pwd"></div>
<div class="msg pwd"></div>
</div>
<div class="input">
<div class="label"><label for="confirm">确认密码：</label></div>
<div class="text"><input type="password" name="confirm" id="confirm"></div>
<div class="msg confirm"></div>
</div>
<div class="input">
<div class="label"><label for="name">姓名：</label></div>
<div class="text"><input type="text" name="name" id="name"></div>
<div class="msg name"></div>
</div>
<div class="input">
<div class="label"> <label for="sex">性别：</label></div>
<div class="text"><select style="width:120px" name="sex" id="sex"><option value="male">男</option><option value="female">女</option></select></div>
<div class="msg"></div>
</div>
<div class="input">
<div class="label"><label for="identity">身份证号码：</label></div>
<div class="text"><input type="text" name="identity" id="identity"></div>
<div class="msg identity"></div>
</div>
<div class="input">
<div class="label"><label for="email">邮箱：</label></div>
<div class="text"><input type="text" name="email" id="email"></div>
<div class="msg email"></div>
</div>
<div class="input">
<div class="label"> <label for="mobile">手机号码：</label></div>
<div class="text"><input type="text" name="mobile" id="mobile"></div>
<div class="msg mobile"></div>
</div>
<div class="button" type="button" name="button" id="button" >提交</div>
</form>
</div>
</section>
<script>
var username = document.getElementById("username");
var pwd = document.getElementById("pwd");
var confirm = document.getElementById("confirm");
var named = document.getElementById("name");
var identity = document.getElementById("identity");
var email = document.getElementById("email");
var mobile = document.getElementById("mobile");
var btn = document.getElementById("button")
var failList = []
username.addEventListener("blur",function(){
var value = username.value;
var msg = document.querySelector(".username");
var attr = username.getAttribute("name")
if(check.isUsername(value)){
msg.innerHTML = "OK"
if(failList.indexOf(attr)){
var atttIndex = failList.indexOf(attr);
failList.splice(atttIndex,1)
}
}else{
msg.innerHTML = "请输入6-20位字母、数字或“_”,以字母开头";
failList.push(attr)
}
})
pwd.addEventListener("blur",function () {
var value = pwd.value;
var msg = document.querySelector(".pwd");
var attr = pwd.getAttribute("name")
if(check.isPwd(value)){
msg.innerHTML = "OK"
if(failList.indexOf(attr)){
var atttIndex = failList.indexOf(attr);
failList.splice(atttIndex,1)
}
}else{
msg.innerHTML = "请输入密码6-18位，包括数字字母或符号，中间不能有空格";
failList.push(attr)
}
})
confirm.addEventListener("blur",function () {
var value = confirm.value;
var msg = document.querySelector(".confirm");
var attr = confirm.getAttribute("name")
if(check.isConfirm(value)&&value != ""){
msg.innerHTML = "OK"
if(failList.indexOf(attr)){
var atttIndex = failList.indexOf(attr);
failList.splice(atttIndex,1)
}
}else{
msg.innerHTML = "密码不一致";
failList.push(attr)
}
})
named.addEventListener("blur",function(){
var value = named.value;
var msg = document.querySelector(".name");
var attr = named.getAttribute("name")
if(check.isName(value)){
msg.innerHTML = "OK";
if(failList.indexOf(attr)){
var atttIndex = failList.indexOf(attr);
failList.splice(atttIndex,1)
}
}else{
msg.innerHTML = "请输入两位到四位的中文汉字";
failList.push(attr)
}
})
identity.addEventListener("blur",function(){
var value = identity.value;
var msg = document.querySelector(".identity");
var attr = identity.getAttribute("name")
if(check.isIdCard(value)){
msg.innerHTML = "OK"
if(failList.indexOf(attr)){
var atttIndex = failList.indexOf(attr);
failList.splice(atttIndex,1)
}
}else{
msg.innerHTML = "请输入15位或者18位的数字的身份证号码"
failList.push(attr)
}
})
email.addEventListener("blur",function(){
var value = email.value;
var msg = document.querySelector(".email");
var attr = email.getAttribute("name")
if(check.isEmail(value)){
msg.innerHTML = "OK";
if(failList.indexOf(attr)){
var atttIndex = failList.indexOf(attr);
failList.splice(atttIndex,1)
}
}else{
msg.innerHTML = "请输入正确的邮箱";
failList.push(attr)
}
})
mobile.addEventListener("blur",function () {
var value = mobile.value;
var msg = document.querySelector(".mobile");
var attr = mobile.getAttribute("name")
if(check.isMobile(value)){
msg.innerHTML = "OK";
if(failList.indexOf(attr)){
var atttIndex = failList.indexOf(attr);
failList.splice(atttIndex,1)
}
}else{
msg.innerHTML = "请输入正确的手机号码";
failList.push(attr)
}
})
btn.addEventListener("click",function(){
if(failList.length == 0){
alert("验证成功")
}else{
console.log(failList)
for(var i =0;i<failList.length;i++){
var attr = failList[i]
var change = document.querySelector("."+attr);
change.innerHTML = "请完善信息"
}
}
})
var check = {
isUsername:function(value){
var pattern = /^[a-zA-Z][a-zA-Z0-9_]{6,20}$/;
if(pattern.test(value)){
return true
}else{return false}
},
isPwd:function(value){
var pattern = /^[a-zA-Z]\w|\d{6,18}$/;
if(pattern.test(value)){
return true
}else{return false}
},
isConfirm:function(value){
var password = document.getElementById("pwd").value;
if(value == password){
return true
}else{
return false
}
},
isName:function(value){
var pattern = /^[\u4e00-\u9fa5]{2,4}$/;
if(pattern.test(value)){
return true
}else{return false}
},
isIdCard:function(value){
var pattern = /^\d{15}|\d{18}$|x$/;
if(pattern.test(value)){
return true
}else{return false}
},
isEmail:function(value){
var pattern = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
if(pattern.test(value)){
return true
}else{return false}
},
isMobile:function(value){
var pattern = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
if(pattern.test(value)){
return true
}else{return false}
}
}
</script>
</body>
</html>如果全部不填，直接按提交，也是可以验证成功
写回答
3回答
-
同学说的如果在添加进数组前先检测数组中存不存在当前元素的属性，然后再添加进去，这样是可以的，在if判断条件中也需要完善条件：
为了解决表单中没有任何操作时弹框的问题，可以在点击事件中添加第一个输入框是否有内容的判断，如下：
自己测试下。
0 -
非凡哥大战哥斯拉
提问者
2019-01-24
那如果在添加进数组前先检测数组中存不存在呢？这样就可以用一个数组来判断了吧？
0 -
好帮手慕星星
2019-01-24
你好，经测试不能数组来完成，考虑的问题比较多：
1、当输入框不进行任何操作的时候，数组中没有内容，点击提交按钮，判断就会提交通过。
2、当对一个输入框进行多次失去焦点操作时，数组中就会将这个输入框的属性添加多次。
建议不使用数组，每一个输入框设置一个标志，开始为false，当验证通过的时候，标志值为true，不通过仍然为false，最后点击判断所有标志值是否全部都是true就可以。
自己可以试一试，祝学习愉快！
0
相似问题