内联javascript表单验证

时间：2009-05-08 18:17:24

标签： javascript validation forms

我正在处理表单验证脚本，但是遇到了一些困难。该表单旨在确保用户填写姓名，真实的电子邮件，类别（从他下拉）和问题：

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

<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>

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

5 个答案:

答案 0 :(得分：5)

我冒昧地重新编写你的javascript，使其更易读，更容易调试。

正如Marc Bernier所提到的，dropdown元素不支持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>

答案 1 :(得分：1)

关于下拉列表中的错误，请不要调用此行：

的document.getElementById（ “FieldData1”）选择（）;

我似乎记得几个星期前有同样的问题。

答案 2 :(得分：0)

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

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

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

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

答案 3 :(得分：0)

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

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

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

...

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

答案 4 :(得分：0)

尝试替换== ===，而!-1不会输入。它可能会帮助您解决下拉问题。

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

由于我不知道JavaScript对check_email(...)!==false; 执行什么类型的转换，您还应该这样做：

!check_email(...)

而不是：

{{1}}
相关问题
最新问题