Javascript验证 - 如何检查输入表单的数字是否在某个范围之间?

时间:2014-11-03 12:41:35

标签: javascript html validation

我有这部分HTML代码:

<tr>
    <td id="examnumber">Examination number</td>
</tr>
<tr>
    <td><input type="text" name="examnumber"/></td>
</tr>

我需要输入的数字长度为4位,范围在0000-9999之间。我试图通过使用此javascript代码验证它:

function validateForm() {
         var result = true;
         var msg="";


         if (document.ExamEntry.examnumber.value=="") {
           msg+="You must enter your examination number. \n";
           document.ExamEntry.examnumber.focus();
           document.getElementById('examnumber').style.color="red";
         } else if ((document.ExamEntry.examnumber.value.length < 0) ||       (document.ExamEntry.examnumber.value.length > 9999)) {
           msg+= "The examination number is not within the range 0000-9999.\n";
           result = false
         }

        if (document.ExamEntry.examnumber.value.length!=4) {
          msg+="Your examination number must be 4 digits long. \n";
          document.ExamEntry.examnumber.focus();
          document.getElementById('examnumber').style.color="red";
          result = false;
        }

但是,当我通过输入-900或3.45来测试代码时,它没有出现错误消息并且表示已正确输入信息。如果有人能帮助我解决这个错误,我将非常感激。

2 个答案:

答案 0 :(得分:4)

这里的主要问题是该字段名为examnumber,您试图通过表单名称(推测ExamEntry)来获取它。以这种方式获取对该字段的引用(document.Form_Name.Field_Name)已过时,并且只能在Internet Explorer上真正起作用。

更通用的方法是使用document.getElementById

您正在使用此行:

document.getElementById('examnumber').style.color="red";

但是examnumber是字段名称,而不是Id。您还应该在字段中添加一个ID:

<td><input type="text" name="examnumber" id="examnumberfield"/></td>

这将使您能够在整个过程中使用:

var examnumberlabel = document.getElementById("examnumber");
var examnumberfield = document.getElementById("examnumberfield");
if (examnumberfield.value=="") {
       msg+="You must enter your examination number. \n";
       examnumberfield.focus();
       examnumberlabel .style.color="red";
//.. etc

(我建议对值进行简单的正则表达式测试可以验证值的长度和数字状态 - 不需要单独的测试。)

答案 1 :(得分:2)

/^\d{4}$/.test(document.ExamEntry.examnumber.value)

如果正则表达式包含4位数字(0-9),则此正则表达式将返回true。