内联javascript表单验证

Question

我在工作中正在处理表单验证脚本,并且遇到了一些困难.该表单旨在确保用户填写姓名,真实的电子邮件,类别(从他下拉)和问题:

这会命名表单并从表单中收集所有数据:

<script>

  function checkForm(form1) {
name = document.getElementById("FieldData0").value;
category = document.getElementById("FieldData3").value;
question = document.getElementById("FieldData1").value;
email = document.getElementById("FieldData2").value;

这将检查"名称"字段中是否存在某些内容.它工作正常并完全按照它应该验证,显示错误文本:

  if (name == "") {
  hideAllErrors();
document.getElementById("nameError").style.display = "inline";
document.getElementById("FieldData0").select();
document.getElementById("FieldData0").focus();
  return false;

这也可以像它应该的那样工作.它会检查电子邮件字段是否为空,如果为空,则显示错误文本并选择该字段:

  } else if (email == "") {
hideAllErrors();
document.getElementById("emailError").style.display = "inline";
document.getElementById("FieldData2").select();
document.getElementById("FieldData2").focus();
  return false;
  } 

这也可以像它应该的那样工作,确保问题字段不为空:

else if (question == "") {
hideAllErrors();
document.getElementById("questionError").style.display = "inline";
document.getElementById("FieldData1").select();
document.getElementById("FieldData1").focus();
  return false;
  } 

这部分工作 - 如果没有选择下拉列表,它将显示错误消息,但这不会阻止表单提交,它只是在表单提交时显示错误文本:

else if (category == "") {
hideAllErrors();
document.getElementById("categoryError").style.display = "inline";
document.getElementById("FieldData3").select();
document.getElementById("FieldData3").focus();
  return false;
  } 

无论我把它放在哪里,这个都不起作用.我上周在同一个脚本上使用了一个变体,它工作正常.这应该检查输入的电子邮件是否像真正的电子邮件地址:

else if (!check_email(document.getElementById("FieldData1").value)) {
hideAllErrors();
document.getElementById("emailError2").style.display = "inline";
document.getElementById("FieldData2").select();
document.getElementById("FieldData2").focus();
  return false;
  } 

Otherwise it lets the form submit:


  return true;
  }

这会检查电子邮件:

function check_email(e) {
ok = "1234567890qwertyuiop[]asdfghjklzxcvbnm.@-_QWERTYUIOPASDFGHJKLZXCVBNM";

for(i=0; i < e.length ;i++){
if(ok.indexOf(e.charAt(i))<0){ 
return (false);
}   
} 

if (document.images) {
re = /(@.*@)|(\.\.)|(^\.)|(^@)|(@$)|(\.$)|(@\.)/;
re_two = /^.+\@(\[?)[a-zA-Z0-9\-\.]+\.([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
if (!e.match(re) && e.match(re_two)) {
return (-1);        
} 

}

}

此功能隐藏所有错误,因此用户不会受到红色文本的轰炸.我尝试输入"document.getElementById("emailError").style.display ="none""但是这会破坏整个事情:

  function hideAllErrors() {
document.getElementById("nameError").style.display = "none"
document.getElementById("emailError").style.display = "none"
document.getElementById("categoryError").style.display = "none"
document.getElementById("questionError").style.display = "none"

  }


</script>

表单看起来像这样:

<form onSubmit="return checkForm();" method="post" action="http://www.emailmeform.com/fid.php?formid=303341io4u" name="form1">

<p><div class=error id=nameError>Required: Please enter your name<br/></div><p><strong>Name:</strong> <span></span><br><input type="text" name="FieldData0" id="FieldData0" value="" size="22" tabindex="1" />
<label for="name"></label></p>

<p><div class=error id=emailError>Required: Please enter your email address<br/></div>
<div class=error id=nameError2>This doesn't look like a real email address, please check and reenter<br/></div>
<strong><p>Email:</strong> <span>(will not be published)</span><br><input type="text" name="FieldData2" id="FieldData2" value="" size="22" tabindex="2" />
<label for="email"></label>
</p>

<div class=error id=categoryError>Please select a category from the drop-down menu<br></div>
<p><strong>Category:</strong> <span></span><br>
<p><select id="FieldData3" name="FieldData3">
<option value="">Please select a category</option>
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
<option value="d">d</option>
<option value="e">e</option>
<option value="f">f</option>
<option value="other">Other</option>
</select><label for="category"></label>

<p><div class=error id=questionError>Please type your question in the box below:<br></div><label for="question"><strong><p>Your Question:</strong> <span></span></label><br>

<textarea name="FieldData1" id="FieldData1" cols="50" rows="10"></textarea></p>

<p><input type="submit" class="btn" value="Submit Question" name="Submit"></p>
</div>
</form>

问题是我运行检查的顺序吗？我似乎无法弄清楚这一点.任何帮助,将不胜感激.

Answer 1

我冒昧地重写你的javascript,使其更易读,更容易调试.

正如Marc Bernier所提到的,dropdown元素不支持该select函数,因此我在其if周围添加一个语句以防止异常.我也简化了你的checkEmail功能,看起来相当复杂.我重命名它以isAnInvalidEmail使checkForm代码更简单.

您还错误地div在HTML中命名了'emailError2' ,这会在javascript中导致另一个异常.您的HTML相当混乱,在某些情况下,无效.某些属性值和缺少的结束标记缺少引号.您应该考虑使用W3C验证器来确保您的HTML清晰且符合标准.

我已经在jsbin上托管了你的代码:http://jsbin.com/iyeco (可通过http://jsbin.com/iyeco/edit编辑)

这是清理过的Javascript:

function checkForm() {
  hideAllErrors();
  var formIsValid =
    showErrorAndFocusIf('FieldData0', isEmpty, 'nameError')
    && showErrorAndFocusIf('FieldData2', isEmpty, 'emailError')
    && showErrorAndFocusIf('FieldData2', isAnInvalidEmail, 'emailError2')
    && showErrorAndFocusIf('FieldData3', isEmpty, 'categoryError')
    && showErrorAndFocusIf('FieldData1', isEmpty, 'questionError');

  /* For debugging, lets prevent the form from submitting. */
  if (formIsValid) {
    alert("Valid form!");
    return false;
  }

  return formIsValid;
}

function showErrorAndFocusIf(fieldId, predicate, errorId) {
  var field = document.getElementById(fieldId);
  if (predicate(field)) {
    document.getElementById(errorId).style.display = 'inline';
    if (field.select) {
      field.select();
    }
    field.focus();
    return false;
  }

  return true;
}

function isEmpty(field) {
  return field.value == '';
}

function isAnInvalidEmail(field) {
  var email = field.value;

  var ok = "1234567890qwertyuiop[]asdfghjklzxcvbnm.@-_QWERTYUIOPASDFGHJKLZXCVBNM";

  for(i = 0; i < email.length; i++){
    if(ok.indexOf(email.charAt(i)) < 0) {
      return true;
    }
  }

  re = /(@.*@)|(\.\.)|(^\.)|(^@)|(@$)|(\.$)|(@\.)/;
  re_two = /^.+\@(\[?)[a-zA-Z0-9\-\.]+\.([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
  return re.test(email) || !re_two.test(email);
}



function hideAllErrors() {
  document.getElementById("nameError").style.display = "none"
  document.getElementById("emailError").style.display = "none"
  document.getElementById("emailError2").style.display = "none"
  document.getElementById("categoryError").style.display = "none"
  document.getElementById("questionError").style.display = "none"
}

并清理HTML:

<form onSubmit="return checkForm();" method="post" action="http://www.emailmeform.com/fid.php?formid=303341io4u" name="form1"> 
  <div> 
    <div class="error" id="nameError"> 
      Required: Please enter your name 
    </div> 
    <label for="FieldData0"><strong>Name:</strong></label> 
    <input type="text" name="FieldData0" id="FieldData0" value="" size="22" tabindex="1" /> 
  </div> 

  <div> 
    <div class="error" id="emailError"> 
      Required: Please enter your email address 
    </div> 
    <div class="error" id="emailError2"> 
      This doesn't look like a real email address, please check and reenter 
    </div> 
    <label for="FieldData2"><strong>Email:</strong>(will not be published)</label> 
    <input type="text" name="FieldData2" id="FieldData2" value="" size="22" tabindex="2" /> 
  </div> 

  <div> 
    <div class="error" id="categoryError"> 
      Please select a category from the drop-down menu 
    </div> 
    <label for="FieldData3"><strong>Category:</strong></label> 
    <select id="FieldData3" name="FieldData3"> 
      <option value="">Please select a category</option> 
      <option value="a">a</option> 
      <option value="b">b</option> 
      <option value="c">c</option> 
      <option value="d">d</option> 
      <option value="e">e</option> 
      <option value="f">f</option> 
      <option value="other">Other</option> 
    </select> 
  </div> 

  <div> 
    <div class="error" id="questionError"> 
      Please type your question in the box below: 
    </div> 
    <label for="FieldData1"><strong>Your Question:</strong></label> 
    <textarea name="FieldData1" id="FieldData1" cols="50" rows="10"></textarea> 
  </div> 

  <input type="submit" class="btn" value="Submit Question" name="Submit"> 
</form>