VaildForm 自定義提示消息

ValidForm插件提供了7種提示效果，其中有四種自定義效果，具體訪問地址：http://validform.rjboy.cn/demo.html

個人偏愛其中兩種，即

l 提示效果四：【自定義提示效果】右側提示，ajax提交時不彈出提示層

l 提示效果五：【自定義提示效果】固定位置顯示提示信息

效果四：

 

設置提示位置：    

tiptype:function(msg,o,cssctl){
   //msg：提示信息;
   //o:{obj:*,type:*,curform:*}, 
   // obj指向的是當前驗證的表單元素（或表單對象），
   // type指示提示的狀態，值為1、2、3、4，
   //     1：正在檢測/提交數據，
   //     2：通過驗證，
   //     3：驗證失敗，
   //     4：提示ignore狀態, 
   // curform為當前form對象;
  //cssctl:內置的提示信息樣式控制函數，該函數需傳入兩個參數：顯示提示信息的對象 和 當前提          示的狀態（既形參o中的type）;
   if(!o.obj.is("form")){//驗證表單元素時o.obj為該表單元素，全部驗證通過提交表單時        
                          o.obj為該表單對象;
        var objtip=o.obj.siblings(".Validform_checktip");
        cssctl(objtip,o.type);
        objtip.text(msg);
      }else{
        var objtip=o.obj.find("#msgdemo");
        cssctl(objtip,o.type);
        objtip.text(msg);
     }
  }

 

html代碼：

<form class="registerform" action="ajax_post.php">
    <table width="100%" style="table-layout:fixed;">
        <tbody>
        <tr>
            <td class="need" style="width:10px;">*</td>
            <td style="width:70px;">昵稱：</td>
            <td>
                <input class="inputxt Validform_error" type="text" errormsg="昵稱至少6個字符,最多18個字符！" ajaxurl="valid.php" datatype="s6-18" name="name" value="">
                <div class="Validform_checktip Validform_wrong">昵稱至少6個字符,最多18個字符！</div>
            </td>
        </tr>
        <tr>
            <td class="need">*</td>
            <td>密碼：</td>
            <td>
                <input class="inputxt Validform_error" type="password" errormsg="密碼范圍在6~16位之間！" nullmsg="請設置密碼！" datatype="*6-16" name="userpassword" value="">
                <div class="Validform_checktip Validform_wrong">密碼范圍在6~16位之間！</div>
            </td>
        </tr>
        <tr>
            <td class="need">*</td>
            <td>確認密碼：</td>
            <td>
                <input class="inputxt" type="password" errormsg="您兩次輸入的賬號密碼不一致！" nullmsg="請再輸入一次密碼！" recheck="userpassword" datatype="*" name="userpassword2" value="">
                <div class="Validform_checktip">兩次輸入密碼需一致</div>
            </td>
        </tr>
        <tr>
            <td class="need"></td>
            <td></td>
            <td style="padding:10px 0 18px 0;">
                <input type="submit" value="提 交">
                <input type="reset" value="重 置">
                <span id="msgdemo" style="margin-left:30px;"></span>
            </td>
        </tr>
        </tbody>
    </table>
</form>

效果五：

設置提示位置：

 tiptype:function(msg,o,cssctl){
        var objtip=$("#msgdemo2");
        cssctl(objtip,o.type);
        objtip.text(msg);
    } 

Html代碼：

<form class="registerform" action="ajax_post.php">
    <table width="100%" style="table-layout:fixed;">
        <tbody>
        <tr>
            <td class="need" style="width:10px;">*</td>
            <td style="width:70px;">昵稱：</td>
            <td style="width:205px;">
                <input class="inputxt Validform_error" type="text" errormsg="昵稱至少6個字符,最多18個字符！" nullmsg="請輸入昵稱！" ajaxurl="valid.php" datatype="s6-18" name="name" value="" sucmsg="驗證通過！">
            </td>
            <td></td>
        </tr>
        <tr>
            <td class="need">*</td>
            <td>密碼：</td>
            <td>
                <input class="inputxt" type="password" errormsg="密碼范圍在6~16位之間！" nullmsg="請設置密碼！" datatype="*6-16" name="userpassword" value="">
            </td>
            <td></td>
        </tr>
        <tr>
            <td class="need">*</td>
            <td style="width:205px;">確認密碼：</td>
            <td>
                <input class="inputxt" type="password" errormsg="您兩次輸入的賬號密碼不一致！" nullmsg="請再輸入一次密碼！" recheck="userpassword" datatype="*" name="userpassword2" value="">
            </td>
            <td></td>
        </tr>
        <tr>
            <td class="need"></td>
            <td></td>
            <td style="padding:10px 0 18px 0;" colspan="2">
                <input type="submit" value="提 交">
                <input type="reset" value="重 置">
                <span id="msgdemo2" class="Validform_checktip Validform_wrong" style="margin-left:30px;">昵稱至少6個字符,最多18個字符！</span>
            </td>
        </tr>
        </tbody>
    </table>
</form>