最簡單的例子，比如我們有一個表單：
<form action="" method="get" id="frm">
??? <table>
??? ??? <tr>
??? ??? ??? <td>用戶名</td>
??? ??? ??? <td><input type="text" name="username" id="username" /><em>*</em></td>
??? ??? <tr>
??? ??? <tr>
??? ??? ??? <td>電子郵件</td>
??? ??? ??? <td><input type="text" name="email" id="email" /><em>*</em></td>
??? ??? </tr>
??? ??? <tr>
??? ??? ??? <td colspan="2"><input type="submit" value="Go!" /></td>
??? ??? </tr>
??? </table>
</form>
??? 這個表單中，有用戶名和電子郵件兩個字段。他們都為非空， 并且電子郵件需要是格式正確的地址。使用validation最簡單的方式，是引入jquery和jquery validation的js文件。然后分別給兩個input加入class:
??? <input type="text" name="username" id="username" class="required"/>
???? 和
??? <input type="text" name="email" id="email" class="required email" />
???? 然后，在document的read事件中，加入如下方法：
???? <script>
??????? $(document).ready(function(){
??????????????? $("#frm").validate();
??????? }
???? </script>
郵箱Email，如上：class="required email"
字符chars，默認3-18個字符，如上：class="required chars"
電話號碼，默認數字8-11位，如上：class="required phone"
文本區域textarea，如上：class="required"
??? 這樣， 當form被提交的時候，就會根據input指定的class來進行驗證了。如果失敗，form的提交就會被阻止。并且，將提示信息顯示在input的后面。
??? 不過，這樣感覺不太爽，因為驗證規則侵入了我們的html代碼。還有一個方式，便是使用“rules”。我們將input的那些驗證用class刪除掉。然后修改document的ready事件響應代碼：
??? $(document).ready(function(){
??? ??? $("#frm").validate({
??? ??? ??? rules:{
??? ??? ??? ??? username:"required",

???? ??? ??? ??? email:{
??? ??? ??? ??? ??? required:true,
??? ??? ??? ??? ??? email:true
??? ??? ??? ??? ??? }
??? ??? ??? }
??? ????? });
??? });

??? 這樣以來，也能達到相同的效果。
??? 那么，接下的問題，就是顯示的錯誤提示是默認的。我們需要使用自定義的提示：
??? $(document).ready(function(){
??? ??? $("#frm").validate({
??? ??? ??? rules:{
??? ??? ??? ??? username:"required",
??? ??? ??? ??? email:{
??? ??? ??? ??? ??? required:true,
??? ??? ??? ??? ??? email:true
??? ??? ??? ??? ??? }
??? ??? ??? },
??? ??? ??? messages:{
??? ??? ??? ??? username:"請輸入您的用戶名",
??? ??? ??? ??? email:{
??? ??? ??? ??? ??? required:"請輸入您的電子郵件地址",
??? ??? ??? ??? ??? email:"清輸入一個格式正確的電子郵件地址"
??? ??? ??? ??? }
??? ??? ??? }
??? ????? });
??? });

??? 如果，我們希望將錯誤信息裝入input后面的em標簽中呢？我們只需要在validate的options參數中加入errorPlacement項：
??? $(document).ready(function(){
??? ??? $("#frm").validate({
??? ??? ??? rules:{
??? ??? ??? ??? username:"required",
??? ??? ??? ??? email:{
??? ??? ??? ??? ??? required:true,
??? ??? ??? ??? ??? email:true
??? ??? ??? ??? ??? }
??? ??? ??? },
??? ??? ??? messages:{
??? ??? ??? ??? username:function(){},
??? ??? ??? ??? email:{
??? ??? ??? ??? ??? required:"請輸入您的電子郵件地址",

??? ??? ??? ??? ??? email:"清輸入一個格式正確的電子郵件地址"
??? ??? ??? ??? }
??? ??? ??? },
??? ??? ??? errorPlacement:function(error, element){
??? ??? ??? ??? error.appendTo(element.next("em"));
??? ??? ??? }
??? ????? });
??? });

??? 現在，我們給username加上一個最短和最長的限制：
??? $(document).ready(function(){
??????? $("#frm").validate({
??????????? rules:{
??????????????? username:{
??????????????????? required:true,
??????????????????? minlength:3,
??????????????????? maxlength:15
??????????????? },
??????????????? email:{
??????????????????? required:true,
??????????????????? email:true
??????????????????? }
??????????? },
??????????? messages:{
??????????????? username:{
??????????????????? required:"請輸入您的用戶名",
??????????????????? minlength:jQuery.format("用戶名不能少于 {0} 個字符"),
??????????????????? maxlength:jQuery.format("用戶名長度不能超過 {0} 個字符")
??????????????? },
??????????????? email:{
??????????????????? required:"請輸入您的電子郵件地址",
??????????????????? email:"清輸入一個格式正確的電子郵件地址"
??????????????? }
??????????? },
??????????? errorPlacement:function(error, element){
??????????????? error.appendTo(element.next("em"));
??????????? }
????????? });
??? });

另外還有一種簡單的驗證方式

1.除引用jquery.js、jquery.validate.js外，再添加引用jquery.metadata.js

<script language="javascript" type="text/javascript" src="js/jquery.metadata.js"></script>

2.在控件上通過class{}添加驗證規則

<input type="text" name="username" id="username" class="{required:true,messages:{required:'請輸入用戶名'}}" />

<input type="text" name="email" id="email" class="{required:true,email:true,messages:{required:'請輸入電子郵件',email:'電子郵件格式有誤!'}}" />

3.同樣在document的read事件中，加入如下方法：
<script>

??? $(document).ready(function(){

??????? $("#frm").validate();

??? }
</script>

轉載于:https://www.cnblogs.com/linyechengwei/archive/2009/12/09/1620052.html

總結

以上是生活随笔為你收集整理的jquery validate 插件：(2)简单示例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。