快捷導(dǎo)航

jquery表單驗(yàn)證插件validation使用方法詳解

更新時間：2017年01月20日 09:58:43 作者：BaldWinf

這篇文章主要為大家詳細(xì)介紹了jquery表單驗(yàn)證插件validation使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下

一、如何使用

引入js文件

<script src="jquery.js"></script>
<script src="jquery.validate-1.13.1.js"></script>

編寫html頁面，這里僅以用戶名、密碼為例

<body>
 <form id="demoForm">
  <fieldset>
   <legend>用戶登錄</legend>
   <p>
    <label for="username">用戶名</label>
    <input type="text" id="username" name="username">
   </p>
   <p>
    <label for="password">密碼</label>
    <input type="text" id="password" name="password">
   </p>
  </fieldset>
 </form>
</body>

編寫script腳

$(document).ready(function(){
 $("#demoForm").validate({
  rules:{
   username:{
    required:true,// 是否必填
    minlength:2, // 最小長度
    maxlength:10 // 最大長度
   },
   password:{
    required:true,
    minlength:2,
    maxlength:16
   }
  }
 });
});

二、測試

如果大家還想深入學(xué)習(xí)，可以點(diǎn)擊兩個精彩的專題：jquery表單驗(yàn)證大全 JavaScript表單驗(yàn)證大全

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

jQuery1.9.1源碼分析系列（十六）ajax之a(chǎn)jax框架
這篇文章主要介紹了jQuery1.9.1源碼分析系列（十六）ajax之a(chǎn)jax框架的相關(guān)資料,需要的朋友可以參考下
2015-12-12
jQuery中isFunction方法的BUG修復(fù)
修復(fù) jQuery 中 isFunction 方法的 BUG
2010-01-01
jQuery實(shí)現(xiàn)textarea自動增長寬高的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)textarea自動增長寬高的方法,涉及jQuery針對鍵盤按鍵的響應(yīng)及頁面元素的動態(tài)操作技巧,需要的朋友可以參考下
2015-12-12
ASP.NET jQuery 實(shí)例3 (在TextBox里面阻止復(fù)制、剪切和粘貼事件)
在這講里，讓我們看下如何在ASP.NET Textbox里禁止復(fù)制、剪切和粘貼行為
2012-01-01
jquery URL參數(shù)判斷，確定菜單樣式
jquery URL判斷，確定菜單樣式,需要的朋友可以參考下，當(dāng)然js也可以的。可以參考下相關(guān)文章。
2010-05-05
JQuery自適應(yīng)IFrame高度（支持嵌套兼容IE,ff,safafi,chrome）
很高興，終于使用jquery實(shí)現(xiàn)了點(diǎn)擊外部鏈接，更改iframe內(nèi)容時，iframe的高度自適應(yīng)問題。
2011-03-03
jQuery中toggleClass()方法用法實(shí)例
這篇文章主要介紹了jQuery中toggleClass()方法用法,實(shí)例分析了toggleClass()方法的功能、定義及對添加或移除匹配元素的一個或多個類進(jìn)行切換的使用技巧,需要的朋友可以參考下
2015-01-01
jQuery讓控件左右移動的三種實(shí)現(xiàn)方法
常用的方法就是把控件的CSS position屬性設(shè)置為relative或 absolute，大家也可以學(xué)習(xí)下本文提供的其他方法
2013-09-09
基于JSON格式數(shù)據(jù)的簡單jQuery幻燈片插件(jquery-slider)
jquery-slider幻燈片插件通過json數(shù)據(jù)來提供圖片地址和描述信息，同時也可以更換json數(shù)據(jù)來動態(tài)切換不同的圖片，對json數(shù)據(jù)jquery幻燈片插件相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧
2016-08-08
基于jquery實(shí)現(xiàn)圖片相關(guān)操作（重繪、獲取尺寸、調(diào)整大小、縮放）
這篇文章主要介紹了基于jquery實(shí)現(xiàn)圖片相關(guān)操作，包括圖片重繪、圖片獲取尺寸、圖片調(diào)整大小、圖片縮放，感興趣的小伙伴們可以參考一下
2015-12-12