本文實例講述了jquery.validate提示錯誤信息位置方法。分享給大家供大家參考，具體如下：
好長時間沒有用jquery.validate.js這個插件了，忘得差不多了。唉，好東西還是要經常拿出來看看的，今天用jquery.validate來做一個小東西，遇到一個問題，就是錯誤提示信息的位置問題，如果知道的話，很簡單。以前遇到過，可是忘了，現在標記一下，將來在忘了，在回過頭看看。俗話說的好，好記性不如爛筆頭。
舉個例子，大家就知道怎么回事了。
rules: {name:{required:true,rangelength:[1,20]},validateCode: {required:true,number:true,rangelength:[5,5]}},messages: {name: {required: "請輸入命令名",rangelength: jQuery.format("長度請控制在{0} ~ {1}")},validateCode: {required: "請輸入驗證碼",number: "請輸入數字",rangelength: jQuery.format("長度必須是5位")}},success: function(label) {label.addClass("error checked");},submitHandler: function(form) {if($("#RegionId").val() == '0'){$("#citySelect").attr("class","error").html('請選擇區域').show();$("#RegionId").attr("class","error");}else{$("#RegionId").attr("class","valid");$("#citySelect").attr("class","valid").html('success').show();form.submit();}}});在上面的代碼中，我并沒有添加錯誤信息存放位置的方法，我們看一下效果
<td><input type="text" maxlength="30" value="" id="name" name="name"><label for="name" generated="true">請輸入命令名</label>//錯誤信息會自動根在輸入框的后面。</td>
如果我們加上錯誤信息位置的方法errorPlacement來看一下效果是什么樣子的。
rules: {name:{required:true,rangelength:[1,20]},validateCode: {required:true,number:true,rangelength:[5,5]}},messages: {name: {required: "請輸入命令名",rangelength: jQuery.format("長度請控制在{0} ~ {1}")},validateCode: {required: "請輸入驗證碼",number: "請輸入數字",rangelength: jQuery.format("長度必須是5位")}},errorPlacement: function(error, element) { //錯誤信息位置設置方法error.appendTo( element.parent().next() ); //這里的element是錄入數據的對象},success: function(label) {label.addClass("error checked");},submitHandler: function(form) {if($("#RegionId").val() == '0'){$("#citySelect").attr("class","error").html('請選擇區域').show();$("#RegionId").attr("class","error");}else{$("#RegionId").attr("class","valid");$("#citySelect").attr("class","valid").html('success').show();form.submit();}}});來看一下效果
<tr><th><label for="name" id="lname"><code title="必填">*</code>命令名稱</label></th><td><input type="text" maxlength="30" value="" id="name" name="name"></td><td><label for="name" generated="true">請輸入命令名</label></td>//錯誤信息跑到這兒來了，</tr>
夠簡單吧，在簡單的東西，長時間不用也會忘的。
更多關于jQuery插件相關內容感興趣的讀者可查看本站專題：《jQuery常用插件及用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
新聞熱點
疑難解答
