我创建了一个注册表单。我需要一些帮助，因为我是Web开发的新手。问题是，当我按下提交按钮。 javascript警报运行。即使所有字段都没有填充。我希望javascript警报（函数Data（））在所有必填字段都填满之前不会运行。
JavaScript代码
<script>
function Data() {
alert("User ID: " + textfield1.value + '\n' + "Password: " + textfield2.value + '\n' + "Conform Password: " + textfield3.value + '\n' + "First Name: " + textfield4.value + '\n' + "Last Name: " + textfield5.value + '\n' + "Email: " + textfield6.value + '\n' + "Company: " + textfield7.value + '\n' + "Phone: " + textfield8.value + '\n' + "Fax: " + textfield9.value + '\n' + "Address Line 1: " + textfield10.value + '\n' + "Address Line 2: " + textfield11.value + '\n' + "City: " + textfield12.value + '\n' + "State/Province: " + textfield13.value + '\n' + "Country: " + textfield14.value + '\n' + "Zip/Postal Code: " + textfield15.value + '\n');
{
if (input.value != document.getElementById('password').value) {
alert('Password Must be Matching.');
} else {
// input is valid -- reset the error message
input.setCustomValidity('');
}
}
}
function inputnumber(evt) {
var limit = (evt.which) ? evt.which : event.keyCode
if (limit > 31 && (limit < 48 || limit > 57)) {
alert("Enter numerals only in this field.");
return false;
}
return true;
}
function checkPass() {
var inputpassword = document.getElementById("textfield2");
var conformpassword = document.getElementById("textfield3");
var message = document.getElementById("confirmMessage");
var goodpassword = "#66cc66";
var badpassword = "#ff6666";
if (inputpassword.value == conformpassword.value) {
conformpassword.style.borderColor = goodpassword;
message.style.color = goodpassword;
message.innerHTML = "Password Match!"
}
else {
conformpassword.style.borderColor = badpassword;
message.style.color = badpassword;
message.innerHTML = "Password Do Not Match!"
}
}
</script>
<body>
<form autocomplete="on">
<h1 style="text-align: center">
Signup Form</h1>
<table align="center">
<tr>
<td>
User ID
</td>
<td>
<input type="text" id="textfield1" style="border-radius: 7px; border: 2px solid #dadada;"
autofocus required />
</td>
</tr>
<tr>
<td>
Password<sup>*</sup>
</td>
<td width="50%">
<input type="password" maxlength="10" id="textfield2" style="border-radius: 7px;
border: 2px solid #dadada;" required />
</td>
</tr>
<tr>
<td>
Conform Password
</td>
<td>
<input type="password" maxlength="10" id="textfield3" onkeyup="checkPass()" style="border-radius: 7px;
border: 2px solid #dadada;" required /><span id="confirmMessage"></span>
</td>
</tr>
<tr>
<td>
First Name
</td>
<td>
<input type="text" id="textfield4" style="border-radius: 7px; border: 2px solid #dadada;"
required />
</td>
</tr>
<tr>
<td>
Last Name
</td>
<td>
<input type="text" id="textfield5" style="border-radius: 7px; border: 2px solid #dadada;"
required />
</td>
</tr>
<tr>
<td>
Email
</td>
<td>
<input type="email" id="textfield6" style="border-radius: 7px; border: 2px solid #dadada;"
required />
</td>
</tr>
<tr>
<td>
Company
</td>
<td>
<input type="text" id="textfield7" style="border-radius: 7px; border: 2px solid #dadada;" />
</td>
</tr>
<tr>
<td>
Phone
</td>
<td>
<input type="text" id="textfield8" onkeypress="return inputnumber(event)" style="border-radius: 7px;
border: 2px solid #dadada;" required />
</td>
</tr>
<tr>
<td>
Fax
</td>
<td>
<input type="text" id="textfield9" onkeypress="return inputnumber(event)" style="border-radius: 7px;
border: 2px solid #dadada;" />
</td>
</tr>
<tr>
<td>
Address Line 1
</td>
<td>
<input type="text" id="textfield10" style="border-radius: 7px; border: 2px solid #dadada;"
required />
</td>
</tr>
<tr>
<td>
Address Line 2
</td>
<td>
<input type="text" id="textfield11" style="border-radius: 7px; border: 2px solid #dadada;" />
</td>
</tr>
<tr>
<td>
City
</td>
<td>
<input type="text" id="textfield12" style="border-radius: 7px; border: 2px solid #dadada;"
required />
</td>
</tr>
<tr>
<td>
State/Province
</td>
<td>
<input type="text" id="textfield13" style="border-radius: 7px; border: 2px solid #dadada;"
required />
</td>
</tr>
<tr>
<td>
Country
</td>
<td>
<input type="text" id="textfield14" style="border-radius: 7px; border: 2px solid #dadada;"
required />
</td>
</tr>
<tr>
<td>
Zip/Postal Code
</td>
<td>
<input type="text" id="textfield15" onkeypress="return inputnumber(event)" style="border-radius: 7px;
border: 2px solid #dadada;" required />
</td>
</tr>
<tr>
<td>
<div align="center">
<input type="submit" value="Submit!" onclick="Data()" style="border-radius: 7px;
border: 2px solid #dadada;" /></div>
</td>
<td>
<div align="center">
<input type="reset" value="Reset" style="border-radius: 7px; border: 2px solid #dadada;" /></div>
</td>
</tr>
</table>
</form>
答案 0 :(得分：0)
试试：
<form autocomplete="on" onsubmit="Data()">
然后从提交按钮中删除它：
<input type="submit" value="Submit!" style="border-radius: 7px;border: 2px solid #dadada;" />
说明：
当您在按钮上使用click时，它将始终触发，因为它是单击的。
如果您在表单上使用submit，那么只有在提交表单时才会触发它，这意味着它是正确的并且填写了所有必填字段
<强>更新
如果您想要运行一些额外的自定义验证（如密码确认），并且发现表单无效并想要停止提交过程，请使用此提示：
function Data(e) { //"e" - is an event object, that is being populated on form's submit
if (input.value != document.getElementById('password').value) {
alert('Password Must be Matching.');
e.stopPropagation(); //These two rows KILL the event, so it will not be submited
e.preventDefault();
}
}
答案 1 :(得分：0)
您应该检查以确保每个文本框中都包含一系列if else语句。
实施例
if(!document.getElementById("yourtextbox").value.match(/\S/))
{
window.alert("You must enter a value for yourtextbox");
}
else
{
if(!document.getElementById("anothertextbox").value.match(/\S/))
{
window.alert("You must enter a value for anothertextbox");
}
else
{
alert("User ID: " + textfield1.value + '\n' + "Password: " + textfield2.value + '\n' + "Conform Password: " + textfield3.value + '\n' + "First Name: " + textfield4.value + '\n' + "Last Name: " + textfield5.value + '\n' + "Email: " + textfield6.value + '\n' + "Company: " + textfield7.value + '\n' + "Phone: " + textfield8.value + '\n' + "Fax: " + textfield9.value + '\n' + "Address Line 1: " + textfield10.value + '\n' + "Address Line 2: " + textfield11.value + '\n' + "City: " + textfield12.value + '\n' + "State/Province: " + textfield13.value + '\n' + "Country: " + textfield14.value + '\n' + "Zip/Postal Code: " + textfield15.value + '\n');
{
if (input.value != document.getElementById('password').value) {
alert('Password Must be Matching.');
} else {
// input is valid -- reset the error message
input.setCustomValidity('');
}
}
}
}
在调用警报之前，只需验证您的文本字段是否为空。将提交按钮类型从“提交”更改为“按钮”。