Validform 级联逻辑验证样式展示

目录

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");