基于输入值的简单jquery验证答案

【问题标题】：Simple jquery validation based on input value基于输入值的简单jquery验证
【发布时间】：2018-04-19 19:45:55
【问题描述】：

我有 2 个文本框和 1 个提交按钮。在这里，一旦您单击提交按钮，它将验证： 1) 一个一个地清空字段。 2）如果文本字段和密码字段的值等于'admin'，那么它应该重定向到某个页面。这里一切正常，但问题是当我在文本字段上放置“管理员”和密码字段上的一些其他文本时，应该从文本字段中删除“用户名不匹配”消息但这里仍然显示，除非我在两个文本字段上都放置“管理员”和密码字段。下面是代码：

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();
        }   
    });
});

【问题讨论】：

如果您有任何个安全问题，您永远不会在前端执行密码验证。
是的，你是对的，但这只是我们临时要求的虚拟硬编码值
没关系。如果您在前端执行验证，任何用户都能够检查他们的页面以找到您验证密码的对象。
是的，我知道，但到目前为止，这只是我们对演示的要求
您描述的行为就是您编写的代码。 'redirectusererror' p 标签隐藏的唯一时间是用户名和密码均为 admin 或用户名为空。

标签： jquery validation

【解决方案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/

【讨论】：