快捷導航

基于jquery的simpleValidate簡易驗證插件

更新時間：2014年01月31日 21:48:29 作者：

簡易驗證插件simpleValidate使用心得，基于JQuery，修改小BUG后能兼容各瀏覽器，附自用版本供下載

如果你不需要做onfocus和onblur的即時驗證，如果你不想對每個表格都通過JS定義驗證規(guī)則，如果你只需要在提交的時候進行一次驗證和反饋，如果你喜歡簡約的代碼結(jié)構(gòu)，我覺得simpleValidate是不錯的選擇。

從關(guān)注度和下載量來看，這插件并不怎么受歡迎，不過不要緊，它是我的菜。
下載地址在最下邊，開源的，DEMO很詳細，相當容易上手。
原版不支持IE，原因是JSON的逗號和length是保留字的問題，修復方法就是把所有“}”前不必要的逗號刪掉，變量length改用其他變量名，我改了一個，并對提示內(nèi)容進行了漢化，目前正在使用，暫未發(fā)現(xiàn)其他BUG，下載地址：jquery.simple.validation.js

定義 data-rules 屬性：
用井號“#”區(qū)分多個驗證規(guī)則，用加號“+”附帶驗證對比值，用橫杠“-”附帶反饋項目標題，以下列一下基本寫法

復制代碼代碼如下:

<input type="text" name="email" value="@" data-rules="郵箱-required#郵箱-valid_email" />
<input name="password" id="txt_pass" type="password" data-rules="密碼-min_length+8#密碼-max_length+16" />
<input name="password2" type="password" data-rules="確認密碼-matches+txt_pass+密碼" />

定義所有form在提交前都進行驗證：

復制代碼代碼如下:

$('form').bind('submit',function(){
    var message=$(this).validate();
    if(message!==true){
        alert(message);
        return false;
    }
    return true;
});

項目開源地址：https://github.com/capucinno-lee/jquery-simple-validation
DEMO地址：http://demo.jb51.net/js/2014/jquery_simple_validation/

您可能感興趣的文章:

相關(guān)文章

jquery圖片播放瀏覽插件prettyPhoto使用詳解
這篇文章主要詳細介紹了jquery圖片播放瀏覽插件prettyPhoto使用方法，以及支持的每種類型的詳細示例，非常的不錯，有需要的小伙伴參考下
2014-12-12
jquery動態(tài)添加帶有樣式的HTML標簽元素方法
下面小編就為大家分享一篇jquery動態(tài)添加帶有樣式的HTML標簽元素方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-02-02
JQuery CheckBox（復選框）操作方法匯總
這篇文章主要介紹了JQuery CheckBox（復選框）操作方法匯總,本文講解了獲取單個checkbox選中項、獲取多個checkbox選中項、設(shè)置第一個checkbox 為選中值、設(shè)置最后一個checkbox為選中值等內(nèi)容,需要的朋友可以參考下
2015-04-04
jQuery 驗證插件 Web前端設(shè)計模式(asp.net)
asp.net下用戶注冊頁面的驗證代碼，花了點時間將驗證做成一個jQuery插件，希望對需要的朋友有所幫助。
2010-10-10
基于jQuery使用Ajax動態(tài)執(zhí)行模糊查詢功能
這篇文章主要介紹了基于jQuery使用Ajax動態(tài)執(zhí)行模糊查詢功能,通過實例代碼相結(jié)合的形式給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下
2018-07-07
jQuery 網(wǎng)易相冊鼠標移動顯示隱藏效果實現(xiàn)代碼
顯示隱藏效果的實現(xiàn)主要是jquery層選擇器的應用：當鼠標移動經(jīng)過照片就顯示設(shè)為封面刪除，移開后就隱藏，此效果在web開發(fā)中經(jīng)常會用到，感興趣的朋友可以參考下哈
2013-03-03
jquery $.each() 使用小探
jquery each想必大家對此并不陌生吧，它的使用范圍還是比較廣泛的，下面與大家分享個示例來介紹jquery each的使用方法，感興趣的朋友可以參考下，希望對大家有所幫助
2013-08-08
JQuery中解決重復動畫的方法
本篇文章主要介紹了JQuery中解決重復動畫的辦法，有分別有圖片滾動輪播，回到頁面頂部，聯(lián)級菜單滑出，手風琴等效果，有需要的朋友可以來看一下。
2016-10-10
jquery多行滾動/向左或向上滾動/響應鼠標實現(xiàn)思路及代碼
多行滾動jQuery循環(huán)新聞列表代碼包括以下功能:鼠標滑上焦點圖時停止自動播放/滑出時開始自動播放以及判斷執(zhí)行橫向或縱向滾動,感興趣的朋友可以了解下哦
2013-01-01
jQuery進階實踐之利用最優(yōu)雅的方式如何寫ajax請求
ajax請求相信對大家來說都不陌生，下面這篇文章主要介紹了jQuery進階實踐之利用最優(yōu)雅的方式如何寫ajax請求的相關(guān)資料，文中通過示例代碼介紹的非常詳細，需要的朋友可以參考借鑒，下面隨著小編來一起學習學習吧。
2017-12-12