bootstrapValidator

HTML:

<link rel="stylesheet" href="libs/bootstrap3.3/plugins/validator/dist/css/bootstrapValidator.min.css">
<script type="text/javascript" src="libs/bootstrap3.3/plugins/validator/dist/js/bootstrapValidator.min.js"></script>

<form id="setAccountForm" action="scan_3.html" method="post">
        <div class="shadow-box">
            <p class="line form-group">
                <span>用户名:</span>
                <input type="text" name="username" id="username" value="" placeholder="" />
            </p>
            <p class="line form-group">
                <span>密码 :</span>
                <input type="password" name="password" id="password" value="" placeholder="" />
            </p>
            <p class="form-group">
                <span>确认密码 :</span>
                <input type="password" name="re_password" id="re_password" value="" placeholder="" />
            </p>
        </div>
        
        <div class="save row">
            <div class="col-xs-6">
                <button type="submit" name="submit" class="btn btn-danger form-control ok">提交</button>
            </div>
            <div class="col-xs-6">
                <a href="home.html" class="btn btn-danger form-control cancel">返回</a>
            </div>
        </div>
    </form>

JS

$(function (){
$('#setAccountForm').bootstrapValidator({
        message: 'This value is not valid',
        feedbackIcons: {valid: 'glyphicon glyphicon-ok',invalid: 'glyphicon glyphicon-remove',validating: 'glyphicon glyphicon-refresh'},
        fields: {
            username: {
                validators: {
                    notEmpty: {
                        message: '用户名不能为空'
                    },
                    stringLength: {
                        min: 6,
                        max: 15,
                        message: '用户名长度是6-15个字符或数字'
                    },
                    regexp: {
                        regexp: /^[a-zA-Z0-9_]+$/,
                        message: '用户名只能包含大写字母、小写字母、数字、下划线'
                    }
                }
            },
            password: {
                validators: {
                    notEmpty: {
                        message: '密码不能为空'
                    },
                    stringLength: {
                        min: 8,
                        max: 16,
                        message: '密码由8-16个数字或英文字母组成'
                    },
                    regexp: {
                        regexp: /^[a-zA-Z0-9]+$/,
                        message: '密码只能包含大写字母、小写字母、数字'
                    }
                }
            },
            re_password: {
                validators: {
                    notEmpty: {
                        message: '密码不能为空'
                    },
                    identical: {
                        field: 'password',
                        message: '两次密码不一致'
                    },
                }
            }
        }
    }).on('success.form.bv', function(e) {
        e.preventDefault();
        let $form = $(e.target);
        let bv = $form.data('bootstrapValidator');
        $.post($form.attr('action'), $form.serialize(), function(result) {
            if(0===result.code){
                toastr.success('Save Success.')
                setTimeout(function(){
                    location.reload();
                }, 3000);
            }else {
                toastr.error(result.msg, "Save Failed");
            }
        }, 'json');
    });
});

猜你喜欢

转载自blog.csdn.net/u011643449/article/details/84837230