折雨的天空

新浪微薄腾讯微薄

最新碎语:最近霉到了住。哎。。。

您的位置:折雨的天空 >其他技术> jQuery Validation Plugin验证插件,仅高亮提示框,不给出提示信息

jQuery Validation Plugin验证插件,仅高亮提示框,不给出提示信息

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验证插件,仅高亮提示框,不给出提示信息

奖励一下

取消

分享不易,烦请有多多打赏,如您也困难,点击右边关闭即可!

扫码支持
扫码打赏,5元,10元,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

-秒后自动关闭,如已打赏,或者不愿打赏,请点击右上角关闭图标。

发表评论

路人甲 表情
看不清楚?点图切换

网友评论(1)

传递正能量,支持一下博主
电子阅读器 10年前 (2014-01-06) 回复