Bootstrap表单验证增加滑块验证

weixin_41240366 2022-04-10 15:17:14

我想在Bootstrap表单验证程序中增加滑块验证，如何加？

<script type="text/javascript">
$(document).ready(function() {
    $('#defaultForm')
        .bootstrapValidator({
            message: 'This value is not valid',
            //live: 'submitted',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                username: {
                    message: 'The username is not valid',
                    validators: {
                        notEmpty: {
                            message: 'The username is required and can\'t be empty'
                        },
                        stringLength: {
                            min: 6,
                            max: 30,
                            message: 'The username must be more than 6 and less than 30 characters long'
                        },
                        /*remote: {
                            url: 'remote.php',
                            message: 'The username is not available'
                        },*/
                        regexp: {
                            regexp: /^[a-zA-Z0-9_\.]+$/,
                            message: 'The username can only consist of alphabetical, number, dot and underscore'
                        }
                    }
                },
                email: {
                    validators: {
                        notEmpty: {
                            message: 'The email address is required and can\'t be empty'
                        },
                        emailAddress: {
                            message: 'The input is not a valid email address'
                        }
                    }
                },
                password: {
                    validators: {
                        notEmpty: {
                            message: 'The password is required and can\'t be empty'
                        }
                    }
                }
            }
        })
        .on('success.form.bv', function(e) {
            // Prevent submit form
            e.preventDefault();

            var $form     = $(e.target),
                validator = $form.data('bootstrapValidator');
            $form.find('.alert').html('Thanks for signing up. Now you can sign in as ' + validator.getFieldElements('username').val()).show();
        });
});
</script>

以下是滑块验证

					<div class="form-group">
                        <label class="col-lg-3 control-label">验证码：<sup>*</sup></label>
                        <div class="col-lg-6">
                            <div class="input-group"><div class="verify-wrap" id="verify-wrap"></div>
							</div>
                        </div>
                        </div>

<script type="text/javascript">
$(function() {
    var SlideVerifyPlug = window.slideVerifyPlug;
    var slideVerify = new SlideVerifyPlug('#verify-wrap', {
        wrapWidth: '350',
        //设置 容器的宽度 ,不设置的话，会设置成100%，需要自己在外层包层div,设置宽度，这是为了适应方便点；
        initText: '请向右滑动滑块',
        //设置  初始的 显示文字
        sucessText: '验证通过',
        //设置 验证通过 显示的文字
        getSuccessState: function(res) {
            //当验证完成的时候 会 返回 res 值 true，只留了这个应该够用了 
            // console.log(res);
            if (slideVerify.slideFinishState) {
                $('.value').html(slideVerify.slideFinishState)
            }
        }
    })
});
</script>

...全文