BootstrapValidator就是漂亮

BootstrapValidator的validator真心漂亮。

效果图

使用

<input type="text" style="" class="form-control" id="j_username" name="username" placeholder="请输入会员编号" autocomplete="off" data-bv-notempty />

1. html的时候使用的data-bv-notempty
2. 当然你也可以使用js，你可以参照官网，我这里想说的是下面的一点。

加载

<link type="text/css" rel="stylesheet" href="${ctx}/components/validate/css/bootstrapValidator.css" />
<script type="text/javascript" src="${ctx}/components/validate/js/bootstrapValidator.js"></script>
<script type="text/javascript" src="${ctx}/components/validate/js/language/zh_CN.js"></script>

加载文件就不说了，下载也可以到官网。

然后当页面加载完了以后，要开启bootstrap的validate功能。

$(function() {
    initUI();
    });

function initUI(_box) {
    var $p = $(_box || document);
// 验证
    $('form', $p).each(function(){
        var $this = $(this);
        $this.bootstrapValidator();
    });
    }

1. 这样使用的是validate的默认方法，当然可以指定自己的validate参数，你也可以参考官网。
2. 加载验证完了，很重要的一步就是在点击提交的时候进行验证，当然我的是基于我整个系列文章的说明。

function validateCallback(form, callback, confirmMsg) {
    var $form = $(form);

    if (!$form.data('bootstrapValidator').isValid()) {
        return false;
    }
    }

<form class="" action="${ctx}/mem/login?callbackType=forward" method="post"
                    onsubmit="return validateCallback(this, tabAjaxDone)">

相关文章

• jfinalbootstrap
• BootstrapValidator

笑对现实的无奈，不能后退的时候，不再傍徨的时候，永远向前　路一直都在──陈奕迅《路一直都在》
本文出自:【沉默王二的博客】