目录
Validform 级联逻辑验证样式展示
在进行表单验证时存在两个输入框联合验证的情况。
验证两者相同
比如简单的情况:两次输入密码,在后次输入密码时可以使用Validform recheck属性
<!--密码-->
<input type="password" value="" name="userpassword" datatype="*6-15" errormsg="密码范围在6~15位之间!" />
<!--确认密码-->
<input type="password" value="" name="userpassword2" datatype="*" recheck="userpassword" errormsg="您两次输入的账号密码不一致!" />
但是recheck只能验证两者是否相同,假如验证两者的大小就需要另辟蹊径。
验证两者不同
本文在借鉴了Validform 的验证形式,提出一种解决方法。
在input输入框后预先增加span标签,验证时动态增减Validform_right,Validform_wrong属性
贴上代码如下:
jsp代码:
<label class="col-md-2 control-label"><span
class="required">*</span> 最小长度 </label>
<div class="col-md-4">
<sf:input path="tagMinlength" id="tagMinlength" maxlength="10" onmouseout="onmin()"
cssClass="form-control Validform_input" placeholder="最小长度" sucmsg=""/>
<span></span>
</div>
<label class="col-md-2 control-label"> <span
class="required">*</span>最大长度</label>
<div class="col-md-4">
<sf:input path="tagMaxlength" id="tagMaxlength"
maxlength="10" cssClass="form-control Validform_input" onmouseout="onmax()"
placeholder="最大长度" />
<span></span>
</div>
js代码:
function onmin(){
var max = $("#tagMaxlength").val();
var min = $("#tagMinlength").val();
if(parseInt(min)<=parseInt(max)){
$('#tagMinlength').next().removeClass("Validform_wrong ");
$('#tagMinlength').next().addClass("Validform_right");
$('#tagMaxlength').next().removeClass("Validform_wrong Validform_checktip");
$('#tagMaxlength').next().addClass("Validform_checktip Validform_right");
}else{
$('#tagMinlength').next().removeClass("Validform_right");
$('#tagMinlength').next().addClass("Validform_wrong");
$('#tagMinlength').next().text("最小长度应小于等于最大长度");
}
}
function onmax(){
var max = $("#tagMaxlength").val();
var min = $("#tagMinlength").val();
if(parseInt(min)<=parseInt(max)){
$('#tagMinlength').next().removeClass("Validform_wrong ");
$('#tagMinlength').next().addClass(" Validform_right");
$('#tagMaxlength').next().removeClass("Validform_wrong ");
$('#tagMaxlength').next().addClass(" Validform_right");
}else{
$('#tagMaxlength').next().removeClass(" Validform_right");
$('#tagMaxlength').next().addClass("Validform_wrong ");
$('#tagMaxlength').next().text("最大长度应大于等于最小长度");
}
}
其中使用了:
- onmouseout事件
事件会在鼠标指针移出指定的对象时发生。
html还有其他属性事件,onblur等 - next方法
查找每个段落的下一个同胞元素,仅选中类名为 “selected” 的段落:
$("p").next(".selected").css("background", "yellow");