Question

我很抱歉标题。我不确定如何最好地用一行来描述这个问题。

我正在创建一个表格。此表格将通过正则表达式进行验证。根据是否正确，我想添加类animate，然后将触发CSS关键帧动画。错误将触发一个时间标记，正确将触发一个复选标记。

问题。所有输入均被立即验证，从而触发所有动画。尽管我只希望它为this输入运行，但我在每个输入上都放置了一个事件侦听器。

在名称验证器中，您可以看到从0：3开始的数字，它们代表动画的索引。但是通过console.log，我已经注意到它正在发送所有号码，而不仅仅是发送我想绑定到特定规则（Regex）的号码。

我尝试通过检查输入的IndexOf来修复它，因为它们的索引号与它们的叉号/复选标记相同。但是我没有太大的成功。我可以做的另一件事是通过专门针对类使animator()更长。但是，如果我想避免这种情况，因为我想使代码简短。

感谢您的时间：）！

您可以在此处查看代码段：

html, body {
  height: 100%;
  width: 100%;
  font-family: 'Poppins', sans-serif;
  color: #222;
  margin: 0;
  background-color: black;
}

.container {
	background-image: url('sunset.jpg');
	background-size: 100%,100%;
	width: 100vw;
	height: 100%;
	display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
}
.form {
	display: inline-flex;
}

input {
	margin-left: 10px;
	opacity: .8;
}

input[type=text] {
    background-color: white;
    background-position: 10px 10px; 
    background-repeat: no-repeat;
    padding-left: 15px;
    width: 250px;
    height: 35px;
    margin: 10px;
    position: relative;
    left: -40px;
    font-size: 18px;
    border-radius: 5px;


}

input[name=postalcode] {
	width: 100px;
}

.submit-btn {
	  height: 41px;
    position: relative;
    background-color: #F8FDFF;
    top: -3px;
    border-radius: 5px;
    left: -40px;
}

.form p {
	display: inline-table;
	color: white;
}

.fas {
  color: white;
  position: relative;
  left: -40px;
  opacity: 0;
}

.fa-check {
left: -20px;
}



.slide-in-right.animate {
	-webkit-animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes slide-in-right {
  0% {
    -webkit-transform: translateX(1000px);
            transform: translateX(1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slide-in-right {
  0% {
    -webkit-transform: translateX(1000px);
            transform: translateX(1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}

<!DOCTYPE html>
<html>
<head>
	
	<title>Buttons</title>
	<link href="style.css" rel="stylesheet">
	<link href="animation-library.css" rel="stylesheet">
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
</head>
<body>

<div class="container">
	<div class="form">
		<form>
			<i class="form-display fas fa-check slide-in-right" id="promotioncode"></i>
			<i class="form-error fas fa-times slide-in-right"></i>
			<input id="name" type="text" name="name" placeholder='Name...'><br>
			<i class="form-display fas fa-check slide-in-right"></i>
			<i class="form-error fas fa-times slide-in-right"></i>
			<input id="mail" type="text" name="email" placeholder='E-mail...'><br>
			<i class="form-display fas fa-check slide-in-right"></i>
			<i class="form-error fas fa-times slide-in-right"></i>
			<input id="phone" type="text" name="adress" placeholder='Phone...'><br>
			<i class="form-display fas fa-check slide-in-right"></i>
			<i class="form-error fas fa-times slide-in-right"></i>
			<input id="postal" type="text" name="postalcode" placeholder='Postal...'><input type="button" value="Submit" name="submit" class="submit-btn">
			<br>
			<input type="checkbox" name="checkbox"><p>I want spam</p>
			<br>
			<input type="checkbox" name="checkbox"><p>I agree to the terms I haven't read<br>
		</form>
	</div>
</div>


<script type="text/javascript">
	
	

	//Regular Expressions 
	const nameRegX = /^$/;
	const mailRegX = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
	const phoneRegX = /^[0-9]{7}/;
	const postRegX = /^[0-9]{4}[a-zA-Z]{2}/;

	//If these are all true, form will be send
	var nameIsValid, mailIsValid, numberIsValid, postalIsValid
	nameIsValid = false;
	mailIsValid = false;
	numberIsValid = false;
	postalIsValid = false;

	

	//Eventlistener on all inpluts
	inputs = document.querySelectorAll("input");

		for (var i = 0; i < inputs.length; i++){
		inputs[i].onchange = function() {
    	var name, mail, number, postal;
		name = inputs[0].value;
		mail = inputs[1].value;
		number = inputs[2].value;
		postal = inputs[3].value;
		
		nameValidator(name, mail, number, postal);
		}
	}



	function nameValidator(name, mail, number, postal){
		validator(!name.match(nameRegX), nameIsValid, 0)
		validator(mail.match(mailRegX), mailIsValid, 1)
		validator(number.match(phoneRegX), numberIsValid, 2)
		validator(postal.match(postRegX), postalIsValid, 3)

		if (nameIsValid, mailIsValid, numberIsValid, postalIsValid === true){
			submit(true);
		} else {
			submit(false);
		}
	}

	//Animation Selectors
	var error = document.querySelectorAll(".form-error");
	var correct = document.querySelectorAll(".form-display");

	function validator(rule, isValid, index){
			
		if (rule){
			animator(index, "correct");
			isValid = true;
		} else {
			animator(index, "error");
		}
	}

	
	
	function animator(i, validity){
		var error = document.querySelectorAll(".form-error");
		var correct = document.querySelectorAll(".form-display");
		if (validity === "error"){
			error[i].classList.add("animate")
			correct[i].classList.remove("animate")
			

		} else {
			correct[i].classList.add("animate")
			error[i].classList.remove("animate")
		}

	}
	function submit (valid){
		if (valid === false){
			return false
			console.log("don't send");
		} else {
			return true
			console.log("send");
		}
	}

	



</script>

</body>
</html>

如何从节点列表中添加类单个项？

0 个答案: