碼迷,www.tparu.icu
吉利平特名人堂 > Web開發 > 詳細

高手榜平特一肖:Validation-jQuery表單驗證插件使用方法

時間:2014-06-25 11:44:10      閱讀:23159      評論:0      收藏:0      [點我收藏+]

吉利平特名人堂 www.tparu.icu 標簽:style   class   blog   java   http   ext   

//www.cnblogs.com/shuang121/archive/2012/04/23/2466628.html

 

作用

jquery.validate是jquery旗下的一個驗證框架,借助jquery的優勢,我們可以迅速驗證一些常見的輸入,并且可以自己擴充自己的驗證方法,并且對國際化也有很好的支持。

使用前的布置

說明:需要JQuery版本:1.2.6+

步驟:

要導入相應的jQuery.js與jquery.validate.js文件
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.validate.js" type="text/javascript"></script>

在相應的字段上指定驗證規則
名稱 *<input type="text" name="loginName" class="required">
其中class="required"代表本字段必須要輸入數據

指定要對表單進行驗證
<script type="text/javascript">

$(function(){

$("#testForm").validate();

});

</script>

 

效果如下圖:

 

 

 

 

 

 

 

 

基礎知識

指定驗證規則的方式

把驗證規則寫到字段元素的class屬性中

例:

名稱 * <input type="text" name="loginName" class="required"><br>

密  *  <input type="password" name="password" class="required"><br>

再次輸入 <input type="password" name="password2"

class="{equalTo: ‘[name=password]‘} required"><br>

生日   <input type="text" name="birthday" class="dateISO"><br>

E-mail *<input type="text" name="email" class="email"><br>

PAR(zip)<input type="file" name="resource" class="{accept: ‘zip‘}">

 

說明:

如果使用class="{key:value,…}"的方式,必須引入:jquery.metadata.js

表單字段的name不能重復,否則所配置的驗證不起作用。

調用validate()方法時傳遞字段的驗證規則

$(function() {

$("#testForm").validate({

rules: {

loginName:{

required: true,

minlength: 2

}   ,

password: {

required: true

},

password2: {

equalTo: "input[name=password]"

}

}

});

});

內置的驗證規則

 

 

 

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”)相同

accept: "gif|png|jpg"

輸入擁有合法后綴名的字符串(上傳文件的后綴),多個后綴之間用’|’隔開

maxlength:5               

輸入長度最多是5的字符串(漢字算一個字符)

minlength:3              

輸入長度最小是3的字符串(漢字算一個字符)

rangelength:[5,10]        

輸入長度必須介于 5 和 10 之間的字符串")(漢字算一個字符)

range:[5,10]              

輸入值必須介于 5 和 10 之間

max:5                      

輸入值不能大于5

min:10                    

輸入值不能小于10

 

 

說明:

remote是遠程驗證:比如注冊驗證用戶名是否已被注冊,返回值只能是true(驗證成功)或false(驗證失敗)。在訪問指定的url時,會自動把當前字段的值做為參數(以字段name為key)傳遞過去。

某些屬性值中的引號不能省略,否則出錯。如accept、equalTo等。

 

remote使用時遇到的問題:添加用戶時需要驗證用戶名是否存在,當添加上一個用戶后,在不離開該頁面的情況下,再次添加該用戶名的用戶,validate不能提示該用戶已存在,因為緩存的原因,jquery仍認為該用戶名可用。解決方法是在頁面中添加:$().ready(function(){

$.ajaxSetup ({

cache: false //關閉AJAX相應的緩存

}); // 關閉緩存功能

});

添加

 

修改錯誤信息提示位置:

修改Jquery validate 的錯誤提示位置,把錯誤提示在input內,當獲得鼠標焦點的時候清楚提示信息。 
    具體使用方法: 
var validator = $("#myContainerForm").validate({ 
focusCleanup:true,//clear the error message when the error element get focus again. 
onkeyup:false, 
errorPlacement: function(error, element) {  
showErrorMesssgeDiv(error,element); 
   },   
rules:{ 
       name:{ 
              required: true 
       } 
}, 
messages: { 
       name:{ 
              required:populateErrorMessage($("#errorRequiredMessage").val(),               $("#containerNameTitle").val()) 
       }      

});

自定義驗證規則

除了內置的驗證規則,validation還允許自定義驗證規則。這是通過validation的addMethod()方法實現的,語法 為:

jQuery.validator.addMethod("name",function,message)

其中:

name為驗證規則的名稱

function定義驗證的規則。參數有?。返回值為?。

message是驗證失敗時的提示信息。

指定錯誤提示內容

更改默認的提示內容

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} 的值")

});

個別表單改變提示內容(只對當前表單有效)

方法一:

<input type="file" name="parResource"

class="{required: true, accept: ‘zip‘, messages: {required: ‘請選擇文件‘, accept:‘請選擇正確的文件‘}}">

 

方法二:

$(function() {

$("#testForm").validate({

messages:{

loginName: {

required: "必選字段2"

},

email: {

required: ‘必選字段22‘,

email: "請輸入正確格式的電子郵件2"

}

}

});

});

改變錯誤消息顯示樣式

指定label.error的樣式就可以了,如下:

<style type="text/css">

label.error{

margin-left: 10px;

color: red;

}

</style>

 

說明:label.error指class為error的label元素,如:<label for="resource" class="error">

Validation-jQuery表單驗證插件使用方法,布布扣,bubuko.com

Validation-jQuery表單驗證插件使用方法

標簽:style   class   blog   java   http   ext   

原文地址://www.cnblogs.com/coikeizeon/p/3807201.html

(0)
(0)
   
舉報
評論 一句話評論(0
0條  
登錄后才能評論!
? 2014 吉利平特名人堂 版權所有 京ICP備13008772號-2
迷上了代碼!
游艇会电子游艺app 七乐彩软件免费下载 押庄龙虎有能赢的吗 足彩胜负14场 11运夺金计划软件 重庆时时开奖结果记录 排五走势图带连线图 三公扑克牌作弊 pk10定码计划软件 二十一点手机版 11选五计划软件可靠吗 时时彩 6个平码算下期的平特肖 足球比赛直播 七星彩前4个规律 pk10四码二期必中方法