Javascript “onblur”事件，遍历表单的所有字段，而不给用户输入数据的机会
我正在写一份联系表。我脑袋里有两个JavaScript函数，稍后我会移动它们，但这是另一个问题 onblur事件的第一个函数Validate起作用，但不是我希望的那样。用于onsubmit事件的第二个函数formValidate起作用 我在JavaScript函数中有一个switch语句，用于onblur事件 JavaScript代码：Javascript “onblur”事件，遍历表单的所有字段，而不给用户输入数据的机会,javascript,html,forms,function,onblur,Javascript,Html,Forms,Function,Onblur,我正在写一份联系表。我脑袋里有两个JavaScript函数，稍后我会移动它们，但这是另一个问题 onblur事件的第一个函数Validate起作用，但不是我希望的那样。用于onsubmit事件的第二个函数formValidate起作用 我在JavaScript函数中有一个switch语句，用于onblur事件 JavaScript代码： <head> <script type="text/javascript"> function Validate
<head>
<script type="text/javascript">
function Validate()
{
// Create array containing textbox elements
var input = [document.getElementById('fname'), document.getElementById('lname'), document.getElementById('email1'), document.getElementById('email12'), document.getElementById('message')];
// Loop through each element to see if value is empty
for (var i = 0; i<input.length; i++)
{
if (input[i].value == '')
{
switch( input[i].id){
case 'fname':
alert ('enter you first name');
break;
case 'lname' :
alert ('enter your last name');
break;
case 'email1':
alert ('enter your email address');
break;
case 'email2':
alert ('enter your email address');
break;
case 'message':
alert ('write your message');
break;
}
}
}
}
function formValidate()
{
// Create array containing textbox elements
var inputs = [document.getElementById('fname'), document.getElementById('lname'), document.getElementById('email1'), document.getElementById('email2'), document.getElementById('message')];
var error;
// Loop through each element to see if value is empty.
for(var i = 0; i<inputs.length; i++)
{
if(inputs[i].value == '')
{
error = 'Please complete all fields.';
alert(error);
return false;
}
}
}
</script>
</head>
<form onsubmit="return formValidate()" action="mailto:admin@sfasc.com.au" method="post" id="contactForm" >
<fieldset>
<dl>
<dt> First Name:</dt>
<dd>
<input class="input" type="text" name="fname" id="fname" onblur="Validate()" />
</dd>
<dt> Last Name:</dt>
<dd>
<input class="input" type="text" name="lname" id="lname" onblur="Validate()"/>
</dd>
<dt> Email Address:</dt>
<dd>
<input class="input" type="text" name="email1" id="email1" onblur="Validate()"/>
</dd>
<dt> Email Address:</dt>
<dd>
<input class="input" type="text" name="email2" id="email2" onblur="Validate()"/>
</dd>
<dt> Message:</dt>
<dd>
<textarea name="address" id="address" rows="10" cols="10" onblur="Validate()"></textarea>
</dd>
<dd>
<input type="submit" value="submit" name="submit" />
</dd>
</dl>
</fieldset>
</form>
如何解决此问题？恐怕您必须重新考虑整个验证代码。下一步是： 用户输入名字 脚本在输入数组中迭代 第1轮：fname可以吗->是的，下一个i 第二轮：lname是否正常->否，显示警报 第三轮：email1是否正常->否，显示警报 ... 当这个循环被迭代并且用户最终可以输入下一个字段时，将再次执行上面的循环，尽管每个新循环将减少一个警报 简单的修复方法如下所示：
function Validate(id) {
var errors = {
fname: 'enter you first name',
lname: 'enter your last name',
email1: 'enter your email address',
email2: 'enter your email address',
message: 'write your message'
};
if (document.getElementById(id).value === '') {
if (id in errors) {
alert(errors[id]);
}
}
return;
}
然而，我会发现这种恼人的行为。如果您在提交时进行验证，如果有空字段，则取消提交，这样会更舒服。恐怕您必须重新考虑整个验证代码。下一步是： 用户输入名字 脚本在输入数组中迭代 第1轮：fname可以吗->是的，下一个i 第二轮：lname是否正常->否，显示警报 第三轮：email1是否正常->否，显示警报 ... 当这个循环被迭代并且用户最终可以输入下一个字段时，将再次执行上面的循环，尽管每个新循环将减少一个警报 简单的修复方法如下所示：
function Validate(id) {
var errors = {
fname: 'enter you first name',
lname: 'enter your last name',
email1: 'enter your email address',
email2: 'enter your email address',
message: 'write your message'
};
if (document.getElementById(id).value === '') {
if (id in errors) {
alert(errors[id]);
}
}
return;
}
然而，我会发现这种恼人的行为。如果您在提交时进行验证，如果有空字段，则取消提交，这样会更舒服。我想这就是您想要的： 不必在模糊上验证所有输入，只需验证留下焦点的输入即可。为此，我在HTML内联代码中将元素传递给Validatethis。您还存在一些元素ID问题，例如没有消息字段。我还添加了一个.focus调用，以便在输入无效时保持其焦点
function Validate(elem) {
// create array containing textbox elements
var input = [document.getElementById('fname'), document.getElementById('lname'), document.getElementById('email1'), document.getElementById('email2'), document.getElementById('message')];
for (var i = 0; i < input.length; i++)
// loop through each element to see if value is empty
{
if (input[i].value == '' && elem.id == input[i].id) {
switch (input[i].id) {
case 'fname':
alert('enter you first name');
break;
case 'lname':
alert('enter your last name');
break;
case 'email1':
alert('enter your email address');
break;
case 'email2':
alert('enter your email address');
break;
case 'message':
alert('write your message');
break;
}
elem.focus();
}
}
}
我不得不说，虽然很多警报都很糟糕，但如果在每个文本框旁边显示一个带有错误消息的范围，那就更好了。我想这就是你想要的： 不必在模糊上验证所有输入，只需验证留下焦点的输入即可。为此，我在HTML内联代码中将元素传递给Validatethis。您还存在一些元素ID问题，例如没有消息字段。我还添加了一个.focus调用，以便在输入无效时保持其焦点
function Validate(elem) {
// create array containing textbox elements
var input = [document.getElementById('fname'), document.getElementById('lname'), document.getElementById('email1'), document.getElementById('email2'), document.getElementById('message')];
for (var i = 0; i < input.length; i++)
// loop through each element to see if value is empty
{
if (input[i].value == '' && elem.id == input[i].id) {
switch (input[i].id) {
case 'fname':
alert('enter you first name');
break;
case 'lname':
alert('enter your last name');
break;
case 'email1':
alert('enter your email address');
break;
case 'email2':
alert('enter your email address');
break;
case 'message':
alert('write your message');
break;
}
elem.focus();
}
}
}