Question

我希望使用jquery验证一个简单的表格。到目前为止，我有一个for循环遍历所有字段并检查它们是否为空。然后我有另一个for循环，检查年龄是否在一定范围内。最后，最后一个循环检查电子邮件是否处于正确的RegEx模式。

目前只有第一个循环工作，而其他循环没有循环。我试图做console.logs，它确认其他循环没有被触及。任何想法或帮助将不胜感激！

半工作代码笔：https://codepen.io/anon/pen/ZXVmQz?editors=1010

代码：

HTML

<section class="container">
<div class="table table-responsive">
  <table class="table table-responsive table-striped table-bordered" id="data-table">
    <thead>
      <tr>
        <td>Name</td>
        <td>Age</td>
        <td>Email</td>
      </tr>
    </thead>
    <tbody id="TextBoxContainer">
    </tbody>
    <tfoot>
      <tr>
        <th colspan="5">
        <button id="btnAdd" type="button" class="btn btn-primary" data-toggle="tooltip" data-original-title="Add more controls"><i class="glyphicon glyphicon-plus-sign"></i>&nbsp; Add&nbsp;</button></th>
      </tr>
    </tfoot>
  </table>
</div>

JQuery的

function validate(input) {

    var isValid;
    var filter = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
    var email = $('.email').val();
    var length = $('.data').length;
    console.log($('.email').val());
    var rowInputLength = $("#TextBoxContainer input").length;

    for (var i=0; i<rowInputLength; i++) {

        if (!($(input[i]).val() == "" )) {

            isValid = true;
            validBorder($(input[i]));

            if ($('input[type=number]') && !($(input[i]).val()<= 2 || $(input[i]).val() >= 100)) {
                isValid = true;
                console.log($('#age').val());
                validBorder($(input[i]));
            }

            if ('$(input[i][type=email])' && filter.test(email)) {
                isValid = true;
                validBorder($(input[i]));
            }
        }
        else {
            isValid = false;
            invalidBorder($(input[i]));
        }
    }

    return isValid;
 }

如何创建表格

function GetDynamicTextBox(value1, value2, value3) {

    return '<td><input name = "DynamicTextBox" id="name"  type="text" value = "" placeholder = "' + value1 + '" class="form-control data" /></td>' + 
           '<td><input name = "DynamicTextBox" id="age"  type="number"  min="3" max="100" value = "" placeholder = "' + value2 + '" class="form-control data" /></td>' + 
           '<td><input name = "DynamicTextBox" id="email"  type="email"  value = "" placeholder="' + value3 + '" class="form-control data email" /></td>' + 
           '<td><button type="button" class="btn btn-danger remove"><i class="glyphicon glyphicon-remove-sign"></i></button><button type="button" class="btn btn-success edit"><i class="glyphicon glyphicon-ok"></i></button></td>';
}

按下此按钮时

$(function () {

    $("#btnAdd").bind("click", function () {

        var div = $("<tr />");
        div.html(GetDynamicTextBox("Enter Name", "Enter Age", "Enter Email"));
        $("#TextBoxContainer").append(div);
        $('#btnAdd').attr("disabled", "disabled");

        $(".data").blur(function() {
            validate($(this))
        });
    });
});

Answer 1

你在问题中缺少相关的代码，必须在你的笔中找到它。

在您的匿名＆＃34;添加行＆＃34;您需要使用所有输入字段调用验证的函数，使用您尝试使用的选择器可以这样完成：

validate( $( ".data" ) )

验证方法中还发现了其他问题：$(input[i]).val()是一个字符串，使用前缀+，+$(input[i]).val()

将其转换为数字

使用带有边框和模糊效果的Jquery验证表单

1 个答案: