介紹和代碼

表單驗(yàn)證無論是前后端都有著比較明顯的需求，在用戶填寫表單的時(shí)候，需要給到用戶提示，當(dāng)用戶輸入的數(shù)據(jù)滿足預(yù)期時(shí)給到用戶反饋。之前在學(xué)習(xí)JS的時(shí)候也學(xué)習(xí)過用正則表達(dá)式原生js寫表單驗(yàn)證，無非是onblur時(shí)間發(fā)生時(shí)通過操作dom元素拿到用戶輸入的數(shù)據(jù)然后在用正則表達(dá)式進(jìn)行規(guī)范，滿足則怎么樣，不滿足則怎么樣。

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

看了介紹就能清楚的知道，JQuery-validate依賴于jQuery，所以在使用的時(shí)候我們自然需要引入對(duì)應(yīng)的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="請(qǐng)輸入登錄名稱"></div></div></form></div></div>

首先因?yàn)槭潜韱悟?yàn)證，當(dāng)然是要給form加一個(gè)id值作為標(biāo)識(shí)。
接下來就是js部分,這個(gè)驗(yàn)證函數(shù)放在進(jìn)入這個(gè)頁面的點(diǎn)擊事件中，也就是點(diǎn)擊進(jìn)入到頁面就執(zhí)行函數(shù)。

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

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

具體用法也很簡(jiǎn)單，不再贅述。值得注意的是他有一個(gè)內(nèi)置的函數(shù)submitHandler，表單中提交按鈕的函數(shù)。直接可以使用。將來用來提交表單的具體代碼可以放進(jìn)去。

值得注意的是：

默認(rèn)的一些校驗(yàn)規(guī)則，可以根據(jù)具體需求修改編寫。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。