html代码
<form id="login-form" method="post"> <fieldset> <label class="block clearfix"> <span class="block input-icon input-icon-right"> <input type="text" name="user" class="form-control" placeholder="用户名" /> <i class="icon-user"></i> </span> </label> <label class="block clearfix"> <span class="block input-icon input-icon-right"> <input type="password" name="password" class="form-control" placeholder="密码" /> <i class="icon-lock"></i> </span> </label> <label class="block clearfix"> <input type="text" name="code" id="code" class="span4 form-control" placeholder="验证码" /> <img title="验证码" id="verify_code" src="<{$basepath}>admin/login/code" style="vertical-align:top"> </label> <div class="space"></div> <div class="clearfix"> <label class="inline"> <input type="checkbox" class="ace" /> <span class="lbl"> 一周内免登陆</span> </label> <button type="submit" class="width-35 pull-right btn btn-sm btn-primary"> <i class="icon-key"></i> 登陆 </button> </div> <div class="space-4"></div> </fieldset> </form>
js验证代码
$('#login-form').validate({ errorElement: 'div', errorClass: 'help-block', focusInvalid: false, rules: { user: { required: true }, password: { required: true }, code: { required: true } }, invalidHandler: function (event, validator) { //display error alert on form submit }, highlight: function (e) { $(e).closest('label').removeClass('has-info').addClass('has-error'); }, success: function (label,e) { $(e).closest('label').removeClass('has-error').addClass('has-info'); }, errorPlacement: function (error, element) { }, submitHandler: function (form) { }, invalidHandler: function (form) { } });
html代码中没有什么特别说明,主要是js中的highlight实现高亮,而屏蔽提示信息,写了一个空的errorPlacement。
success中用于移除高亮,其中注意它的两个参数,官方文档上说明了是两个文档,但是没有示例。
如上js代码,e返回的是提示信息的标签,如果屏蔽了,继续用e来作为选择器的基础就会出错。
------------正 文 已 结 束, 感 谢 您 的 阅 读 (折雨的天空)--------------------
转载请注明本文标题和链接:《jQuery Validation Plugin验证插件,仅高亮提示框,不给出提示信息》
发表评论