内嵌的JavaScript表单验证 [英] inline javascript form validation

查看：128
本文介绍了内嵌的JavaScript表单验证的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

这个名字表单并从表单收集所有数据： 

 < script> 
 
函数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（）; 
返回false;

这也适用。它会检查电子邮件字段是否为空，如果电子邮件字段为空，则显示错误文本并选择该字段： 

 }其他if（email ==）{
 hideAllErrors（）; 
 document.getElementById（emailError）。style.display =inline; 
 document.getElementById（FieldData2）。select（）; 
 document.getElementById（FieldData2）。focus（）; 
返回false; 
}

这同样适用，确保问题字段不是' t空： 

  else if（question ==）{
 hideAllErrors（）; 
 document.getElementById（questionError）。style.display =inline; 
 document.getElementById（FieldData1）。select（）; 
 document.getElementById（FieldData1）。focus（）; 
返回false; 
}

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

  else if（category ==）{
 hideAllErrors（）; 
 document.getElementById（categoryError）。style.display =inline; 
 document.getElementById（FieldData3）。select（）; 
 document.getElementById（FieldData3）。focus（）; 
返回false; 
}

无论我放在哪里，这个都不起作用。上周我在同一个脚本上使用了一个变体，它运行良好。这是应该检查，看看输入的电子邮件看起来像一个真正的电子邮件地址：

 否则if（！check_email（document。 getElementById（FieldData1）。value））{
 hideAllErrors（）; 
 document.getElementById（emailError2）。style.display =inline; 
 document.getElementById（FieldData2）。select（）; 
 document.getElementById（FieldData2）。focus（）; 
返回false; 
} 
 
否则它让表单提交：
 
 
 return true; 
}

这会检查电子邮件： 

 函数check_email（e）{
 ok =1234567890qwertyuiop [] asdfghjklzxcvbnm。@ -_ QWERTYUIOPASDFGHJKLZXCVBNM; （i.o）（e.charAt（i））<0）{
返回（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 =postaction =http://www.emailmeform.com/fid.php?formid=303341io4uname =form1> 
 
 
< div class = error id = nameError>必需：请输入您的名称< /强> < span>< / span>< br>< input type =textname =FieldData0id =FieldData0value =size =22tabindex =1/> 
< label for =name>< / label>< / p> 
 
< p>< div class = error id = emailError>必需：请输入您的电子邮件地址< br />< / div> 
< div class = error id = nameError2>这看起来不像真正的电子邮件地址，请检查并重新输入< br />< / div> 
< strong>< p>电子邮件：< / strong> < span>（不会发布）< / span>< br>< input type =textname =FieldData2id =FieldData2value =size =22tabindex =2 /> 
< label for =email>< / label> 
< / p> 
 
< div class = error id = categoryError>请从下拉菜单中选择一个类别< br>< / div> 
< p>< strong>类别：< / strong> <跨度>< /跨度><峰; br> 
< p>< select id =FieldData3name =FieldData3> 
< option value =>请选择一个类别< / 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>其他< / option> 
< / select>< label for =category>< / label> 
 
< p>< div class = error id = questionError>请在下方输入您的问题：< br>< / div>< label for =question> < strong>< p>您的问题：< / strong> <跨度>< /跨度>< /标签><峰; br>