bootstrap菜鸟教程:表单自定义验证

图标

豆瓜

豆瓜网

豆瓜网专栏

豆瓜 图标 2021-04-08 10:53:21

1、Bootstrap:Form 表单

在WEB开发过程中,经常遇到需要做表单提交,良好的提示增加用户体验感。在Bootstrap UI使用表单验证,构建登录界面。

 

 

2、Bootstrap:引用相关JS和CSS

<link href="${ctxPath}/static/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">

<link href="${ctxPath}/static/css/font-awesome.css?v=4.4.0" rel="stylesheet">

<link href="${ctxPath}/static/css/plugins/validate/bootstrapValidator.min.css" rel="stylesheet" />

<link href="${ctxPath}/static/css/login.css" rel="stylesheet">

<script src="${ctxPath}/static/js/jquery.min.js"></script>

<script src="${ctxPath}/static/js/plugins/validate/bootstrapValidator.min.js"></script>

 

3、Bootstrap:Html添加Form表单

<form id="loginForm" class="m-t" role="form" action="${ctxPath}/login" method="post">

<div class="form-group">

    <div class="input-group" style="text-align: left">

        <span class="input-group-addon">

   <span class="glyphicon glyphicon-user"></span>

        </span>

        <input type="text" name="username" class="form-control" placeholder="用户名" required="">

    </div>

</div>

<div class="form-group">

    <div class="input-group" style="text-align: left">

        <span class="input-group-addon">

    <span class="glyphicon glyphicon-eye-open"></span>

        </span>

        <input type="password" name="password" class="form-control" placeholder="密码" required="">

    </div>

</div>

 

<button type="submit" name="submit" class="btn btn-primary block full-width m-b">登 录</button>

</p>

</form>

 

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

 

<script src="${ctxPath}/static/modular/login/login.js"></script>

1

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表单验证效果

 

注意:有些错误无法自定义居左居右还是居中。

通过浏览器调试工具,如图所示

 

然后在login.css重写Class=“help-block” 的样式,你可以自定义居中居左还是居右。注意css引用顺序,重载login.css应放在最后引用。

 

.help-block

{

    text-align: left;

}


本文由豆瓜网专栏作家 豆瓜 投稿发布,并经过豆瓜网编辑审核。

转载此文章须经作者同意,并附上出处(豆瓜网)及本页链接。

若稿件文字、图片、视频等内容侵犯了您的权益,请联系本站进行 投诉处理

相关搜索

bootstrap菜鸟教程
图标 图标

豆瓜

豆瓜网

豆瓜网专栏

  • 近年中国汽车消费者报告

    图标
    卤卤 图标 · 今天 15:48:13 · 0浏览
  • 拼多多腾讯互攻

    图标
    卤卤 图标 · 今天 15:43:35 · 19浏览
  • 虎牙斗鱼的财报

    图标
    卤卤 图标 · 今天 15:37:17 · 12浏览
  • 全部评论

    豆瓜

    豆瓜网

    豆瓜网专栏

  • ubuntu下载安装说明
  • linux查看nginx路径目录说明
  • 正则不区分大小写说明
  • 菜鸟教程mysql:数据查询语言(DQL)与...
  • redis集群配置;redis-cluste...
  • 我来说两句