javascript - jQuery 获取具有特定参数的子元素数量

Question

我有以下代码，该代码在提交表单时执行。然而以下逻辑是不正确的，因为其目的是开发一个适用于我的 DOM 中所有表单的通用函数。经过一次又一次的失败后，我最终创建了这个特定于此表单的函数，该函数验证表单中输入字段的值是否与其自定义 defVal 属性相同，如果是，则表单将停止提交，并显示错误消息弹出。

我的问题如下:我如何检查表单的任何子元素是否满足特定参数，例如作为输入字段并具有其 .val() == .attr('defVal')？

我已经尝试过使用 .find()、.children() 和 .childNode 功能。有人可以建议我一个好的解决方案吗？如果可能的话请解释一下你的代码

HTML:

<div class="login" align="center">
<div class="formWrapper">
    <form action="index.php?r=backoffice" method="post">
        <input type="text" name="USERNAME" required value="username" defval="username" maxlength="16">
        <input type="password" name="PASSWORD" required value="password" defval="password" maxlength="16">
        <input type="reset" value="reset">
        <input type="submit" value="submit">
        <hr/>
        <a href="#" class="helpLink">Can't log in?</a>
    </form>
</div>
<div class="infoWrapper">
    <div class="info">

    </div>
</div>

jQuery:

$('div.login').ready(function(){
$('div.login form').submit(function(e){
    if( $('div.login form input').val()==$('div.login form input').attr('defVal') ){
        var numMsgs=$('div.login form').children();
        if( numMsgs.length<=6 ){
            var formHtml=$('div.login form').html();
            $('div.login form').html('<a class="sysMsg" href="#">error::invalid username/password</a>'+formHtml);
            $('div.login form a.sysMsg').addClass('errFatal').fadeIn(300).delay(5000).fadeOut(300);
        }
    e.preventDefault();
    }
});

});

Answer 1

尝试(这种模式)

$(function () {
    var elems = $(".login input[defval]");
    console.log(elems.length);
    $.each(elems, function (i, el) {
        if ($(el).val() === $(el).attr("defval")) {
            // do stuff
            console.log(i, $(el).val() === $(el).attr("defval"), $(el));
        };
    });
});

jsfiddle http://jsfiddle.net/guest271314/9578v/