Question

我有一个表单，我试图用JS验证。问题在于我的生活，我无法让它发挥作用。

有谁能告诉我哪里出错了？在下面的示例中，我只是想验证电子邮件字段。

此致马克

function validateEmail() {
    var x = document.forms["myForm"]["Email"].value;
	if (x == null || x == "") {
        alert("Name must be filled out");
        return false;
    }
}

#contact-area {

	width: 500px;
	max-height:200px;
	margin-top: 0px;
	float:left;
}

#contact-area input, #contact-area textarea {

	padding: 3px;
	width: 520px;
	font-family:'Lato', sans-serif;
	font-size: 14px;
	margin: 0px 0px 0px 0px;
	border: 1px solid #ccc;
}

#contact-area textarea {

	height: 90px;
}

#contact-area textarea:focus, #contact-area input:focus {

	border: 1px solid #ffc423;
}

#contact-area input.submit-button {

	width: 100px;
	float: left;
	background-color:#ffc423;
	color:black;
	margin-top:13px;
	cursor:pointer;
}

#contact-area input.submit-button:hover {
	background-color:#002b51;
	color:white;
}

label {

	float:left;
	text-align:left;
	margin-right:15px;
	width:100px;
	padding-top:10px;
	padding-bottom:5px;
	font-size:15px;
	color:#ffc423;
	font-weight:700;
}

textarea { 
    resize: none; 
}

<div id="contact-area">
			
						<form method="post" action="contactengine.php" name="myForm" onsubmit="return contact-validation()">
						<label for="Name">Name:</label>
						<input type="text" name="Name" id="Name">
				
						<label for="Company">Company:</label>
						<input type="text" name="Company" id="Company">
	
						<label for="Email">Email:</label>
						<input type="email" name="Email" id="Email">
				
						<label for="Message">Message:</label>
						<textarea name="Message" rows="20" cols="20" id="Message" title="Your message | max 300 characters"></textarea>

						<input type="submit" name="submit" value="Submit" class="submit-button">
						</form>
			
					<div style="clear: both;"></div>
			
					</div>

Answer 1

这是错误的：

onsubmit="return contact-validation()">

您没有名为contact-validation()的JavaScript方法。
即使您这样做，破折号在函数名称中也无效。

请改为尝试：

onsubmit="return validateEmail()">

Answer 2

更改

x = document.forms["myForm"]["Email"].value;

到

x = document.getElementById("Email").value;

它直接通过其id定位元素，因此如果DOM结构发生更改，您的JavaScript仍然有效。此外，验证是检查电子邮件输入，但错误消息是名称。您可能还希望将HTML5验证与必需属性一起使用。

您还应该避免使用onsubmit属性，因为它紧密地结合了HTML和JavaScript。这可以通过以下方式实现：

<!-- use a button instead of an input for buttons, it is more semantically correct -->
<button id="btn-submit">Submit</button>

<script>
document.getElementById("btn-submit").addEventListener("click", function(evt){
    evt.preventDefault();
    if (validateEmail()) {
        document.getElementById("myForm").submit();
    } 
});
</script>

如果使用此方法，请从表单标记中删除onsubmit =。

表单上的JS验证

2 个答案: