使用 JQuery 验证表单（没有专用库）

Question

我有一个 HTML 表单，其中包含一个表格，其中包含一个带有复选框和一个输入文本字段的两列（除其他外）。用户首先选中复选框，然后修改输入文本字段中的值。在提交此表单之前，我想验证用户输入。

我实现了这个验证功能：

<script type="text/javascript" charset="utf-8">
var error = false;
$('#form-id').submit(function (event) {
var pattern = /^[0-9]+$/;
alert(pattern); // 1st
var error = false;
$('#form-id input[type=checkbox]').each(function () {
        var sThisVal = (this.checked ? $(this).val() : "");
        if(sThisVal === 'on') {
         var field = $(this).closest('td').siblings()
                                .find("input[type=text]")[0];

         var value = field.value;
         alert(value); // 2nd
         var ok = pattern.test(value);
         alert(ok); // 3rd
         if( ! ok) {
            error = true;
            field.addClass('red-border');   
         } // if on ok
        } // if checked
      }); // foreach checkbox
    return ! error;
    });     

在第三次警报之前一切正常。然后它在addClass 上失败并显示以下消息：

TypeError: 'undefined' is not a function 
               (evaluating 'field.addClass('red-border')')

所以字段是undefined，但是当我读取它的值时没问题。

我根本不是 Javascript 或 JQuery 方面的专家，但在阅读了文档后我不明白为什么会发生这种情况。

Answer 1

更改这些行

var field = $(this).closest('td')
                   .siblings()
                   .find("input[type=text]");//jQuery object
var value = field[0].value; // field[0] is a native HTML element

错误是您尝试将addClass，jQuery 方法，转换为原生 HTML 元素

请看这个小提琴的解释：http://jsfiddle.net/codovations/tH5xc/

Answer 2

if( ! ok) { 应该是 if( !ok) { 没有空格！

还有，

return ! error; 应该是return error = !error;

Answer 3

不是jquery对象试试：

if(!ok) {
       error = true;
       field[0].addClass('red-border');    
    }

代替：

if( ! ok) {
       error = true;
       field.addClass('red-border');    
    }