jQuery驗證控制元件jquery.validate.js使用說明+中文API
一匯入js庫
<script src="../js/jquery.js" type="text/javascript"></script>
<script src="../js/jquery.validate.js" type="text/javascript"></script>
二、預設校驗規則
(1)required:true 必輸欄位
(2)remote:"check.php" 使用ajax方法呼叫check.php驗證輸入值
(3)email:true 必須輸入正確格式的電子郵件
(4)url:true 必須輸入正確格式的網址
(5)date:true 必須輸入正確格式的日期 日期校驗ie6出錯,慎用
(6)dateISO:true 必須輸入正確格式的日期(ISO),例如:2009-06-23,1998/01/22 只驗證格式,不驗證有效性
(7)number:true 必須輸入合法的數字(負數,小數)
(8)digits:true 必須輸入整數
(9)creditcard: 必須輸入合法的信用卡號
(10)equalTo:"#field" 輸入值必須和#field相同
(11)accept: 輸入擁有合法字尾名的字串(上傳檔案的字尾)
(12)maxlength:5 輸入長度最多是5的字串(漢字算一個字元)
(13)minlength:10 輸入長度最小是10的字串(漢字算一個字元)
(14)rangelength:[5,10] 輸入長度必須介於 5 和 10 之間的字串")(漢字算一個字元)
(15)range:[5,10] 輸入值必須介於 5 和 10 之間
(16)max:5 輸入值不能大於5
(17)min:10 輸入值不能小於10
三、預設的提示
messages: {
required: "This field is required.",
remote: "Please fix this field.",
email: "Please enter a valid email address.",
url: "Please enter a valid URL.",
date: "Please enter a valid date.",
dateISO: "Please enter a valid date (ISO).",
dateDE: "Bitte geben Sie ein g眉ltiges Datum ein.",
number: "Please enter a valid number.",
numberDE: "Bitte geben Sie eine Nummer ein.",
digits: "Please enter only digits",
creditcard: "Please enter a valid credit card number.",
equalTo: "Please enter the same value again.",
accept: "Please enter a value with a valid extension.",
maxlength: \(.validator.format("Please enter no more than {0} characters."),
minlength: \).validator.format("Please enter at least {0} characters."),
rangelength: \(.validator.format("Please enter a value between {0} and {1} characters long."),
range: \).validator.format("Please enter a value between {0} and {1}."),
max: \(.validator.format("Please enter a value less than or equal to {0}."),
min: \).validator.format("Please enter a value greater than or equal to {0}.")
},
如需要修改,可在js程式碼中加入:
jQuery.extend(jQuery.validator.messages, {
required: "必選欄位",
remote: "請修正該欄位",
email: "請輸入正確格式的電子郵件",
url: "請輸入合法的網址",
date: "請輸入合法的日期",
dateISO: "請輸入合法的日期 (ISO).",
number: "請輸入合法的數字",
digits: "只能輸入整數",
creditcard: "請輸入合法的信用卡號",
equalTo: "請再次輸入相同的值",
accept: "請輸入擁有合法字尾名的字串",
maxlength: jQuery.validator.format("請輸入一個 長度最多是 {0} 的字串"),
minlength: jQuery.validator.format("請輸入一個 長度最少是 {0} 的字串"),
rangelength: jQuery.validator.format("請輸入 一個長度介於 {0} 和 {1} 之間的字串"),
range: jQuery.validator.format("請輸入一個介於 {0} 和 {1} 之間的值"),
max: jQuery.validator.format("請輸入一個最大為{0} 的值"),
min: jQuery.validator.format("請輸入一個最小為{0} 的值")
});
推薦做法,將此檔案放入messages_cn.js中,在頁面中引入
四、使用方式
1.將校驗規則寫到控制元件中
<script src="../js/jquery.js" type="text/javascript"></script>
<script src="../js/jquery.validate.js" type="text/javascript"></script>
<script src="./js/jquery.metadata.js" type="text/javascript"></script>
$().ready(function() {
$("#signupForm").validate();
});
<form id="signupForm" method="get" action="">
<p>
<label for="firstname">Firstname</label>
<input id="firstname" name="firstname" class="required" />
</p>
<p>
<label for="email">E-Mail</label>
<input id="email" name="email" class="required email" />
</p>
<p>
<label for="password">Password</label>
<input id="password" name="password" type="password" class="{required:true,minlength:5}" />
</p>
<p>
<label for="confirm_password">確認密碼</label>
<input id="confirm_password" name="confirm_password" type="password" class="{required:true,minlength:5,equalTo:'#password'}" />
</p>
<p>
<input class="submit" type="submit" value="Submit"/>
</p>
</form>
使用class="{}"的方式,必須引入包:jquery.metadata.js
可以使用如下的方法,修改提示內容:
class="{required:true,minlength:5,messages:{required:'請輸入內容'}}"
在使用equalTo關鍵字時,後面的內容必須加上引號,如下程式碼:
class="{required:true,minlength:5,equalTo:'#password'}"
2.將校驗規則寫到js程式碼中
$().ready(function() {
$("#signupForm").validate({
rules: {
firstname: "required",
email: {
required: true,
email: true
},
password: {
required: true,
minlength: 5
},
confirm_password: {
required: true,
minlength: 5,
equalTo: "#password"
}
},
messages: {
firstname: "請輸入姓名",
email: {
required: "請輸入Email地址",
email: "請輸入正確的email地址"
},
password: {
required: "請輸入密碼",
minlength: jQuery.format("密碼不能小於{0}個字 符")
},
confirm_password: {
required: "請輸入確認密碼",
minlength: "確認密碼不能小於5個字元",
equalTo: "兩次輸入密碼不一致不一致"
}
}
});
});
//messages處,如果某個控制元件沒有message,將呼叫預設的資訊
<form id="signupForm" method="get" action="">
<p>
<label for="firstname">Firstname</label>
<input id="firstname" name="firstname" />
</p>
<p>
<label for="email">E-Mail</label>
<input id="email" name="email" />
</p>
<p>
<label for="password">Password</label>
<input id="password" name="password" type="password" />
</p>
<p>
<label for="confirm_password">確認密碼</label>
<input id="confirm_password" name="confirm_password" type="password" />
</p>
<p>
<input class="submit" type="submit" value="Submit"/>
</p>
</form>
required:true 必須有值
required:"#aa:checked"表示式的值為真,則需要驗證
required:function(){}返回為真,表時需要驗證
後邊兩種常用於,表單中需要同時填或不填的元素
五、常用方法及注意問題
1.用其他方式替代預設的SUBMIT
\(().ready(function() {
\)("#signupForm").validate({
submitHandler:function(form){
alert("submitted");
form.submit();
}
});
});
使用ajax方式
\((".selector").validate({
submitHandler: function(form)
{
\)(form).ajaxSubmit();
}
})
可以設定validate的預設值,寫法如下:
$.validator.setDefaults({
submitHandler: function(form) { alert("submitted!");form.submit(); }
});
如果想提交表單, 需要使用form.submit()而不要使用$(form).submit()
2.debug,只驗證不提交表單
如果這個引數為true,那麼表單不會提交,只進行檢查,除錯時十分方便
\(().ready(function() {
\)("#signupForm").validate({
debug:true
});
});
如果一個頁面中有多個表單都想設定成為debug,用
$.validator.setDefaults({
debug: true
})
3.ignore:忽略某些元素不驗證
ignore: ".ignore"
4.更改錯誤資訊顯示的位置
errorPlacement:Callback
Default: 把錯誤資訊放在驗證的元素後面
指明錯誤放置的位置,預設情況是:error.appendTo(element.parent());即把錯誤資訊放在驗證的元素後面
errorPlacement: function(error, element) {
error.appendTo(element.parent());
}
示例:
<tr>
<td class="label"><label id="lfirstname" for="firstname">First Name</label></td>
<td class="field"><input id="firstname" name="firstname" type="text" value="" maxlength="100" /></td>
<td class="status"></td>
</tr>
<tr>
<td style="padding-right: 5px;">
<input id="dateformat_eu" name="dateformat" type="radio" value="0" />
<label id="ldateformat_eu" for="dateformat_eu">14/02/07</label>
</td>
<td style="padding-left: 5px;">
<input id="dateformat_am" name="dateformat" type="radio" value="1" />
<label id="ldateformat_am" for="dateformat_am">02/14/07</label>
</td>
<td></td>
</tr>
<tr>
<td class="label"> </td>
<td class="field" colspan="2">
<div id="termswrap">
<input id="terms" type="checkbox" name="terms" />
<label id="lterms" for="terms">I have read and accept the Terms of Use.</label>
</div>
</td>
</tr>
errorPlacement: function(error, element) {
if ( element.is(":radio") )
error.appendTo( element.parent().next().next() );
else if ( element.is(":checkbox") )
error.appendTo ( element.next() );
else
error.appendTo( element.parent().next() );
}
程式碼的作用是:一般情況下把錯誤資訊顯示在中,如果是radio顯示在中,如果是 checkbox顯示在內容的後面
errorClass:String Default: "error"
指定錯誤提示的css類名,可以自定義錯誤提示的樣式
errorElement:String Default: "label"
用什麼標籤標記錯誤,預設的是label你可以改成em
errorContainer:Selector
顯示或者隱藏驗證資訊,可以自動實現有錯誤資訊出現時把容器屬性變為顯示,無錯誤時隱藏,用處不大
errorContainer: "#messageBox1, #messageBox2"
errorLabelContainer:Selector
把錯誤資訊統一放在一個容器裡面。
wrapper:String
用什麼標籤再把上邊的errorELement包起來
一般這三個屬性同時使用,實現在一個容器內顯示所有錯誤提示的功能,並且沒有資訊時自動隱藏
errorContainer: "div.error",
errorLabelContainer: $("#signupForm div.error"),
wrapper: "li"
5更改錯誤資訊顯示的樣式
設定錯誤提示的樣式,可以增加圖示顯示,在該系統中已經建立了一個validation.css專門用於維護校驗檔案的樣式
input.error { border: 1px solid red; }
label.error {
background:url("./demo/images/unchecked.gif") no-repeat 0px 0px;
padding-left: 16px;
padding-bottom: 2px;
font-weight: bold;
color: #EA5200;
}
label.checked {
background:url("./demo/images/checked.gif") no-repeat 0px 0px;
}
6每個欄位驗證通過執行函式
success:String,Callback
要驗證的元素通過驗證後的動作,如果跟一個字串,會當做一個css類,也可跟一個函式
success: function(label) {
// set as text for IE
label.html(" ").addClass("checked");
//label.addClass("valid").text("Ok!")
}
新增"valid" 到驗證元素, 在CSS中定義的樣式
success: "valid"
7驗證的觸發方式修改
下面的雖然是boolean型的,但建議除非要改為false,否則別亂新增。
onsubmit:Boolean Default: true
提交時驗證. 設定唯false就用其他方法去驗證
onfocusout:Boolean Default: true
失去焦點是驗證(不包括checkboxes/radio buttons)
onkeyup:Boolean Default: true
在keyup時驗證.
onclick:Boolean Default: true
在checkboxes 和 radio 點選時驗證
focusInvalid:Boolean Default: true
提交表單後,未通過驗證的表單(第一個或提交之前獲得焦點的未通過驗證的表單)會獲得焦點
focusCleanup:Boolean Default: false
如果是true那麼當未通過驗證的元素獲得焦點時,移除錯誤提示。避免和 focusInvalid 一起用
// 重置表單
\(().ready(function() {
var validator = \)("#signupForm").validate({
submitHandler:function(form){
alert("submitted");
form.submit();
}
});
$("#reset").click(function() {
validator.resetForm();
});
});
8非同步驗證
remote:URL
使用ajax方式進行驗證,預設會提交當前驗證的值到遠端地址,如果需要提交其他的值,可以使用data選項
remote: "check-email.php"
remote: {
url: "check-email.php", //後臺處理程式
type: "post", //資料傳送方式
dataType: "json", //接受資料格式
data: { //要傳遞的資料
username: function() {
return $("#username").val();
}
}
}
遠端地址只能輸出 "true" 或 "false",不能有其它輸出
9新增自定義校驗
addMethod:name, method, message
自定義驗證方法
// 中文字兩個位元組
jQuery.validator.addMethod("byteRangeLength", function(value, element, param) {
var length = value.length;
for(var i = 0; i < value.length; i++){
if(value.charCodeAt(i) > 127){
length++;
}
}
return this.optional(element) || ( length >= param[0] && length <= param[1] );
}, $.validator.format("請確保輸入的值在{0}-{1}個位元組之間(一箇中文字算2個位元組)"));
// 郵政編碼驗證
jQuery.validator.addMethod("isZipCode", function(value, element) {
var tel = /[0-9]{6}$/;
return this.optional(element) || (tel.test(value));
}, "請正確填寫您的郵政編碼");
1.要在additional-methods.js檔案中新增或者在jquery.validate.js新增
建議一般寫在additional-methods.js檔案中
2.在messages_cn.js檔案新增:isZipCode: "只能包括中文字、英文字母、數字和下劃線",
呼叫前要新增對additional-methods.js檔案的引用。
10radio和checkbox、select的驗證
1.radio的required表示必須選中一個
2.checkbox的required表示必須選中
checkbox的minlength表示必須選中的最小個數,maxlength表示最大的選中個數,rangelength:[2,3]表 示選中個數區間
3.select的required表示選中的value不能為空
select的minlength表示選中的最小個數(可多選的select),maxlength表示最大的選中個 數,rangelength:[2,3]表示選中個數區間












相關推薦
jQuery驗證控制元件jquery.validate.js使用說明+中文API
一匯入js庫 <script src="../js/jquery.js" type="text/javascript"></script> <script src="../js/jquery.validate.js" type="text/javascript">&l
jQuery 表單驗證控制元件 比較簡單
學習jquery, 自己寫的一個基於jQuery的表單驗證練手 比較簡單 下載地位 http://download.csdn.net/detail/lpy3654321/7816687 不要積分的 頁面效果: HTML 程
jquery 第三方控制元件ztree使用說明
1、引入相關資源 <link href="zTree/zTreeStyle/zTreeStyle.css" rel="stylesheet" /> <script src="../javascript/jquery-1.7.1.min.js">&l
多功能jQuery日期控制元件基於jeDate
最近專案用到了日期控制元件,網上找了很久,發現一個比較適合的分享給大家(本來想免費的,csdn不允許了現在……,所以選了最低分分享,如果涉及侵權,請聯絡我。) 下載地址:https://download.csdn.net/download/kuangni5808/10528765 下載檔案
ASP.NET開發中主要的字元驗證方法-JS驗證、正則表示式、驗證控制元件、後臺驗證
在ASP.NET開發中主要的驗證方法收藏 <1>使用JS驗證 匹配中文字元的正則表示式: [\u4e00-\u9fa5] 匹配雙位元組字元(包括漢字在內):[^\x00-\xff] 備註:可以用來計算字串的長度(一個雙位元組字元長度計2,ASCII字元計1) 匹配空白行的正則表示式:\n\s
jquery設定控制元件是否可用,是否可見
開發過程中,使用jQuery設定控制元件,是否可見,是否可用。 $('.selector').attr("disabled", true);// 讓控制元件不可用 屬性 2,$('.selector').attr("disabled", true);// 讓控制元件可用
jquery日期控制元件WdatePicker的使用
先引入js檔案 <script src="resources/My97DatePicker/WdatePicker.js" type="text/javascript"></script> <script src="resources/My
【JQuery】控制元件-實現自定義樣式的彈出視窗和確認框
Html程式碼: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="h
jquery樹形控制元件Ztree 使用
<%@ page contentType="text/html; charset=UTF-8"%> <% response.setHeader("Charset","UTF-8'"); String path = request.getContextPath(); String zoneI
jquery改變控制元件值
(一)input控制元件(type="text",type="date"都可以) $("#inputId").val("值"); ( 二)select控制元件 預設選中select中value="值"的選項 $("#selectId option[value=‘值’]").
jquery 設定控制元件的disabled屬性
Jquery的api中提供了對元素應用disabled和readonly屬性的方法,在這裡記錄下。如下: 1.readonly $('input').attr("readonly","readonly")//將input元素設定為readonly $('input').removeAtt
jQuery時間控制元件WdatePicker的引用
WdatePicker dome下載連結:https://download.csdn.net/download/m0_38093650/104655111.為什麼使用WdatePicker?答:相容低版本瀏覽器且樣式簡約2.WdatePicker元件介紹:答:組要有Wdate
ASP.NET驗證控制元件客戶端驗證成功或失敗之後執行js指令碼(轉)
要求:表單中用了驗證控制元件,如何能在驗證控制元件的客戶端指令碼驗證成功之後,執行一段js指令碼,比如彈出確認框,然後再提交,點取消則不提交。如果驗證控制元件沒通過,比如使用者沒填名字的話,不會提交。 網上看了一些文章,有的說不可能,有的則是使用服務端程式碼,需要提交頁面後才能正確執行。 下面的程式碼的測試環
分享自己編寫的一個jquery日曆控制元件,可以選擇日期區間
先來個截圖 初版未經全面測試,難免有bug,功能比較單一,簡單說一下功能吧 1、可以選擇單個日期 2、可以選擇日期區間 3、面板顯示月份可以自定義 4、日期格式可以自定義,但是目前只支援幾種(格式見js內部) 5、準備增加確定和取消按鈕的回撥函式 其他功能暫時沒有想到,所以都沒加,目前V1.0版本
JQUERY時間控制元件--My97DatePicker使用說明文件
一. 簡介 1. 簡介 目前的版本是:4.2 正式版 釋出於2008-12-03 2. 注意事項 My97DatePicker目錄是一個整體,不可破壞裡面的目錄結構,也不可對裡面的檔案改名,可以改目錄名 My97DatePicker.htm是必須檔案,不可刪除 各目錄及檔案的用途: WdatePick
前端jQuery日曆控制元件報錯 $("#datepicker").datepicker is not a function
使用日曆控制元件時,前端產生錯誤: $("#datepicker").datepicker is not a function 問題原因 前端在同一個頁面,jQuery引入了兩次。 解決方法 方法一、 去掉一個jQuery引用 方法二、 在前端頁面加入如下js程式碼 如果有兩個js庫同時呼叫了jQuery,可
duilib CWebBrowser控制元件 cxx與js互動
轉自:http://blog.csdn.net/sunflover454/article/details/60873557(侵刪) C++和js相互呼叫是個有意思的事情。 一、js中呼叫C++函式。函式原型 [html] view plain
ASP.NET中驗證控制元件的使用
目錄 1.RequireFiledValidation 2.RangeValidation 3.CompareValidator 4.RegularExpressionValidator(正則表示式線上編輯器:http://tools.jb51.n
把WebBrowser瀏覽器控制元件添加當前控制元件並註冊js方法呼叫C#程式碼
1 把WebBrowser瀏覽器外掛新增到當前控制元件集 string url = "a.html"; webBrowser = new ChromiumWebBrowser(url); webBrowser.Dock =
VS中驗證控制元件的使用
才疏學淺,暫時先寫vs工具中可以直接拖動使用的驗證控制元件; 首先點選Ctrl+alt+x開啟工具箱,然後選擇驗證,如下圖: vs已經提供了六種驗證方法發,我介紹能力範圍內的四種: 1.CompareValidator 檢驗兩個文字框填寫內容是否相同,一般用於確認