为什么 clear() 函数在发生 onChange 事件时没有被调用
Why does the clear() function not get called when the onChange event occurs?
我正在完成一个关于Javascript表单验证的练习。在我的代码中,我有一个包含三列的表:表单名称、表单、验证消息。当表单验证期间发生错误时,消息将显示在第三列中。当表单元素更改时 - 错误消息应该消失,但它不会。似乎根本没有调用 clear() 函数。有人可以帮我吗 - 谢谢!
<html>
<head>
<title>Validation</title>
<script type="text/javascript">
function clear()
{
for(var i in document.getElementsByName("error"))
{
document.getElementsByName("error")[i].innerHTML = "";
}
}
function validate()
{
if(document.Form.Name.value.length < 1)
{
document.getElementsByName("error")[0].innerHTML = "Please enter your full name."
return false;
}
if(document.Form.Address.value.length<3)
{
document.getElementsByName("error")[1].innerHTML = "Please enter full address."
return false;
}
if(document.Form.Phone.value.length <6)
{
document.getElementsByName("error")[2].innerHTML = "Please enter a phone number."
return false;
}
if(document.Form.Email.value.length <5 || "@".search(document.Form.Email.value)==-1)
{
document.getElementsByName("error")[3].innerHTML = "Please enter a valid e-mail address";
return false;
}
}
</script>
</head>
<body>
<h1>Validation</h1>
<p>Enter the following information. When you press the Submit button, the data you entered will be validated.</p>
<form name="Form" onSubmit="return validate()">
<table>
<tr>
<td>Name</td>
<td><input type="text" name="Name" size="20" onchange="clear()" class="Form"></td>
<td><div name="error"></div></td>
</tr>
<tr>
<td>Address</td>
<td><textarea rows="5" columns="20" class="Form" onchange="clear()" name="Address"></textarea></td>
<td><div name="error"></div></td>
</tr>
<tr>
<td>Phone</td>
<td><input type="text" name="Phone" onchange="clear()" size="11" class="Form"></td>
<td><div name="error"></div></td>
</tr>
<tr>
<td>E-mail</td>
<td><input type="text" name="Email" onchange="clear()" size="20" class="Form"></td>
<td><div name="error"></div></td>
</tr>
</table>
<input type="submit" value="Submit" >
<input type="button" value="Clear" onClick="clear();">
</form>
</body>
</html>
试试这个
<html>
<head>
<title>Validation</title>
</head>
<body>
<h1>Validation</h1>
<p>Enter the following information. When you press the Submit button, the data you entered will be validated.</p>
<form name="Form" onSubmit="return validate()">
<table>
<tr>
<td>Name</td>
<td><input type="text" name="Name" size="20" onkeypress="return clearErrors();" class="Form"></td>
<td><div name="error"></div></td>
</tr>
<tr>
<td>Address</td>
<td><textarea rows="5" columns="20" class="Form" onkeypress="return clearErrors();" name="Address"></textarea></td>
<td><div name="error"></div></td>
</tr>
<tr>
<td>Phone</td>
<td><input type="text" name="Phone" onkeypress="return clearErrors();" size="11" class="Form"></td>
<td><div name="error"></div></td>
</tr>
<tr>
<td>E-mail</td>
<td><input type="text" name="Email" onkeypress="return clearErrors();" size="20" class="Form"></td>
<td><div name="error"></div></td>
</tr>
</table>
<input type="submit" value="Submit" >
<input type="button" value="Clear" onClick="return clearErrors();">
</form>
<script type="text/javascript">
function clearErrors()
{
var arr = new Array();
arr = document.getElementsByName('error');
for (var i = 0; i < arr.length; i++) {
document.getElementsByName('error')[i].innerHTML = "";
}
return true;
}
function validate()
{
if(document.Form.Name.value.length < 1)
{
document.getElementsByName("error")[0].innerHTML = "Please enter your full name."
return false;
}
if(document.Form.Address.value.length<3)
{
document.getElementsByName("error")[1].innerHTML = "Please enter full address."
return false;
}
if(document.Form.Phone.value.length <6)
{
document.getElementsByName("error")[2].innerHTML = "Please enter a phone number."
return false;
}
if(document.Form.Email.value.length <5 || "@".search(document.Form.Email.value)==-1)
{
document.getElementsByName("error")[3].innerHTML = "Please enter a valid e-mail address";
return false;
}
}
</script>
</body>
</html>
相关文章:
- d3-js快速事件调用问题
- 使用按钮OnClick事件调用Javascript函数
- 了解在JavaScript中(在IE中)对某个事件调用了什么函数
- 如何使用onclick事件调用AngularJS控制器
- 无法从onclick事件调用JS函数
- 当多个 JS 事件调用同一个函数时,如何处理它们
- 为什么我从 JSLint 获得从事件调用的函数的“超出范围”
- 你能用onblur事件调用一个外部Javascript吗
- jquery mobile,从事件调用转换
- 如何使用C#为特定按钮事件调用JavaScript方法
- 如何在函数内部定义一个变量以供事件调用
- 如何从onClick事件调用对象函数
- 使用promise.then时,是否可以保留在单击事件调用堆栈中
- 如何断言间谍是使用jasmine通过点击事件调用的
- 使用AngularJS对超快速keyup和keydown事件调用函数
- 为同一标记中的两个不同事件调用两个javascript方法
- 事件调用方似乎无法正常工作
- 事件调用和范围问题
- 如何在 ng-repeat 中将变量值附加到事件调用
- j查询点击事件;调用特定函数(如果可用)