Validform 级联逻辑验证样式展示

目录

  • 目录
  • 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");

你可能感兴趣的:(javaweb,validform级联验证)