Pantalla de estilo de verificación de lógica en cascada de forma válida

Directorio

Pantalla de estilo de verificación de lógica en cascada de forma válida

Al realizar la verificación del formulario, hay casos en los que se verifican conjuntamente dos cuadros de entrada.

Verifique que ambos sean iguales

Por ejemplo, el caso simple: ingrese la contraseña dos veces, y puede usar el atributo Validform recheck cuando ingrese la contraseña la próxima vez

<!--密码-->
<input type="password" value="" name="userpassword" datatype="*6-15" errormsg="密码范围在6~15位之间！" />
<!--确认密码-->
<input type="password" value="" name="userpassword2" datatype="*" recheck="userpassword" errormsg="您两次输入的账号密码不一致！" />

Pero volver a verificar solo puede verificar que los dos son iguales. Si verifica el tamaño de los dos, necesita encontrar otra forma.

Verifique que los dos sean diferentes

Este artículo se basa en el formulario de validación de Validform y propone una solución.
Después de que el rango de entrada se incrementa en la caja de entrada de antemano, los cambios dinámicos en la verificación Validform_right, Validform_wrong atributo
pegar el código es el siguiente:
Código 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>

código 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("最大长度应大于等于最小长度"); 
    }
}

Que utiliza:

• El evento onmouseout
  ocurre cuando el puntero del mouse se mueve fuera del objeto especificado.
  HTML tiene otros eventos de atributos, onblur, etc.
• El siguiente método
  encuentra el siguiente elemento hermano de cada párrafo y solo selecciona el párrafo llamado "seleccionado":

$("p").next(".selected").css("background", "yellow");