Question

我有一个非常奇怪的问题，当我的JS Fiddle上的相同代码正常工作时，我的工作文件的代码不起作用。

我正在做的就是检查用户名或密码字段是否空白。出于某种原因，我的工作平台代码没有获取任何输入值。

我经历了多次，确保我在相同的代码环境中但一切都是一样的。我不知道从哪里拿它。

(function($){
    $('#signIn_1').click(function () {  

        var username = $('#username_1').val();
        var password = $('#password_1').val();

        if ( username === '' || password === '' ) {
            $('.fa-user').removeClass('success').addClass('fail');  
        } else {
            $('.fa-user').removeClass('fail').addClass('success');      
        }

    });
})(jQuery);

我的if语句是否违反了可能导致不一致的任何规则？

JS Fiddle

Answer 1

问题是您的<form>元素正在提交，从而重新加载页面。我建议修改表单的submit事件，而不是给按钮click事件，因为表单通常是但不一定通过单击按钮触发。另外，return false is not a good way of disabling behaviour。

示例：

(function($){
    $('#form_1').submit(function (event) {
        var username = $('#username_1').val();
        var password = $('#password_1').val();
        if ( username === '' || password === '' ) {
            event.preventDefault();
            $('.fa-user').removeClass('success').addClass('fail');
        }
        else {
            $('.fa-user').removeClass('fail').addClass('success');      
        }
    });
})(jQuery);

这是小提琴：http://jsfiddle.net/RyanJW/VqwNw/1/

Answer 2

检查这个使用return false来停止执行

(function($){
    $('#signIn_1').click(function () {  

        var username = $('#username_1').val();
        var password = $('#password_1').val();

        if ( $.trim(username) === '' || $.trim(password) === '' ) {
            $('.fa-user').removeClass('success').addClass('fail');  
            return false;
        } else {
            $('.fa-user').removeClass('fail').addClass('success');      
        }

    });
})(jQuery);

Fiddle

jQuery - 验证结果与JS Fiddle演示不同

2 个答案: