0

我是 jquery 的初学者。我想了解 jquery 基本知识，所以我开始构建自己的 jquery 表单验证。它工作正常，但我需要额外的信息才能成功。发生错误时它工作正常，但我希望在用户正确填写字段时收到消息。请尝试帮助我解决问题。如果有任何想法，欢迎。提前致谢。

这是我的代码：-

$('#fname').blur(function(){

        var err_msg_css={"background-color":"#FDE4E1","border":"1px solid red","border-radius":"10px 4px 4px 10px","color":"#CB4721","font-size": "14px","float":"left","font-family":"Georgia","font-size":"small","font-style":"oblique","height":"22px","margin-left":"6px","padding":"3px","width":"196px"};
        var sucess_msg_css={"background-color":"#FDE4E1","border":"1px solid red","border-radius":"10px 4px 4px 10px","color":"#CB4721","font-size": "14px","float":"left","font-family":"Georgia","font-size":"small","font-style":"oblique","height":"22px","margin-left":"6px","padding":"3px","width":"196px"};
        var text = /[a-z]$/;
        var fname=$('#fname').val();

        if(!$('#fname').val()){
            $('#err_msg_1').html('<img src="css/images/error.jpg">fname field is empty').css(err_msg_css).show();
            return false;
        }else{
            if($('#fname').val().length <= 4){
                $('#err_msg_1').html('<img src="css/images/error.jpg">letter length is to sort').css(err_msg_css).show();
                return false;
            }
            if(!text.test(fname)){
                //console.log('qwerty')
                $('#err_msg_1').html('<img src="css/images/error.jpg">Type a alphabet please').css(err_msg_css).show();
                return false;
            }
        }
        $('#err_msg_1').hide();
        return true;
/*i want to add this additional code to show success massage
        if(true){
         $('#err_msg_1').html('<img src="css/images/success.jpg">sucessful').css(sucess_msg_css).show();    
        } */
    });
4

2 回答 2

2

你可以这样做：

$('#fname').blur(function () {

    // Declare a local variable for return value
    var returnValue = true;

    var err_msg_css = {};
    var sucess_msg_css = {};
    var text = /[a-z]$/;
    var fname = $('#fname').val();

    if (!$('#fname').val()) {
        $('#err_msg_1').html('<img src="css/images/error.jpg">fname field is empty').css(err_msg_css).show();
        returnValue = false;  // Assign the return value here
    } else {
        if ($('#fname').val().length <= 4) {
            $('#err_msg_1').html('<img src="css/images/error.jpg">letter length is to sort').css(err_msg_css).show();
            returnValue = false; // Assign the return value here
        }
        if (!text.test(fname)) {
            //console.log('qwerty')
            $('#err_msg_1').html('<img src="css/images/error.jpg">Type a alphabet please').css(err_msg_css).show();
            returnValue = false; // Assign the return value here
        }
    }

    //i want to add this additional code to show success message
    if (returnValue) {
        $('#err_msg_1').html('<img src="css/images/success.jpg">Successful</img>').css(sucess_msg_css).show();
    }

    // Finally return the value based on the validation
    return returnValue;
});
于 2013-06-10T07:17:53.423 回答
1

给你...也将模糊更改为keyup，以提供即时反馈... 经过测试并正常工作:) JSFIDDLE DEMO

 $('#fname').keyup(function(){

    var err_msg_css={"background-color":"#FDE4E1","border":"1px solid red","border-radius":"10px 4px 4px 10px","color":"#CB4721","font-size": "14px","float":"left","font-family":"Georgia","font-size":"small","font-style":"oblique","height":"22px","margin-left":"6px","padding":"3px","width":"196px"};
    var sucess_msg_css={"background-color":"green","border":"1px solid red","border-radius":"10px 4px 4px 10px","color":"#CB4721","font-size": "14px","float":"left","font-family":"Georgia","font-size":"small","font-style":"oblique","height":"22px","margin-left":"6px","padding":"3px","width":"196px"};
    var text = /[a-z]$/;
    var fname=$('#fname').val();

    if(!$('#fname').val()){
        $('#err_msg_1').html('<img src="css/images/error.jpg">fname field is empty').css(err_msg_css).show();
        return false;
    }else{
        if($('#fname').val().length <= 4){
            $('#err_msg_1').html('<img src="css/images/error.jpg">letter length is to sort').css(err_msg_css).show();
            return false;
        }
        if(!text.test(fname)){
            //console.log('qwerty')
            $('#err_msg_1').html('<img src="css/images/error.jpg">Type a alphabet please').css(err_msg_css).show();
            return false;
        }

        if(($('#fname').val().length > 4)&&(text.test(fname))){
        $('#err_msg_1').html('<img src="css/images/success.jpg">sucessful').css(sucess_msg_css).show();    
        return false;
        }
    }
    $('#err_msg_1').hide();
    return true;

});
于 2013-06-10T07:10:30.883 回答