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

Posted 2023-05-08

【中文标题】Bootstrap：在处理远程验证时显示一些消息

【英文标题】：Bootstrap: show some message while remote validation is processing

【发布时间】：2018-04-16 06:44:52

【问题描述】：

我有一个非常愚蠢的问题；但是，我是这种语言的新手，并且是我自己的学习引导程序。我实际上已经搜索了将近 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();
    
);

);

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

【参考方案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);
);

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

希望对你有帮助

【讨论】：

感谢 Braian 的回复。你能指导我在哪里添加这段代码吗？我很确定我做错了什么。

我不明白你想在哪里使用它

我的错，我错过了提及具体点...基本上，在使用“远程”方法检查用户名可用性（即验证状态）时，我想显示此消息跨度>

嘿 Braian，我的评论有意义吗？ :S

抱歉之前从未使用过该插件，但我认为您需要在 .on('status.field.fv', function() ) 中使用它