微学网

热门关键词:   as  thinkphp  ecshop  xxx  php分页  商务通
热门: ASP.NET PHP编程 ASP编程 JSP编程 Python

bootstrapValidator表单自定义验证的案例

发布时间:2020-03-19 来源:未知 点击:
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;
}
 

这就是微学网-程序员之家为你提供的"bootstrapValidator表单自定义验证的案例"希望对你有所帮助.本文来自网络,转载请注明出处:http://www.weixuecn.cn/article/10763.html

上一篇:bootstrap 按钮居中

下一篇:没有了

网络编程 | 前端制作 | 数据库 | CMS教程 | 脚本编程 | 框架 | 微信公众号 | 小程序 | 服务器 | APP开发 |

凡本网站转载的文章、图片等资料的版权归版权所有人所有,因无法和版权所有者一一联系,如果本网站选取的文/图威胁到您的权益,请您及时和本网站联系。 我们会在第一时间内采取措施,避免给双方造 成不必要的损失。
© 2015-2018 微学网 版权所有,并保留所有权利。 备案号:粤ICP备09051474号-1

电脑版 | 移动版