# Bootstrap-Validator表单验证插件

注意:此验证框架只能使用表单自己的提交方式,我们不能再自己定义提交表单的方式

1.引入插件

<!--引入验证插件的样式文件-->
<link rel="stylesheet" href="/js/plugins/bootstrap-validator/css/bootstrapValidator.min.css"/>
<!--引入验证插件的js文件-->
<script type="text/javascript" src="/js/plugins/bootstrap-validator/js/bootstrapValidator.min.js"></script>
<!--中文语言库-->
<script type="text/javascript" src="/js/plugins/bootstrap-validator/js/language/zh_CN.js"></script>

使用

$("#editForm").bootstrapValidator({//验证框架  #editFrom为表单选择器
                feedbackIcons: { //图标
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                fields:{ //配置要验证的字段
                    name:{//要验证的字段名
                        validators:{ //验证的规则
                            notEmpty:{ //不能为空
                                message:"用户名必填" //错误时的提示信息
                            },
                           stringLength: { //字符串的长度范围
                                min: 1,//最小长度
                                max: 5//最大长度
                            },
                            remote: {//ajax验证
                                type: 'POST',  //提交方式
                                url: '/employee/checkName.do',  //路径
                                message: $("#editForm input[name=\"id\"]").val()?'用户名不存在!':'用户名已存在!',
                                delay: 1000,
                                dataType:'json',//数据类型
                                data:{//自定义提交数据
                                    id:function(){
                                        return $("#editForm input[name=\"id\"]").val();
                                    },
                                    name:function(){
                                        return $("#editForm #name").val();
                                    }
                                }
                            },
                        }
                    }
                 ,
                 password:{
                     validators:{
                         notEmpty:{ //不能为空
                             message:"密码必填" //错误时的提示信息
                         },
                         stringLength: { //字符串的长度范围
                             max: 5,
                             message:"密码最多不超过5位"
                         }
                     }
                 },
                 repassword:{
                     validators:{
                         notEmpty:{ //不能为空
                             message:"密码必填" //错误时的提示信息
                         },
                         identical: {//两个字段的值必须相同
                             field: 'password',
                             message: '两次输入的密码必须相同'
                         },
                     }
                 },
                 email: {
                     validators: {
                         emailAddress: {} //邮箱格式
                     }
                 },
                 age:{
                     validators: {
                         between: { //数字的范围
                             min: 18,
                             max: 60
                         }
                     }
                 }

                }
            }).on('success.form.bv', function(e) { //表单所有数据验证通过后执行里面的代码
                 e.preventDefault();//让事件源不触发默认事件
                 $(".selfRoles option").prop("selected",true);//让角色的下拉框都被选中
                 // //提交异步表单
                 // $("#editForm").submmit();
                 $("#editForm").ajaxSubmit(function (ret) {
                     $.messager.popup(ret.msg);
                     if(ret.flag==true){
                         setInterval(function () {
                             window.location.href="/employee/list.do";
                         },2000);
                     }
                 });
             });