bootstrapValidator Form表单校验

Form 表单校验（bootstrapValidator）

• 引用 js 文件（必须）

• Form 表单

---

 

 

                            
管理员登录
                            

                                

                                    账号
                                    
                                
                            
                            

                                

                                    密码
                                    
                                
                            
                            

                            登录
                        

• 设置校验逻辑

 

$(function() {
        $('#loginForm')//登录
            .bootstrapValidator({
                message: '登录校验',
                feedbackIcons: {
                    /*input状态样式图片*/
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                fields: {
                    /*验证：规则*/
                    loginAccount: {//验证input项：验证规则
                        message: '登录账号验证',
                        threshold : 2 , //有2字符以上才发送ajax请求，（input中输入一个字符，插件会向服务器发送一次，设置限制，6字符以上才开始）
                        validators: {
                            notEmpty: {//非空验证：提示消息
                                message: '账号/用户名不能为空'
                            },
                            stringLength: {
                                min: 2,
                                max: 20,
                                message: '账号/用户名长度必须在2到20之间'
                            },
                             remote: {//ajax验证。server result:{"valid",true or false} 向服务发送当前input name值，获得一个json数据。例表示正确：{"valid",true}
                                 url: '/checkAdmin',//验证地址
                                 message: '用户不存在',//提示消息
                                 delay :  1000,//每输入一个字符，就发ajax请求，服务器压力还是太大，设置1秒发送一次ajax（默认输入一个字符，提交一次，服务器压力太大）
                                 type: 'POST',//请求方式
                                 data:function(){
                                     return {
                                         loginAccount: $("#loginForm input[name='loginAccount']").val(),
                                         loginName: $("#loginForm input[name='loginAccount']").val()
                                     }
                                 }
                             },
                            regexp: {
                                regexp: /^[A-Za-z0-9\u4e00-\u9fa5]+$/,
                                message: '账号/用户名由数字、字母、汉字组成'
                            }
                        }
                    },
                    password: {
                        message: '密码无效',
                        validators: {
                            notEmpty: {
                                message: '密码不能为空'
                            },
                            stringLength: {
                                min: 6,
                                max: 20,
                                message: '用户名长度必须在6到20之间'
                            },
                            identical: {//相同
                                field: 'password', //需要进行比较的input name值
                                message: '两次密码不一致'
                            },
                            different: {//不能和用户名相同
                                field: 'username',//需要进行比较的input name值
                                message: '不能和用户名相同'
                            },
                            regexp: {
                                regexp: /^[a-zA-Z0-9_\.]+$/,
                                message: '密码由数字字母下划线和.组成'
                            }
                        }
                    }
                }
            })
            .on('success.form.bv', function (e) {//点击提交之后
                //密码加密
                var password = $('#loginForm input[name=password]').val();
                $('#loginForm input[name=password]').val($.md5(password))
                // 终止重复提交
                e.preventDefault();
                // 得到form表单对象
                var $form = $(e.target);
                // 获得bootstrap验证对象
                var bv = $form.data('bootstrapValidator');
                // Use Ajax to submit form data 提交至form标签中的action，result自定义
                $.post($form.attr('action'), $form.serialize(), function (data) {
                    layer.msg(data.msg);
                    if(data.code == 1){
                        common.method.GoUrl("/page/base");
                    }else{
                        $('#loginForm button[type=submit]').attr("disabled",false);
                    }
                });
            });

});

效果图

• 默认样式

• 校验效果（校验不通过时登录按钮不可点击）

• 校验成功（成功以后登录按钮才可以点击）

---

• 完整代码

    
    
    
    

    
    
    
    
    
    
    
    
    
    
    


    

        

            

            

                
                

                    
账号登录
                    
申请账号
                    
申请信息查询
                

                
                

                    

                        

                            
管理员登录
                            

                                

                                    账号
                                    
                                
                            
                            

                                

                                    密码
                                    
                                
                            
                            

                            登录
                        
                    
                    

                        

                            
管理员申请
                            

                                

                                

                                    

                                        

                                            名称
                                            
                                        
                                    
                                    

                                        

                                            账号
                                            
                                        
                                    
                                    

                                        

                                            密码
                                            
                                        
                                    
                                    

                                        

                                            昵称
                                            
                                        
                                    
                                    

                                        

                                            

                                                

                                                    年龄
                                                    
                                                
                                            
                                        
                                        

                                            

                                                

                                                    性别
                                                    
                                                    
                                                    

                                                        请选择 
                                                        

                                                            
男
                                                            

                                                            
女
                                                        
                                                    
                                                
                                            
                                        
                                    
                                    

                                        

                                            

                                                
                                            
                                        
                                    

                                    

                                    提交
                                    


                                    


                                
                                

                            
                        
                    
                    

                        

                            
申请信息查询
                            

                                请输入查询账号
                                
                                搜索
                            
                            

                            

                                

                                    

                                    

                                        
申请时间
                                        
申请标题
                                        
申请内容
                                        
申请状态
                                    
                                    
                                    


                                    
                                
                            
                            

                            

                        

                    
                


            
            

        
    

---

解释一下

md5.js	//密码加密 var password = $('#loginForm input[name=password]').val(); $('#loginForm input[name=password]').val($.md5(password)) 页面密码加密传输
layer.js	友好型提示
bootstrapValidator.min.js	bootstarp的校验插件，详见上文

 

• 本页面是基于bootstarp做的，所以要引入bootstarp的js和css才可以出来一上效果
• 所有外部文件(common.js 是自己定义的，这个可以不要)