[color=darkblue][size=medium]作用
jquery.validate是jquery旗下的乙個驗證框架,借助jquery的優勢,我們可以迅速驗證一些常見的輸入,並且可以自己擴充自己的驗證方法,並且對國際化也有很好的支援。
使用前的布置
說明:需要jquery版本:1.2.6+
步驟:要匯入相應的jquery.js與jquery.validate.js檔案
在相應的字段上指定驗證規則
名稱 *
其中class="required"代表本欄位必須要輸入資料
指定要對表單進行驗證
基礎知識
指定驗證規則的方式
把驗證規則寫到字段元素的class屬性中
例:名稱 *
密 *
再次輸入
生日
e-mail *
par(zip)
說明:如果使用class=""的方式,必須引入:jquery.metadata.js
表單字段的name不能重複,否則所配置的驗證不起作用。
呼叫validate()方法時傳遞欄位的驗證規則
[color=red]$(function() ,
password: ,
password2:
}});
});[/color]
內建的驗證規則
[color=red]required:true
必填字段
remote:"check.php"
使用ajax方法呼叫check.php驗證輸入值
email:true
必須輸入正確格式的電子郵件
url:true
必須輸入正確格式的**
date:true
必須輸入正確格式的日期
dateiso:true
必須輸入正確格式的日期(iso),例如:2010-01-01,2010/01/01 只驗證格式,不驗證有效性
number:true
必須輸入合法的數字(負數,小數)
digits:true
必須輸入整數
creditcard:
必須輸入合法的信用卡號
equalto:"#field"
輸入值必須和$(「#field」)相同
輸入擁有合法字尾名的字串(上傳檔案的字尾),多個字尾之間用』|』隔開
maxlength:5
輸入長度最多是5的字串(漢字算乙個字元)
minlength:3
輸入長度最小是3的字串(漢字算乙個字元)
rangelength:[5,10]
輸入長度必須介於 5 和 10 之間的字串")(漢字算乙個字元)
range:[5,10]
輸入值必須介於 5 和 10 之間
max:5
輸入值不能大於5
min:10
輸入值不能小於10[/color]
說明:remote是遠端驗證:比如註冊驗證使用者名稱是否已被註冊,返回值只能是true(驗證成功)或false(驗證失敗)。在訪問指定的url時,會自動把當前欄位的值做為引數(以欄位name為key)傳遞過去。
某些屬性值中的引號不能省略,否則出錯。如accept、equalto等。
remote使用時遇到的問題:新增使用者時需要驗證使用者名稱是否存在,當新增上乙個使用者後,在不離開該頁面的情況下,再次新增該使用者名稱的使用者,validate不能提示該使用者已存在,因為快取的原因,jquery仍認為該使用者名稱可用。解決方法是在頁面中新增:$().ready(function()); // 關閉快取功能
});新增
修改錯誤資訊提示位置:
修改jquery validate 的錯誤提示位置,把錯誤提示在input內,當獲得滑鼠焦點的時候清楚提示資訊。
具體使用方法:
var validator = $("#mycontainerform").validate(,
rules:
},messages:
}});
自定義驗證規則
除了內建的驗證規則,validation還允許自定義驗證規則。這是通過validation的addmethod()方法實現的,語法 為:
jquery.validator.addmethod("name",function,message)
其中:name為驗證規則的名稱
function定義驗證的規則。引數有?。返回值為?。
message是驗證失敗時的提示資訊。
指定錯誤提示內容
更改預設的提示內容
jquery.extend(jquery.validator.messages, 個字元"),
minlength: jquery.validator.format("允許的最小長度為 個字元"),
rangelength: jquery.validator.format("允許的長度為和之間"),
range: jquery.validator.format("請輸入介於 和 之間的值"),
max: jquery.validator.format("請輸入乙個最大為 的值"),
min: jquery.validator.format("請輸入乙個最小為 的值")
});個別表單改變提示內容(只對當前表單有效)
方法一:
方法二:
$(function() ,
email:
}});
});改變錯誤訊息顯示樣式
指定label.error的樣式就可以了,如下:
說明:label.error指class為error的label元素,如:
擴充套件使用
怎麼讓錯誤提示資訊顯示到指定的位置
validation表單驗證外掛程式.doc[/size][/color]
jquery validation驗證外掛程式
序號規則描述1 required true 必須輸入的字段。2remote check.php 使用 ajax 方法呼叫 check.php 驗證輸入值。3email true 必須輸入正確格式的電子郵件。4url true 必須輸入正確格式的 5date true 必須輸入正確格式的日期。日期校驗...
jquery validation 外掛程式使用
引入jquery.js,jquery.validate.min.js 驗證規則以 data rule 為字首 如果啟用了長度驗證或者值範圍驗證,則必須啟用必填驗證,否則長度與範圍的驗證將不會起作用.表單項中,不要相同name的表單驗證元素,否則只會驗證第乙個name的表單元素 支援的驗證規則有 mi...
jQuery Validation使用教程
1 匯入js庫 jquery validation是基於jquery為核心的,所以必須先導入jquery核心js檔案 接著匯入jquery validation核心js 匯入中文提示資訊js2 預設校驗規則 3 預設提示 messages characters.minlength validator...