Question

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

我的问题包括以下内容：如何检查我的表单中的任何子元素是否满足特定参数，例如作为输入字段并具有其.val（）==。attr（'defVal'）？< / p>

我已经尝试过使用.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/

Answer 2

在主题上睡觉后，我最终设法完成任务。我已经改变了一下html。无论如何，谢谢你的建议，因为它是非常有用的，并实际上给我一些东西。

HTML：

<div class="login" align="center">
<div class="formWrapper">
    <form action="index.php?r=backoffice" method="post">
        <p class="jQueryErr">
        <?php
            if( !empty($_POST['USERNAME']) && !empty($_POST['PASSWORD']) ){
                phpClass::USER_login($_POST['USERNAME'],'username',$_POST['PASSWORD'],'password');
            }
        ?>
        </p>
        <input type="text" name="USERNAME" value="username" defval="username" maxlength="16">
        <input type="password" name="PASSWORD" 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>

jQuery的：

$('form').submit(function(e){
    var elems=$(this).find('input[defval]');
    var errWrapper=$(this).find('p.jQueryErr');
    for( var i=0; i<elems.length; i++ ){
        if( $(elems[i]).val()==$(elems[i]).attr('defVal') ){
            $(errWrapper[0]).html('<a class="sysMsg errWarning" href="#">error:: invalid username/password</a>');
            var formSysMsg=$('p.jQueryErr a.sysMsg');
            $(formSysMsg[0]).fadeIn(300).delay(5000).fadeOut(300);
            e.preventDefault();
            break;
        }else if( $(elems[i]).val().length<8 ){
            $(errWrapper[0]).html('<a class="sysMsg errWarning" href="#">error::'+ $(elems[i]).attr('defVal') +'::is too short!</a>');
            var formSysMsg=$('p.jQueryErr a.sysMsg');
            $(formSysMsg[0]).fadeIn(300).delay(5000).fadeOut(300);
            e.preventDefault();
            break;
        }
    }
});

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

2 个答案: