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);
});

您可以通过将输入密码设置为仅读取来阻止更改输入密码。

希望有所帮助

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

1 个答案: