BootstrapValidator，简单而实用的表单验证插件

水深无声 2021-11-26 08:14 583阅读 0赞

Bootstrap是现在非常流行的一款前端框架，这篇来介绍一款基于Bootstrap的验证插件BootstrapValidator。

先来看一下效果图（样式是不是还不错O(∩\_∩)O哈哈~）。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70][]

Bootstrapvalidator下载地址：[https://github.com/nghuuphuoc/bootstrapvalidator/][https_github.com_nghuuphuoc_bootstrapvalidator]

### 引入对应的CSS和JS ###

### 添加验证规则 ###

**使用HTML添加验证。**

对某一个标签添加验证规则，需要放在<div class="form-group"></div>标签中，input标签必须有name属性值，此值为验证匹配的字段。其实就是要符合bootstrap表单结构。

初始化bootstrapValidator。

效果图。

![20200204134054174.png][]

使用data-bv-notempty 和 data-bv-notempty-message属性就可以简单进行非空验证。data-bv-notempty 有值就进行非空验证，data-bv-notempty-message 中的值为提示消息。

**使用JS添加验证**

HTML样式代码。

<div class="form-group">
        <label class="col-md-2 control-label">姓名</label>
        <div class="col-md-6">
            <input type="text" class="form-control" name="name" />
        </div>
    </div>
    <div class="form-group">
        <label class="col-md-2 control-label">年龄</label>
        <div class="col-md-6">
            <input type="text" class="form-control" name="age" />
        </div>
    </div>
    <div class="form-group">
        <label class="col-md-2 control-label">电话</label>
        <div class="col-md-6">
            <input type="text" class="form-control" name="phoneNumber" />
        </div>
    </div>
    <div class="form-group">
        <label class="col-md-2 control-label">Email</label>
        <div class="col-md-6">
            <input type="text" class="form-control" name="email" />
        </div>
    </div>
    <div class="form-group">
        <label class="col-md-2 control-label">密码</label>
        <div class="col-md-6">
            <input type="text" class="form-control" name="pwd" />
        </div>
    </div>
    <div class="form-group">
        <label class="col-md-2 control-label">确定密码</label>
        <div class="col-md-6">
            <input type="text" class="form-control" name="pwd1" />
        </div>
    </div>

JS验证代码，其中fields属性中的值，需要和HTML标签中的name值一样，确定给那个标签添加验证。

效果如下。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70 1][]

### AJAX后台交互验证，验证用户名是否存在。 ###

<div class="form-group">
        <label class="col-md-2 control-label">用户名</label>
        <div class="col-md-6">
            <input type="text" class="form-control" name="username" />
        </div>
    </div>
    
    <script type="text/javascript">
    $('form').bootstrapValidator({
        //默认提示
        message: 'This value is not valid',
        // 表单框里右侧的icon
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'　　　　　　
        },
        submitHandler: function (validator, form, submitButton) {
            // 表单提交成功时会调用此方法
            // validator: 表单验证实例对象
            // form  jq对象  指定表单对象
            // submitButton  jq对象  指定提交按钮的对象
        },
        fields: {
            username: {
                message: '用户名验证失败',
                validators: {
                    notEmpty: {     //不能为空
                        message: '用户名不能为空'
                    },
                    remote: {   //后台验证，比如查询用户名是否存在
                        url: 'student/verifyUsername',
                        message: '此用户名已存在'
                    }
               }
            }
        }
    });
    </script>

后台验证返回格式必须为\{“valid”, true or false\} 的json数据格式。后台verifyUsername验证判断方法。

@RequestMapping(value="/verifyUsername")
    @ResponseBody
    public Map verifyUsername(String username){
        Student stu = studentService.findByUsername(username);
        Map map = new HashMap();
        if (stu == null) {
            map.put("valid", true);
        }else{
            map.put("valid", false);
        }
        return map;
    }

效果如下。

![20200204134832416.png][]

下面是几个比较常见的验证规则。

1.  notEmpty：非空验证；
2.  stringLength：字符串长度验证；
3.  regexp：正则表达式验证；
4.  emailAddress：邮箱地址验证（都不用我们去写邮箱的正则了~~）
5.  base64：64位编码验证；
6.  between：验证输入值必须在某一个范围值以内，比如大于10小于100；
7.  creditCard：身份证验证；
8.  date：日期验证；
9.  ip：IP地址验证；
10. numeric：数值验证；
11. url：url验证；
12. callback：自定义验证

### Form表单的提交 ###

关于提交，可以直接用form表单提交即可。

也可以通过AJAX提交，提交按钮代码和form表单的提交按钮代码一样，通过id选中按钮绑定点击事件提交。

$("#btn").click(function () {   //非submit按钮点击后进行验证，如果是submit则无需此句直接验证
        $("form").bootstrapValidator('validate');   //提交验证
        if ($("form").data('bootstrapValidator').isValid()) {   //获取验证结果，如果成功，执行下面代码
            alert("yes");   //验证成功后的操作，如ajax
        }
    });

效果图，这里验证通过后通过弹框提示的，方法中可以写AJAX提交代码。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70 2][]

页面完整代码。

到这里，BootstrapValidator验证插件的方法已经写的很全面了。不足地方欢迎大家下方留言指出！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70]: /images/20211126/604ed205de0f4834a83ffc84dcc544fe.png
[https_github.com_nghuuphuoc_bootstrapvalidator]: https://github.com/nghuuphuoc/bootstrapvalidator/
[20200204134054174.png]: /images/20211126/2d175fe1ab3147c1a7124a7b3627bf01.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70 1]: /images/20211126/ed31ec4bfa144003b2c4241fdce3d2bd.png
[20200204134832416.png]: /images/20211126/2031b1cb910042b09f3bf8dc01a7a858.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70 2]: /images/20211126/123c32f19b854a948d88c695a361ea6d.png