jQuery表单验证插件bootstrapValidator使用方法及规则总结

最新推荐文章于 2022-12-07 15:57:11 发布

imHere·

最新推荐文章于 2022-12-07 15:57:11 发布

阅读量697

点赞数

分类专栏：工具

本文链接：https://blog.csdn.net/qq_31754523/article/details/96846320

版权

工具专栏收录该内容

13 篇文章 0 订阅

订阅专栏

一.首先引入BootstrapValidator插件

BootstrapValidator插件需要jQuery和Bootstrap 3
引入js和css文件
css：

bootstrap.min.css

bootstrapValidator.min.css

js:

jquery-1.10.2.min.js

bootstrap.min.js

bootstrapValidator.min.js

二.一个简单的例子

$(function () {
    /*初始化校验插件*/
    /*1.是form表单结构 并且有一个提交按钮*/
    $('#login').bootstrapValidator({
        /*配置校验的不同状态下显示的图标*/
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        /*需要校验的表单元素 通过名称 name*/
        fields: {
            /*对应表单元素的name*/
            username: {
                /*校验规则 多个校验规则*/
                validators: {
                    notEmpty: {
                        message: '请输入用户名'
                    },
                    /*配置一个校验规则*/
                    callback:{
                        message:'用户名不存在'
                    }
                }
            },
            password: {
                validators: {
                    notEmpty: {
                        message: '请输入密码'
                    },
                    stringLength: {
                        min: 6,
                        max: 18,
                        message: '密码必须是6-18个字符'
                    },
                    callback:{
                        message:'密码错误'
                    }
                }
            }
        }
    }).on('success.form.bv', function (e) {
        /*校验成功的时候出发*/
        /*组织表单的默认提交  使用ajax提交*/
        e.preventDefault();
        /*后台校验用户名和密码*/
        var $form = $(e.target);
        $.ajax({
            type:'post',
            url:'/employee/employeeLogin',
            data:$form.serialize(),
            dataType:'json',
            success:function (data) {
                /*业务成功*/
                if(data.success == true){
                    /*跳转后台的首页*/
                    location.href = '/admin33/';
                }
                /*业务失败*/
                else {
                    if(data.error == 1000){
                        /*用户名错误*/
                        /*设置用户名这个表单元素的校验状态为失败*/
                        /*NOT_VALIDATED 还没校验, VALIDATING 校验中, INVALID 失败 or VALID 成功*/
                        /*1.获取校验组件*/
                        /*2.调研更改状态的函数*/
                        /*3.校验的表单，改成什么状态，使用哪个校验规则*/
                        $form.data('bootstrapValidator').updateStatus('username','INVALID','callback');
                    }else if(data.error == 1001){
                        /*密码错误*/
                        $form.data('bootstrapValidator').updateStatus('password','INVALID','callback');
                    }
                }
            }
        });
    });
});

三.其它验证案例

$(function(){/* 文档加载，执行一个函数*/
     $('#defaultForm')
     .bootstrapValidator({
         message: 'This value is not valid',
         feedbackIcons: {/*input状态样式图片*/
             valid: 'glyphicon glyphicon-ok',
             invalid: 'glyphicon glyphicon-remove',
             validating: 'glyphicon glyphicon-refresh'
         },
         fields: {/*验证：规则*/
             username: {//验证input项：验证规则
                 message: 'The username is not valid',
                
                 validators: {
                     notEmpty: {//非空验证：提示消息
                         message: '用户名不能为空'
                     },
                     stringLength: {
                         min: 6,
                         max: 30,
                         message: '用户名长度必须在6到30之间'
                     },
                     threshold :  6 , //有6字符以上才发送ajax请求，（input中输入一个字符，插件会向服务器发送一次，设置限制，6字符以上才开始）
                     remote: {//ajax验证。server result:{"valid",true or false} 向服务发送当前input name值，获得一个json数据。例表示正确：{"valid",true}  
                         url: 'exist2.do',//验证地址
                         message: '用户已存在',//提示消息
                         delay :  2000,//每输入一个字符，就发ajax请求，服务器压力还是太大，设置2秒发送一次ajax（默认输入一个字符，提交一次，服务器压力太大）
                         type: 'POST'//请求方式
                         /**自定义提交数据，默认值提交当前input value
                          *  data: function(validator) {
                               return {
                                   password: $('[name="passwordNameAttributeInYourForm"]').val(),
                                   whatever: $('[name="whateverNameAttributeInYourForm"]').val()
                               };
                            }
                          */
                     },
                     regexp: {
                         regexp: /^[a-zA-Z0-9_\.]+$/,
                         message: '用户名由数字字母下划线和.组成'
                     }
                 }
             },
             password: {
                 message:'密码无效',
                 validators: {
                     notEmpty: {
                         message: '密码不能为空'
                     },
                     stringLength: {
                         min: 6,
                         max: 30,
                         message: '用户名长度必须在6到30之间'
                     },
                     identical: {//相同
                         field: 'password', //需要进行比较的input name值
                         message: '两次密码不一致'
                     },
                     different: {//不能和用户名相同
                         field: 'username',//需要进行比较的input name值
                         message: '不能和用户名相同'
                     },
                     regexp: {
                         regexp: /^[a-zA-Z0-9_\.]+$/,
                         message: 'The username can only consist of alphabetical, number, dot and underscore'
                     }
                 }
             },
             repassword: {
                 message: '密码无效',
                 validators: {
                     notEmpty: {
                         message: '用户名不能为空'
                     },
                     stringLength: {
                         min: 6,
                         max: 30,
                         message: '用户名长度必须在6到30之间'
                     },
                     identical: {//相同
                         field: 'password',
                         message: '两次密码不一致'
                     },
                     different: {//不能和用户名相同
                         field: 'username',
                         message: '不能和用户名相同'
                     },
                     regexp: {//匹配规则
                         regexp: /^[a-zA-Z0-9_\.]+$/,
                         message: 'The username can only consist of alphabetical, number, dot and underscore'
                     }
                 }
             },
             email: {
                 validators: {
                     notEmpty: {
                         message: '邮件不能为空'
                     },
                     emailAddress: {
                         message: '请输入正确的邮件地址如：123@qq.com'
                     }
                 }
             },
             phone: {
                 message: 'The phone is not valid',
                 validators: {
                     notEmpty: {
                         message: '手机号码不能为空'
                     },
                     stringLength: {
                         min: 11,
                         max: 11,
                         message: '请输入11位手机号码'
                     },
                     regexp: {
                         regexp: /^1[3|5|8]{1}[0-9]{9}$/,
                         message: '请输入正确的手机号码'
                     }
                 }
             },
             invite: {
                 message: '邀请码',
                 validators: {
                     notEmpty: {
                         message: '邀请码不能为空'
                     },
                     stringLength: {
                         min: 8,
                         max: 8,
                         message: '请输入正确长度的邀请码'
                     },
                     regexp: {
                         regexp: /^[\w]{8}$/,
                         message: '请输入正确的邀请码(包含数字字母)'
                     }
                 }
             },
         }
     })
     .on('success.form.bv', function(e) {//点击提交之后
         // Prevent form submission
         e.preventDefault();

         // Get the form instance
         var $form = $(e.target);

         // Get the BootstrapValidator instance
         var bv = $form.data('bootstrapValidator');

         // Use Ajax to submit form data 提交至form标签中的action，result自定义
         $.post($form.attr('action'), $form.serialize(), function(result) {
//do something...
});
     });
});

四.常见验证类型总结

1.判断字段是否为空

 notEmpty: {
          message: '用户名必填不能为空'
            },

2.字段长度判断

stringLength: {
          min: 6,
          max: 30,
          message: '用户名长度不能小于6位或超过30位'
          },

3.通过正则表达式进行验证

regexp: {
          regexp: /^[A-Z\s]+$/i,
          message: '名字只能由字母字符和空格组成。'
                    }

4.大小写验证

stringCase: {
          message: '姓氏必须只包含大写字符。',
          case: 'upper'//其他值或不填表示只能小写字符
                    },

5.两个字段不相同的判断

different: {
          field: 'password',
          message: '用户名和密码不能相同。'
                    }

6.email验证

emailAddress: {
         message: '填写内容非邮箱地址'
                   }

7.日期格式验证

date: {
         format: 'YYYY/MM/DD',
         message: '日期无效'
                    }

8.纯数字验证

 digits: {
         message: '该值只能包含数字。'
                    }

9.ajax验证

threshold :  6 , //有6字符以上才发送ajax请求，（input中输入一个字符，插件会向服务器发送一次，设置限制，6字符以上才开始）
remote: {//ajax验证。server result:{"valid",true or false} 向服务发送当前input name值，获得一个json数据。例表示正确：{"valid",true}  
    url: 'exist2.do',//验证地址
    message: '用户已存在',//提示消息
    delay :  2000,//每输入一个字符，就发ajax请求，服务器压力还是太大，设置2秒发送一次ajax（默认输入一个字符，提交一次，服务器压力太大）
    type: 'POST'//请求方式

                     },

10.复选框验证

choice: {
                        min: 2,
                        max: 4,
                        message: '请选择2-4项'
                    }

11.密码确认

identical: {
                        field: 'confirmPassword',
                        message: 'The password and its confirm are not the same'
                    },

12.判断输入数字是否符合大于18小于100

greaterThan: {
                        value: 18
                    },
lessThan: {
                        value: 100
                    }

规则总结来自：https://blog.csdn.net/asd245025733/article/details/78061577

其他细节参考 http://www.jb51.net/article/99381.htm

imHere·

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
jQuery表单验证插件bootstrapValidator使用方法及规则总结

一.首先引入BootstrapValidator插件BootstrapValidator插件需要jQuery和Bootstrap 3 引入js和css文件 css： bootstrap.min.css bootstrapValidator.min.css js: jquery-1.10.2.min.js bootstrap.min.js bootstrapVal...
复制链接

扫一扫