jquery validate表單驗(yàn)證的基本用法入門
一、 jQuery Validate 插件的介紹
jQuery Validate 插件為表單提供了強(qiáng)大的驗(yàn)證功能，讓客戶端表單驗(yàn)證變得更簡單，同時提供了大量的定制選項(xiàng)，滿足應(yīng)用程序各種需求。該插件捆綁了一套有用的驗(yàn)證方法，包括 URL 和電子郵件驗(yàn)證，同時提供了一個用來編寫用戶自定義方法的 API。所有的捆綁方法默認(rèn)使用英語作為錯誤信息，且已翻譯成其他 37 種語言。
該插件是由 Jörn Zaefferer 編寫和維護(hù)的，他是 jQuery 團(tuán)隊(duì)的一名成員，是 jQuery UI 團(tuán)隊(duì)的主要開發(fā)人員，是 QUnit 的維護(hù)人員。
- 官方網(wǎng)站：http://bassistance.de/jquery-plugins/jquery-plugin-validation/
- 在線文檔：http://docs.jquery.com/Plugins/Validation
- 在線 API：http://jquery.bassistance.de/api-browser/plugins.html
二、jQuery Validate 擁有的特點(diǎn)介紹
jQuery Validate 擁有以下的特點(diǎn)：
（1）內(nèi)置驗(yàn)證規(guī)則；
功能強(qiáng)大的 jQuery 表單驗(yàn)證插件，適用于日常的 E-mail、電話號碼、網(wǎng)址等驗(yàn)證及 Ajax 驗(yàn)證，除自身擁有豐富的驗(yàn)證規(guī)則外，還可以添加自定義的驗(yàn)證規(guī)則。
兼容 IE 6+, Chrome, Firefox, Safari, Opera 10+
（2）自定義驗(yàn)證規(guī)則；
（3） 簡單，強(qiáng)大的信息提示。
（4） 實(shí)時驗(yàn)證：通過keyup 或是blur事件來觸發(fā)校驗(yàn)，而不僅僅是提交的時候進(jìn)行校驗(yàn)。
三、簡單的例子來學(xué)習(xí)jQuery Validate
這些例子前提都是需要引入jQuery庫和Validation插件。
<script type="text/javascript" src="../../lib/jquery-1.11.1.js"></script> <script type="text/javascript" src="../../dist/jquery.validate.js"></script>
1. 利用插件進(jìn)行一些簡單的校驗(yàn)
<html>
<head>
<title>jQuery PlugIn -一個簡單帶驗(yàn)證例子</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="../../lib/jquery-1.11.1.js"></script>
<script type="text/javascript" src="../../dist/jquery.validate.js"></script>
<script type="text/javascript" src="../../dist/localization/messages_zh.js"></script>
<style type="text/css">
* { font-family: Verdana; font-size:13px; }
input[type='text']{width:200px;}
textarea{width:155px;}
label { width: 10em; float: left; }
label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
</style>
<script>
$(document).ready(function(){
$("#commentForm").validate();
});
</script>
</head>
<body>
<form id="commentForm" method="get" action="" >
<fieldset>
<legend>表單驗(yàn)證</legend>
<p><label>Name</label><input name="name" class="required" maxlength="4" minlength="2" /></p>
<p><label >E-Mail</label><input name="email" class="required email" /></p>
<p><label >URL</label><input name="url" class="url"/></p>
<p><label>text</label><textarea name="text" cols="22" class="required"></textarea></p>
<p><input class="submit" type="submit" value="提交"/></p>
</fieldset>
</form>
</body>
</html>
效果如下：
以上的校驗(yàn)的解釋：
1）、首先需要引入jquery-1.11.1.js，因?yàn)檫@個插件實(shí)在JQuery的基礎(chǔ)上進(jìn)行的。
2）、引入校驗(yàn)插件 jquery.validate.js 。
3）、引入提示本地化腳本。驗(yàn)證信息的國際化，默認(rèn)驗(yàn)證提示是英文的，導(dǎo)入validation已寫好的國際化文件就可實(shí)現(xiàn)國際化。改變 錯誤/正確 消息顯示樣式。
4）、在input框的class屬性中添加要校驗(yàn)的類型。針對不同的字段，進(jìn)行驗(yàn)證規(guī)則編碼，設(shè)置字段相應(yīng)的屬性
其中的一些可驗(yàn)證的規(guī)則類型：
(1)required:true 必輸字段 (2)remote:"check.shtml" 使用ajax方法調(diào)用check.shtml驗(yàn)證輸入值 (3)email:true 必須輸入正確格式的電子郵件(只能驗(yàn)證格式,不保證有效性) (4)url:true 必須輸入正確格式的網(wǎng)址 (5)date:true 必須輸入正確格式的日期 (6)dateISO:true 必須輸入正確格式的日期(ISO)，例如：2009-06-23，1998/01/22 只驗(yàn)證格式，不驗(yàn)證有效性 (7)number:true 必須輸入合法的數(shù)字(負(fù)數(shù)，小數(shù)) (8)digits:true 必須輸入整數(shù) (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
5）、確定哪個表單需要被驗(yàn)證
<script type="text/javascript">
////<![CDATA[
$(document).ready(function(){
$("#commentForm").validate();
});
//]]>
</script>
本文已被整理到了《jquery表單驗(yàn)證大全》 ，歡迎大家學(xué)習(xí)閱讀。
以上就是針對jquery validate表單驗(yàn)證的入門學(xué)習(xí)，希望對大家的學(xué)習(xí)有所幫助。
- 詳解jquery validate實(shí)現(xiàn)表單驗(yàn)證 （正則表達(dá)式）
- jQuery Validate讓普通按鈕觸發(fā)表單驗(yàn)證的方法
- 功能強(qiáng)大的jquery.validate表單驗(yàn)證插件
- 基于Bootstrap+jQuery.validate實(shí)現(xiàn)表單驗(yàn)證
- 實(shí)例詳解jQuery表單驗(yàn)證插件validate
- jQuery插件Validate實(shí)現(xiàn)自定義表單驗(yàn)證
- jQuery Validate表單驗(yàn)證深入學(xué)習(xí)
- jQuery.validate.js表單驗(yàn)證插件的使用代碼詳解
相關(guān)文章
jQuery 創(chuàng)建Dom元素代碼，需要的朋友可以參考下。2010-05-05
本篇文章主要是對jquery的js圖表組件highcharts進(jìn)行了詳細(xì)的介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-03-03
Jquery Easyui驗(yàn)證組件ValidateBox使用詳解（20）
這篇文章主要為大家詳細(xì)介紹了Jquery Easyui自定義下拉框組件的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
jQuery在IE下使用未閉合的xml代碼創(chuàng)建元素時的Bug介紹
這個偏門Bug是我在更新phZoom 1.29后發(fā)現(xiàn)的, 我先將之重現(xiàn)一下2012-01-01
前陣子接到個需求，聯(lián)通網(wǎng)上營業(yè)廳經(jīng)常需要專題頁面做宣傳，但是由于專題頁面會有按鈕，以及各個圖片的鏈接，省分的人沒有html基礎(chǔ)，沒人維護(hù)，量又比較大，需要開發(fā)出一個可自定義圖片熱區(qū)鏈接的后臺，于是就有了這個2012-07-07
jquery使用canvas標(biāo)簽繪制驗(yàn)證碼
這篇文章主要為大家詳細(xì)介紹了Jquery中用canvas標(biāo)簽繪制驗(yàn)證碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
jquery獲取form表單input元素值的簡單實(shí)例
下面小編就為大家?guī)硪黄猨query獲取form表單input元素值的簡單實(shí)例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
Jquery?on("click")方法綁定事件后執(zhí)行多次的解決方法
這篇文章主要給大家介紹了關(guān)于Jquery?on("click")方法綁定事件后執(zhí)行多次的解決方法,文章通過實(shí)例代碼以及圖文介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用jQuery具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2023-06-06
這篇文章主要為大家詳細(xì)介紹了解決jquery無法找到其他父級子集問題的方法，感興趣的小伙伴們可以參考一下2016-05-05
jQuery插件FusionCharts繪制2D柱狀圖和折線圖的組合圖效果示例【附demo源碼】
這篇文章主要介紹了jQuery插件FusionCharts繪制2D柱狀圖和折線圖的組合圖效果,結(jié)合完整實(shí)例形式分析了jQuery使用插件FusionCharts載入xml格式數(shù)據(jù)繪制柱狀圖與折線圖組合圖效果的操作步驟與相關(guān)實(shí)現(xiàn)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-04-04