介紹和代碼

表單驗證無論是前后端都有著比較明顯的需求，在用戶填寫表單的時候，需要給到用戶提示，當用戶輸入的數據滿足預期時給到用戶反饋。之前在學習JS的時候也學習過用正則表達式原生js寫表單驗證，無非是onblur時間發生時通過操作dom元素拿到用戶輸入的數據然后在用正則表達式進行規范，滿足則怎么樣，不滿足則怎么樣。

jQuery Validate 插件為表單提供了強大的驗證功能，讓客戶端表單驗證變得更簡單，同時提供了大量的定制選項，滿足應用程序各種需求。該插件捆綁了一套有用的驗證方法，包括 URL 和電子郵件驗證，同時提供了一個用來編寫用戶自定義方法的 API。所有的捆綁方法默認使用英語作為錯誤信息，且已翻譯成其他 37 種語言。
該插件是由 J?rn Zaefferer 編寫和維護的，他是 jQuery 團隊的一名成員，是 jQuery UI 團隊的主要開發人員，是 QUnit 的維護人員。該插件在 2006 年 jQuery 早期的時候就已經開始出現，并一直更新至今。目前版本是 1.14.0

看了介紹就能清楚的知道，JQuery-validate依賴于jQuery，所以在使用的時候我們自然需要引入對應的css和js包，然后就是他自己特有的js和css，

代碼

<div class="container" v-show="showEdit"> <div class="row"> <form class="form-horizontal" v-model="user" id="form-user"><div class="form-group"><label class="col-sm-3 control-label" >登錄名稱：</label><div class="col-sm-9"><input type="text" name="loginName" v-model="user.loginName" class="form-control" placeholder="請輸入登錄名稱"></div></div></form></div></div>

首先因為是表單驗證，當然是要給form加一個id值作為標識。
接下來就是js部分,這個驗證函數放在進入這個頁面的點擊事件中，也就是點擊進入到頁面就執行函數。

handleSubmit:function(){$("#form-user").validate({rules:{loginName:{required:true,//這是必填的//具體規則直接菜鳥查 也存在著許多默認規則直接用//remote:"check.php"//使用ajax方法調用check.php驗證輸入值 這就是可以連接到后端在后端做驗證rangelength:[5,10]} },messages:{loginName:{required:"用戶名不能為空",//定制寫法rangelength:"登錄名長度只能在5~10之間"}},submitHandler:function(){alert("提交")},}) },

具體用法：先通過id找到表單，調用validate方法，方法里有一個重要的屬性叫rules（規則）,然后這個屬性也是一個對象，對象里面裝的是需要進行驗證的屬性，屬性是控件的name，本例控件name是loginName，所以將其填上，他也是一個對象，對象里面是validate內置的屬性，例如required:true。意思就是不能為空。而rangelength[5,10]則是長度在5~10之間。
下面還有一個messages屬性，可以自定義提示信息

具體用法也很簡單，不再贅述。值得注意的是他有一個內置的函數submitHandler，表單中提交按鈕的函數。直接可以使用。將來用來提交表單的具體代碼可以放進去。

值得注意的是：

默認的一些校驗規則，可以根據具體需求修改編寫。

總結

以上是生活随笔為你收集整理的后台管理系统之用JQuery-validate做表单验证的全部內容，希望文章能夠幫你解決所遇到的問題。

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