提交按钮清除表单，并且不显示任何内容

我正在尝试创建一个有趣的小登记表来练习我的验证。当我点击提交按钮时，我有两个问题。第一个问题是，当我点击提交时，我的表单会不断清除每个输入字段。我试图使用havemyonclick=return false，但这没有起到任何作用。我遇到的下一个问题是，当我点击提交时，什么都没发生。我不确定我在哪里搞砸了，但如果有人能向我指出的话。

<!-- create a function to validate and pass information along -->
function Validation() {

<!-- declare variables -->
var ifErrors = false;

<!-- create the array to display error messages when cycled through -->
var ErrorMessage = new Array();

var myUserName = document.getElementById("txtUsername").value;
var myPassword = document.getElementById("txtPassword").value;
var myFirstName = document.getElementById("txtFirstName").value;
var myLastName = document.getElementById("txtLastName").value;
var myDateOfBirth = document.getElementById("txtDateOfBirth").value;
var myEmail = document.getElementById("txtEmail").value;
var myPhoneNumber = document.getElementById("txtPhoneNumber").value;
var LettersOnly = /^[a-z]+$/;
var DateOfBirthValidate = /^(0[1-9]|1[0-2])/(0[1-9]|1d|2d|3[01])/(19|20)d{2}$/;
var Dates = new Date();
var DateSupplied = document.getElementById("txtDateOfBirth").value;
var PhoneNumberValidate = /^([0-9]{3}))?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;


<!-- Begin validation -->

//validate for username being blank
if (myUserName = "")
{
ifErrors = true;
ErrorMessage.push('Username is required');
}

//validate for username not being 8 or more characters
if(myUserName.length < 8)
{
ifErrors = true;
ErrorMessage.push('Username must be 8 or more characters');
}

//validate for password being blank 
if (myPassword == "")
{
ifErrors = true;
ErrorMessage.push('Password is required');
}

//validate for password not being 8 or more characters
if (myPassword.length < 8)
{
ifErrors = true;
ErrorMessage.push('Password must be 8 or more characters');
}

//validate for first name being blank
if (myFirstName == "")
{
ifErrors = true;
ErrorMessage.push('First name can not be blank');
}

//validate for last name being blank
if (myLastName == "")
{
ifErrors = true;
ErrorMessage.push('Last name can not be blank');
}   

//validate for date of birth being blank
if (myDateOfBirth == "")
{
ifErrors = true;
ErrorMessage.push('Last name can not be blank');
}   

//validate for date of birth not being formatted like (MM/DD/YYYY)
if (document.getElementById("txtDateOfBirth").value.length > 1)
{
if (! (txtDateOfBirth,valueOf().match(DateOfBirthValidate)));
{
ifErrors = true;
ErrorMessage.push('not a valid date of birth');
}
}

//create a variable to hold date, and see if it's greater than the current date
DateSupplied = new Date(DateSupplied);
if (DateSupplied > Dates)  
{
ifErrors = true;
ErrorMessage.push('Date supplied can not be greater than the current date');
}


//va;idate for phone number
if (document.getElementById("txtPhoneNumber").value.length > 1)
{
if (! (txtPhoneNumber.valueOf().match(PhoneNumberValidate)))
{
ifErrors = true;
ErrorMessage.push('Phone number is not valid');
}
}

//successful validation
if (ifErrors == false)
{
ifErrors = true;
alert('Your registration has been processed');
//document.getElementById("RegisterForm").reset();
}

//Display list of messages in list 
var DisplayMessage = "";
ErrorMessage.forEach(function (message) 
{
DisplayMessage += "<li>" + message + "</li>";
}
);

document.getElementById("Errors").innerHTML = DisplayMessage;

}

<body>

<h3>Registration</h3>
<div>
<ul id="Errors"> </ul>

</div>

<br/>

<form ="RegisterForm">
<label id="lblUsername">Username:</label>

<input type="text" id="txtUsername" />
<br/>

<label id="lblPassword">Password:</label>

<input type="password" id="txtPassword" />
<br/>

<label id="lblFirstName">First Name:</label>

<input type="text" id="txtFirstName" />
<br/>

<label id="lblLastName">Last Name:</label>

<input type="text" id="txtLastName" />
<br/>

<label id="lblDateOfBirth">Date of Birth:</label>

<input type="text" id="txtDateOfBirth" />
<br/>

<label id="lblEmail">Email:</label>

<input type="text" id="txtEmail" />
<br/>

<label id="lblPhoneNumber">Email:</label>

<input type="text" id="txtPhoneNumber" />    
<br/>

<input type="submit" value="Submit" onclick="Validation(); return false;" />
<input type="reset" value="reset Form" />

</form>
</body>

return false;不会阻止表单的提交。

为了实现此行为，必须在<input>的click事件或<form>的submit事件上调用.preventDefault()。示例：

<form>
<input type="submit" onclick="someFn(event)">
</form>
<script>
function someFn(e) {
e.preventDefault();
console.log('form not submitted...');
}
</script>

为了防止一次完成所有提交事件(无论是哪个表单元素发起的(，您可以对表单的onsubmit处理程序参数(即submit事件(调用.preventDefault()：

<form onsubmit="someFn(event)">
<input type="submit">
<button>Submit</button>
</form>
<script>
function someFn(e) {
e.preventDefault();
console.log('form not submitted...');
}
</script>

附带说明一下，提交输入不会清除您的表单。它会发送表单。
因为您尚未在<form>元素上指定action属性，所以提交会发送到当前URL
在实践中，它会重新加载页面
在实践中，它呈现了一个全新的形式实例，显然是空的。

这也是为什么"什么都没发生">。提交表单时的默认浏览器行为是实际加载<form>的actionURL(无论是否明确指定(。您正在导航到该URL以及表单的值。这意味着您不允许浏览器在Validation();中完成代码的运行。要等待并查看Validation函数的结果，必须防止默认的表单提交行为。

文档：

<form>:MDN，HTML(生活标准(
<input type="submit">:MDN，HTML(生活标准(
Event.preventDefault():MDN，DOM(生活标准(

相关内容

最新更新

热门标签：