基于输入值的简单jquery验证

Question

我有2个文本框和1个提交按钮。在这里，一旦你点击提交按钮，它将验证：1）逐个空字段。 2）如果文本字段和密码字段的值等于＆＃39; admin＆＃39;然后它应该重定向到某个页面。这里的一切都运转良好，但问题是当我把'管理员＆＃39;在文本字段和密码字段上的其他一些文本中，消息＆＃39;用户名不匹配＆＃39;应该从文本字段中删除但在此处仍然显示，除非我放置＆＃39; admin＆＃39;在textfield和password字段上。以下是代码：

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
    <h2>Vertical (basic) form</h2>
    <form>
        <div class="form-group">
            <label for="email">Email:</label>
            <input type="text" required class="form-control" id="username" placeholder="Enter username" name="username">
            <p class="blankerroruser">Please enter username</p>
            <p class="redirectusererror">Username does not match</p>
        </div>
        <div class="form-group">
            <label for="pwd">Password:</label>
            <input type="password" required class="form-control" id="password" placeholder="Enter password" name="password">
            <p class="blankerrorpwd">Please enter Password</p>
            <p class="redirectpwderror">Password does not match</p>
        </div>
        <button type="button" class="btn btn-default">Submit</button>
    </form>
</div>

风格

.blankerrorpwd,.redirectusererror,.redirectpwderror,.blankerroruser{ 
    display:none; 
    color:red;
}

脚本

$(document).ready(function(){
    $(".btn").click(function(){
        if(($('#username').val()=='') && ($('#password').val()=='')){      
            $("p.blankerroruser").show();
            $("p.blankerrorpwd").show();
        } else if($('#username').val()==''){
            $("p.blankerroruser").show();
            $("p.blankerrorpwd").hide();
            $("p.redirectusererror").hide();
        } else if($('#password').val()==''){
            $("p.blankerrorpwd").show();
            $("p.blankerroruser").hide();
            $("p.redirectpwderror").hide();
        } else if(($('#username').val()=='admin') && ($('#password').val()=='admin')){
            $("p.redirectusererror").hide();
            $("p.redirectpwderror").hide();
            $(location).attr('href', 'http://stackoverflow.com');
        } else if(($('#password').val()!='') && ($('#username').val()!='') || ($('#username').val()!='admin') || ($('#password').val()!='admin')) { 
            $("p.blankerrorpwd").hide();
            $("p.blankerroruser").hide();
            $("p.redirectusererror").show();
            $("p.redirectpwderror").show();
        }   
    });
});

Answer 1

这是验证您的代码

$(function(){
    $('[type="button"]').click(function(){
        var error = false;
        $('input[required]').siblings('p').hide();      
        $('input[required]').each(function(k,v){
            switch($(v).attr('name')){
                case 'username' :
                    if($.trim($(this).val()).length > 0){
                        if($.trim($(this).val()) != 'admin'){ error = true; $("p.redirectusererror").show(); }
                    }else{ error = true; $("p.blankerroruser").show(); }
                break;
                case 'password' :
                    if($.trim($(this).val()).length > 0){
                        if($.trim($(this).val()) != 'admin'){ error = true; $("p.redirectpwderror").show(); }
                    }else{ error = true; $("p.blankerrorpwd").show(); }                 
                break;
            }
        });
        if(error === false){
            // success
            //console.log('submitted');         
            $(location).attr('href', 'http://stackoverflow.com');
        }
    });
});

工作演示：https://jsfiddle.net/Ljekm4z6/1/