Bootstrap：bootstrapValidator表单自定义验证

青旅半醒 2024-04-20 12:20 71阅读 0赞

###### 1、Bootstrap：Form 表单 ######

在WEB开发过程中，经常遇到需要做表单提交，良好的提示增加用户体验感。在Bootstrap UI使用表单验证，构建登录界面。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpc2hhbmdrZQ_size_16_color_FFFFFF_t_70]

###### 2、Bootstrap：引用相关JS和CSS ######

###### 3、Bootstrap：Html添加Form表单 ######

在HTML尾部引用当前登录界面的login.js

###### 4、Bootstrap：添加login.js中bootstrapValidator 自定义验证 ######

$(function () {
        $('#loginForm').bootstrapValidator({
            message: 'This value is not valid',
            //提供输入验证图标提示
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                username: {
                    message: '用户名验证失败',
                    validators: {
                        notEmpty: {
                            message: '用户名不能为空'
                        },
                         stringLength: {
                             min: 6,
                             max: 30,
                             message: '用户名长度必须在4到12之间'
                         },
                         threshold :  4 , //设置4字符以上开始请求服务器
                         //有待验证，备注以备下次使用。
                         //bootstrap的remote验证器需要的返回结果一定是json格式的数据 :
                         //{"valid":false} //表示不合法，验证不通过
                         //{"valid":true} //表示合法，验证通过
                         remote: {//发起Ajax请求。
                             url: 'user/name',//验证地址
                              data:{userName:$('input[name="userName"]').val() }
                             message: '用户已存在',//提示消息
                             delay :  2000,//设置2秒发起名字验证
                             type: 'POST' //请求方式
                         }
                    }
                },
                password: {
                    validators: {
                        notEmpty: {
                            message: '密码不能为空'
                        },
                        stringLength: {
                            min: 6,
                            max: 18,
                            message: '密码长度必须在6到12位之间'
                        },
                        regexp: {
                            regexp: /^[a-zA-Z0-9_]+$/,
                            message: '密码只能包含大写、小写、数字和下划线'
                        }
                    }
                }
            }
        })
        .on('success.form.bv', function(e) {//点击提交之后
    	     e.preventDefault();
    	     var $form = $(e.target);
    	     var bv = $form.data('bootstrapValidator');
    	
    	     // Use Ajax to submit form data 提交至form标签中的action，result自定义
    	     $.post($form.attr('action'), $form.serialize(), function(result) {
    	     	 //恢复submit按钮disable状态。
    	         $('#loginForm').bootstrapValidator('disableSubmitButtons', false);
    	         //do something...
    	     });
        });
    });

###### 5、Bootstrap：From表单验证效果 ######

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpc2hhbmdrZQ_size_16_color_FFFFFF_t_70 1]  
**注意：有些错误无法自定义居左居右还是居中。**  
通过浏览器调试工具，如图所示  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpc2hhbmdrZQ_size_16_color_FFFFFF_t_70 2]  
然后在login.css重写Class=“help-block” 的样式，你可以自定义居中居左还是居右。注意css引用顺序，重载login.css应放在最后引用。

.help-block
    {
        text-align: left;
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpc2hhbmdrZQ_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/ee0cfd1c80ed4755958c097fad47f101.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpc2hhbmdrZQ_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/1eda6cb63f234c09b6a234f0f28abd9f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpc2hhbmdrZQ_size_16_color_FFFFFF_t_70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/c6ef0985cbb44a8186681ef2a2295c42.png