茶.bootstrap-validator插件使用-案例,

$(function() {
    //1. 给重置按钮和登录绑定事件
    $(".reset").click(function() {
        //把表单还原
        $("form")[0].reset();
    });

    $(".submit").click(function() {
        //当点击submit按钮时，需要触发submit方法
        $("form").submit();
    });

    //2. 表单验证
    //2-1： 调用bootstarp方法，开始验证表单
    $("form").bootstrapValidator({
        //1. 指定校验时的图标显示，默认是bootstrap风格
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },

        //2.指定校验字段
        fields: {
            username: {
                validators: {
                    //规则1：
                    //不能为空
                    notEmpty: {
                        message: '用户名不能为空'
                    },
                    //规则2：
                    //长度校验
                    stringLength: {
                        min: 4,
                        max: 30,
                        message: '用户名长度必须在4到30之间'
                    },
                    //规则3：
                    //正则校验
                    regexp: {
                        regexp: /^[a-zA-Z0-9_\.]+$/,
                        message: '用户名由数字字母下划线和.组成'
                    },

                    //回调提示信息
                    callback: {
                        message: "用户名错了"
                    }
                }
            },

            password: {
                validators: {
                    //规则1：
                    //不能为空
                    notEmpty: {
                        message: '密码不能为空'
                    },
                    //规则2：
                    //长度校验
                    stringLength: {
                        min: 6,
                        max: 12,
                        message: '密码长度必须在6到12之间'
                    },
                    //规则3：
                    //正则校验
                    regexp: {
                        regexp: /^[a-zA-Z0-9]+$/,
                        message: '密码由数字字母组成'
                    },
                    //回调错误信息
                    callback: {
                        message: "密码错了"
                    }
                }
            }
        }
    });

    //2-2： 表单验证通过，提交表单时(触发提交表单事件)，会触发过个方法
    $("form").on('success.form.bv', function (e) {
        //默认情况下， 触发表单提交事件，会刷新页面，而我不希望刷新页面，所以就阻止默认事件
        e.preventDefault();
        
        //发起ajax请求，实现登录功能
        $.ajax({
            url: "/employee/employeeLogin",
            type: "POST",
            data: $("form").serialize(),
            success: function(res) {
                //用户名错误
                if(res.error == 1000) {
                    var validator = $("form").data('bootstrapValidator');  //获取表单校验实例
                    validator.updateStatus("username", "INVALID", "callback")
                } 
                //密码错误
                if (res.error == 1001) {
                    var validator = $("form").data('bootstrapValidator');  //获取表单校验实例
                    validator.updateStatus("password", "INVALID", "callback")
                }

                if (res.success) {
                    //如果用户直接在地址栏输入 login页面的地址，就跳转到首页， 否则的话，从哪来，回哪去
                    var lasturl = sessionStorage.getItem("lasturl")
                    window.location.href = lasturl ? lasturl : "./index.html";
                    sessionStorage.removeItem("lasturl");
                }
            }
        });
    });
});

别人的连接介绍