Bootstrap：在处理远程验证时显示一些消息

Question

我有一个非常愚蠢的问题；但是，我是这种语言的新手，并且是我自己的学习引导程序。我实际上已经搜索了将近 3 天，但找不到解决方案。我已经按照这里http://formvalidation.io/examples/getting-notified-field-being-validated/ 中提到的方法，但仍然无法解决。基本上我想在执行远程验证时显示类似“处理中...”的内容，但由于某种原因我无法做到这一点。亲爱的网站管理员，如果这是一个重复的问题，对不起；但是，我什至遵循JQuery validation "remote" method response waiting message 此处提供的解决方案，但无法理解它...... :(

我的代码...

$(document).ready(function(){

$("#registerform").bootstrapValidator({
    //live: 'enabled',
    onkeyup: false,
    feedbackIcons: {
        valid: 'fa fa-thumbs-o-up',
        invalid: 'fa fa-remove',
        validating: 'fa fa-circle-o-notch fa-spin'
    },

    // Specify the validation rules
    fields: {
        name: {
            validators: {
                stringLength: {
                    min: 6,
                },
                notEmpty: {
                    message: 'You are required to fill your full name'
                }
            }
        },
        username: {
            threshold: 6,
            validators: {
                stringLength: {
                    min: 6,
                },
                notEmpty: {
                    message: 'You are required to fill a username of your choice'
                },
                regexp: {
                    regexp: /^[a-zA-Z0-9_\.]+$/,
                    message: 'The username can only consist of alphabetical, number, dot and underscore'
                },
                remote: {
                    url: '/remote.php',
                    type: 'POST',
                    message: 'Oops! That username is already taken',
                    delay: 2000
                },
            }
        },
        email: {
            validators: {
                notEmpty: {
                    message: 'Please supply your email address'
                },
                emailAddress: {
                    message: 'Please supply a valid email address'
                }
            }
        },
        password: {
            validators: {
                stringLength: {
                    min: 8,
                },
                notEmpty: {
                    message: 'Please set a password'
                },
                regex: /^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#\$%\^&\*])(?=.{8,})/, /* Minimum eight characters, at least one letter, one number and one special character: */
                callback: {
                    callback: function(value, validator, $field) {
                        var password = $field.val();
                        if (password == '') {
                            return true;
                        }

                        var result  = zxcvbn(password),
                        score   = result.score,
                        message = result.feedback.warning || 'The password is weak';

                        // Update the progress bar width and add alert class
                        var $bar = $('#strengthBar');
                        switch (score) {
                            case 0:
                                $bar.attr('class', 'progress-bar progress-bar-danger').css('width', '1%');
                                break;
                            case 1:
                                $bar.attr('class', 'progress-bar progress-bar-danger').css('width', '25%');
                                break;
                            case 2:
                                $bar.attr('class', 'progress-bar progress-bar-danger').css('width', '50%');
                                break;
                            case 3:
                                $bar.attr('class', 'progress-bar progress-bar-warning').css('width', '75%');
                                break;
                            case 4:
                                $bar.attr('class', 'progress-bar progress-bar-success').css('width', '100%');
                                break;
                        }

                        // We will treat the password as an invalid one if the score is less than 3
                        if (score < 3) {
                            return {
                                valid: false,
                                message: message
                            }
                        }
                        return true;
                    }
                }
            }
        },
        passwordConfirm: { 
            validators: {
                notEmpty: {
                    message: 'Please set a password'
                },
                identical: {
                    field: 'password',
                    message: 'Passwords do not match'
                },
                different: {
                    field: 'username',
                    message: 'The password cannot be the same as username'
                }
            }
        },

.on('status.field.bv', function(e, data) {
    // Change username to your field name
    if (data.field === 'username' && data.validator === 'remote') {
        (data.status === 'VALIDATING')? $('#processing').show(): $('#processing').hide();
    }
});

});

另一件事是在执行用户名字段验证时，图标变为旋转圆圈；但是，一旦有人开始输入确认密码，验证图标就会变为十字形。这可能是由于实施了“不同”检查。有没有办法防止这种情况发生？

Answer 1

我认为您可以使用此引导程序显示消息的最佳方法是 bootbox

你可以使用类似的东西

var dialog = bootbox.dialog({
    title: 'working',
    message: '<p><i class="fa fa-spin fa-spinner"></i> Loading...</p>'
});
dialog.init(function(){
    setTimeout(function(){
        dialog.find('.bootbox-body').html('All work is done!');
    }, 3000);
});

您可以通过将输入密码设置为只读来防止更改。

希望对你有帮助