内联 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 提到的，下拉元素不支持 select 函数，因此我在其周围放置了 if 语句以防止异常。我还简化了您的 checkEmail 函数，它看起来相当复杂。我将它重命名为isAnInvalidEmail，以使checkForm 代码更简单。

您还在 HTML 中错误地命名了“emailError2”div，这会导致 javascript 中出现另一个异常。您的 HTML 相当混乱，并且在某些情况下是无效的。某些属性值缺少引号并缺少结束标记。您应该考虑使用W3C validator 来确保您的 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> 

Answer 2

关于下拉的错误，不要调用此行：

document.getElementById("FieldData1").select();

我似乎记得几周前遇到过完全相同的问题。

Answer 3

第一个问题：将 if 语句的内容移动到一个函数中......然后从那里开始。你有大约 5 段代码在做基本相同的事情。

下一步：因为您一次只允许一条错误消息，所以创建一个通用 div 来保存它并移动它。这样，您就无需跟踪隐藏某些错误、显示其他错误等。

下一步：仅从您的 check_email 函数返回 true 或 false...返回 -1 和 false 等是不好的形式，即使 javascript 对此类事情很宽容。

清理完代码后，调试起来会容易得多。

Answer 4

我建议摆脱整个 if else 链并单独检查每个 this。

var error = 0;
if (value == '') {
    error = 1;
    // other stuff;
}

if (value2 == '') {
    error = 1;
    // do stuff;
} 

...

if (error) {
    // show error
} else {
    // submit form
}

Answer 5

尝试将== 替换为不强制类型转换的===。它可能会帮助您解决下拉问题。

您的函数返回 false，它也可能返回 -1。

由于我不知道 JavaScript 对 !-1 执行什么类型转换，你也应该这样做：

check_email(...)!==false;

而不是这个：

!check_email(...)