Question

我是jquery的初学者。我想了解jquery basic，所以我开始构建自己的jquery表单validation.it工作正常，但我需要额外的消息才能成功。它在错误发生时工作正常，但是当用户正确填写字段时我想要消息。请尽量帮助我解决问题。如果有任何想法最受欢迎。提前谢谢。

这是我的代码： -

$('#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();    
        } */
    });

Answer 1

你可以这样做：

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

Answer 2

你去...... 将模糊更改为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;

});

jquery表单验证显示关于单个div的两个不同信息

这是我的代码： -

2 个答案: