Validformカスケードロジック検証スタイルの表示

ディレクトリ

Validformカスケードロジック検証スタイルの表示

フォーム検証を行う際、2つの入力ボックスを共同で検証する場合があります。

両方が同じであることを確認します

たとえば、単純なケース：パスワードを2回入力し、次回パスワードを入力するときにValidform recheck属性を使用できます。

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

ただし、再チェックで確認できるのは2つが同じであることだけです。2つのサイズを確認する場合は、別の方法を見つける必要があります。

2つが異なることを確認する

この記事では、Validformの検証フォームを利用してソリューションを提案します。
入力スパンは、あらかじめ入力ボックスに増加させた後、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などがあります。
• 次のメソッド
  は、各段落の次の兄弟要素を見つけ、「selected」という名前の段落のみを選択します。

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