jQuery Validate自定義錯誤資訊顯示位置

admin發表於2019-02-14
jQuery
在預設條件下，錯誤是顯示在對應的表單元素後面的。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
ul li{
  list-style:none;
  margin-top:5px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://www.softwhy.com/demo/jQuery/js/jquery.validate.js"></script>
<script src="http://www.softwhy.com/demo/jQuery/js/messages_zh.js"></script>
<script>
$(document).ready(function () {
  $("#myform").validate({
    rules: {
      username: "required",
      pw: "required",
      email: {
        required: true,
        email:true
      }
    },
    messages: {
      name: "使用者名稱是必填專案",
      pw: "密碼是必填專案",
      email: {
        required: "郵箱是必填專案",
        email:"郵箱格式不正確"
      }
    }
  });
});
</script>
</head>
<body>
<form id="myform">
  <ul>
    <li>姓名:<input type="text" name="username"/></li>
    <li>密碼:<input type="password" name="pw"/></li>
    <li>郵箱:<input type="text" name="email"/></li>
    <li>
      <input type="submit" value="提交"/>
      <input type="reset" value="重置"/>
    </li>
  </ul>
</form>
</body>
</html>

錯誤預設是用label標籤包裹，並且位於對應表單元素的後面，截圖如下:

a:3:{s:3:\"pic\";s:43:\"portal/201902/14/210646w8i6rkiw2d0860d2.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

當然我們也可以自定義錯誤的顯示位置，下面就通過程式碼例項做一下介紹。

一.通過errorPlacement()方法實現:

此方法接受兩個引數，第一個引數是存放錯誤資訊的元素物件，第二個引數是當前表單元素物件。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
#thetable { 
  font-size:12px; 
} 
#thetable td { 
  width:40px; 
  height:30px; 
  line-height:30px; 
  text-align:center; 
}
#thetable tr > td:nth-of-type(3) {
  width:120px;
  text-align:left;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://www.softwhy.com/demo/jQuery/js/jquery.validate.js"></script>
<script src="http://www.softwhy.com/demo/jQuery/js/messages_zh.js"></script>
<script>
$(document).ready(function () {
  $("#myform").validate({
    errorPlacement: function(error, element) {
      error.appendTo(element.parent("td").next("td"));
    },
    rules: {
      username: "required",
      pw: "required",
      email: {
        required: true,
        email:true
      }
    },
    messages: {
      name: "使用者名稱是必填專案",
      pw: "密碼是必填專案",
      email: {
        required: "郵箱是必填專案",
        email:"郵箱格式不正確"
      }
    }
  });
});
</script>
</head>
<body>
<form id="myform">
<table id="thetable">
  <tr>
    <td>姓名:</td> 
    <td><input type="text" name="username"/></td>
    <td></td>
  </tr>
  <tr>
    <td>密碼:</td>
    <td><input type="password" name="pw" /></td>
    <td></td>
  </tr>
  <tr>
    <td>郵箱:</td>
    <td><input type="text" name="email"/></td>
    <td></td>
  </tr>
  <tr>
    <td colspan="3">
      <input type="submit" value="提交">
      <input type="reset" value="重置">
    </td>
  </tr>
</table>
</form>
</body>
</html>

上面的程式碼實現了我們的要求，可以將錯誤提示資訊放置於每一行的第三個單元格。

errorPlacement()有兩個引數，第一個是接收錯誤資訊的元素物件，第二是對應的表單元素物件。

二.通過配置錯誤元素和錯誤容器實現:

在預設狀態下，錯誤資訊的容器是label元素，並放置於對應表單元素後面。

這些都是可以進行自定義配置的，先看一段程式碼例項:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
#thetable { 
  font-size:12px; 
} 
#thetable td { 
  width:40px; 
  height:30px; 
  line-height:30px; 
  text-align:center; 
}
#thetable tr > td:nth-of-type(3) {
  width:120px;
  text-align:left;
}
span.error {
  color:red
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://www.softwhy.com/demo/jQuery/js/jquery.validate.js"></script>
<script src="http://www.softwhy.com/demo/jQuery/js/messages_zh.js"></script>
<script>
$(document).ready(function () {
  $("#myform").validate({
    errorClass: "error",
    errorElement: "span",
    wrapper: "li",
    errorLabelContainer: $("#ant ul"),
    errorContainer: $("#ant"),
    rules: {
      username: "required",
      pw: "required",
      email: {
        required: true,
        email:true
      }
    },
    messages: {
      name: "使用者名稱是必填專案",
      pw: "密碼是必填專案",
      email: {
        required: "郵箱是必填專案",
        email:"郵箱格式不正確"
      }
    }
  });
});
</script>
</head>
<body>
<div id="ant">
  <ul></ul>
</div>
<form id="myform">
<table id="thetable">
  <tr>
    <td>姓名:</td> 
    <td><input type="text" name="username"/></td>
    <td></td>
  </tr>
  <tr>
    <td>密碼:</td>
    <td><input type="password" name="pw" /></td>
    <td></td>
  </tr>
  <tr>
    <td>郵箱:</td>
    <td><input type="text" name="email"/></td>
    <td></td>
  </tr>
  <tr>
    <td colspan="3">
      <input type="submit" value="提交">
      <input type="reset" value="重置">
    </td>
  </tr>
</table>
</form>
</body>
</html>

上面的程式碼實現了我們的要求，下面先對配置資訊做一下介紹:

（1）.errorElement:規定資訊放置的元素。

（2）.wrapper:規定直接包裹errorElement的元素。

（3）.errorLabelContainer:規定包裹wrapper的元素。

（4）.errorContainer:包裹錯誤資訊最外層的元素。

（5）.errorClass:為errorElement元素新增的樣式類。

內部執行流程:

（1）.首先在errorLabelContainer下查詢是否具有errorClass樣式類的label元素（並且此元素的for屬性值等於對應表單元素的name屬性值），如果沒有查詢到，則在當前form元素下查詢；如果查詢到，則將錯誤資訊放置於此label元素中。

（2）.如果沒有label元素，那麼建立errorElement規定的元素物件，併為其新增errorClass規定的class樣式類，然後將其用wrapper元素包裹（特別說明:這個時候元素物件僅存在與記憶體之中，還沒有在頁面中顯示）；然後在頁面查詢是否存在labelContainer規定的元素，如果存在就將其放置於其中（當然如果也存在errorContainer規定的元素，那麼都放置於此元素之中）。如果頁面中沒有labelContainer規定的元素，那麼使用errorPlacement()方法來規定錯誤資訊的位置。如果上述條件都不滿足，那麼就將錯誤資訊放置於當前表單元素之後。

相關文章