Javascript 使用JQuery验证表单（无专用库）

我有一个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;
    });     

所以字段是

未定义的

，但当我读取它的值时它是正常的

我不是Javascript或JQuery方面的专家，但在阅读文档后，我无法理解为什么会发生这种情况。

如果（！ok）{

应该是

如果（！ok）{

没有空格

而且

return！error；

应该是

return error=！error；

如果（！ok）{

应该是

如果（！ok）{

没有空格

而且

return！error；

应该是

return error=！error；

更改这些行

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

错误是您试图将jQuery方法

addClass

添加到本机HTML元素

请参阅此小提琴以了解解释：

更改这些行

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

错误是您试图将jQuery方法

addClass

添加到本机HTML元素

---

请参阅此提琴以了解解释：

它不是jquery对象，请尝试：

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

而不是：

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

---

它不是jquery对象，请尝试：

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

而不是：

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

---

警报（值）；它返回什么？它显示正确的值，即我希望读取的值。这就是为什么我说它工作正常。警报（值）；它返回什么？它显示了正确的值，即我希望读取的值。这就是为什么我说它工作正常。两张赞成票？请记下答案。它是错误的。我认为C-link考虑了我的问题太基本了，决定放弃我的观点。两张赞成票？请记下答案。它是错误的。我认为C-link考虑了我的问题太简单了，决定退出。非常感谢。在看了你的解决方案和评论后，我觉得自己很愚蠢（也许我应该让这种感觉成为我的，每一分钟都保持它，但我不愿意）。事实上，我认为这就是原因，但无法找到解决方案。非常感谢。在查看您的解决方案和评论后，我觉得自己很愚蠢（可能是我应该让这种感觉属于我，并且每分钟都保持这种感觉，但我宁愿不这样做）。事实上，我认为这就是原因，但无法找到解决方案。