Question

我在弄清楚如何使用js验证我的文本框时遇到了一些麻烦。我有10个文本框，用户可以填写任何数字1-10，但不能填写0.这是我写的js，但它只返回true，如果所有10个文本框都被填充，而不是只检查是否是填充。

    function submitIt() {
    if (document.isForm.Student_ID.value == null) {
        alert ("You must enter a Colleague ID.");
        return false;
    } else {
        return true;
    }
}

这是表格.....

<form name="isForm" onSubmit="return submitIt()">
    <input name="Student_ID" type="text" id="idField1" />
    <input name="Student_ID" type="text" id="idField2" />
    <input name="Student_ID" type="text" id="idField3" />
    <input name="Student_ID" type="text" id="idField4" />
    <input name="Student_ID" type="text" id="idField5" />
    <input name="Student_ID" type="text" id="idField6" />
    <input name="Student_ID" type="text" id="idField7" />
    <input name="Student_ID" type="text" id="idField8" />
    <input name="Student_ID" type="text" id="idField9" />
    <input name="Student_ID" type="text" id="idField10" />
    <input name="SUBMIT" type="submit" />
</form>

我意识到我可以更改所有名称，并检查每个名称，但我试图避免在我的代码中混乱，并且好奇最好的方法来做到这一点。感谢任何帮助，谢谢！

Answer 1

您可以使用document.getElementsByName获取所有这些文本框的集合。然后循环遍历它们，并确保至少填写一个：

var allTbs = document.getElementsByName("Student_ID");
var valid = false;
for (var i = 0, max = allTbs.length; i < max; i++) {
    if (allTbs[i].value) { 
       valid = true;
       break;
    }
}

DEMO

Answer 2

函数由所有学生文本框迭代，如果填写了某个元素，则返回true。如果输入只包含空格，则受到保护：）

   function submitIt() {
      for( var i = 0, t = document.getElementsByName( "Student_ID" ), l = t.length; i < l; i++ )     
         if( t[i].value && !/^\s+$/.test( t[i].value ) )
            return true;

      return false 
   }

演示：http://jsfiddle.net/hhD2x/

Answer 3

你可以使用jquery。为所有文本框添加公共类名，即

<input name="Student_ID" type="text" id="idField1" class="student" />

现在在js函数中

function submit()
{
        $('.student').each(function() {
           if($(this).val() == '' || $(this).val() == null)
           {
                // your error message
                return false;
           }

       }
}

此功能检查学生班级的所有元素。

Answer 4

$('input[type="text"], select,
   :input[type="date"],
   :input[type="email"],
   :input[type="radio"]').each(function () {

  if ($.trim($(this).val()) == '' ) {
    // your error message here
    isValid = false;
  }

});

多个文本框的Javascript验证

4 个答案: