欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery插件之validation插件

 更新時間:2017年03月29日 09:01:43   作者:小火柴的藍(lán)色理想  
最常使用javascript的場合就是表單的驗(yàn)證,而jQuery作為一個優(yōu)秀的javascript庫,也提供了一個優(yōu)秀的表單驗(yàn)證插件——Validation。本文將詳細(xì)介紹validation插件。下面跟著小編一起來看下吧

前面的話

最常使用javascript的場合就是表單的驗(yàn)證,而jQuery作為一個優(yōu)秀的javascript庫,也提供了一個優(yōu)秀的表單驗(yàn)證插件——Validation。Validation是歷史最悠久的jQuery插件之一,經(jīng)過了全球范圍內(nèi)不同項目的驗(yàn)證,并得到了許多Web開發(fā)者的好評。本文將詳細(xì)介紹validation插件

概述

jQuery Validate插件為表單提供了強(qiáng)大的驗(yàn)證功能,讓客戶端表單驗(yàn)證變得更簡單,同時提供了大量的定制選項,滿足應(yīng)用程序各種需求。該插件捆綁了一套有用的驗(yàn)證方法,包括 URL 和電子郵件驗(yàn)證,同時提供了一個用來編寫用戶自定義方法的 API。所有的捆綁方法默認(rèn)使用英語作為錯誤信息,且已翻譯成其他 37 種語言

作為一個標(biāo)準(zhǔn)的驗(yàn)證方法庫,Validation擁有以下特點(diǎn):

1、內(nèi)置驗(yàn)證規(guī)則:擁有必填、數(shù)字、E-Mail、URL和信用卡號等19類內(nèi)置驗(yàn)證規(guī)則

2、自定義驗(yàn)證規(guī)則:可以很方便地自定義驗(yàn)證規(guī)則

3、簡單強(qiáng)大的驗(yàn)證信息提示:默認(rèn)了驗(yàn)證信息提示,并提供自定義覆蓋默認(rèn)提示信息的功能

4、實(shí)時驗(yàn)證:可以通過keyup或blur事件觸發(fā)驗(yàn)證

validation作為jQuery的一個插件,使用時需要同jQuery一起引入,注意要先引入jquery

<script src="http://files.cnblogs.com/files/xiaohuochai/jquery-1.10.0.js"></script>
<script src="http://files.cnblogs.com/files/xiaohuochai/jquery.validate-1.13.1.js"></script>

快速上手

validation功能強(qiáng)大且API眾多,如果要快速上手,只要掌握常用功能即可

<form id="demoForm">
 <p>
  <label for="username">用戶名:</label>
  <input type="text" id="username" name="username"/>
 </p>
 <p>
  <label for="password">密碼:</label>
  <input type="password" id="password" name="password"/>
 </p>
 <p>
  <input type="submit" value="登錄"/>
 </p>
</form> 
<script>
$('#demoForm').validate({
 rules:{
  username:{
   required: true,
   minlength: 2,
   maxlength: 10
  },
  password:{
   required: true,
   minlength: 2,
   maxlength:10
  }
 }
})
</script>

上述代碼主要對name為'username'和'password'這兩個input控件進(jìn)行了校驗(yàn),這兩個控件必須填寫內(nèi)容,且字符長度必須在2-10之間

校驗(yàn)規(guī)則

在快速上手的例子中,使用了required、minlength和maxlength這三個校驗(yàn)規(guī)則。實(shí)際上validation的校驗(yàn)規(guī)則有17個之多

序號   規(guī)則      描述
   required:true    必須輸入的字段
   remote:"check.php"  使用 ajax 方法調(diào)用 check.php 驗(yàn)證輸入值
   email:true    必須輸入正確格式的電子郵件
   url:true     必須輸入正確格式的網(wǎng)址
   date:true     必須輸入正確格式的日期,內(nèi)部調(diào)用Date.parse()方法進(jìn)行校驗(yàn)
   dateISO:true    必須輸入正確格式的日期(ISO),如:2009-06-23,1998/01/22
   number:true    必須輸入合法的數(shù)字(負(fù)數(shù),小數(shù))
   digits:true    必須輸入整數(shù)
   creditcard:    必須輸入合法的信用卡號
   equalTo:"#field"   輸入值必須和 #field 相同
   accept:     輸入擁有合法后綴名的字符串(上傳文件的后綴)
   maxlength:5    輸入長度最多是 5 的字符串(漢字算一個字符)
   minlength:10    輸入長度最小是 10 的字符串(漢字算一個字符)
   rangelength:[5,10]  輸入長度必須介于 5 和 10 之間的字符串(漢字算一個字符)
   range:[5,10]    輸入值必須介于 5 和 10 之間
   max:5      輸入值不能大于 5
   min:10     輸入值不能小于 10

下面使用一個更詳細(xì)的例子,對上面的17個規(guī)則進(jìn)行應(yīng)用

<form id="demoForm">
 <p>
  <label for="username">用戶名:</label>
  <input type="text" id="username" name="username"/>
 </p>
 <p>
  <label for="password">密碼:</label>
  <input type="password" id="password" name="password"/>
 </p>
 <p>
  <label for="confirm-password">確認(rèn)密碼</label>
  <input type="password" id="confirm-password" name="confirm-password"/>
 </p>
 <p>
  <label for="email">電子郵件:</label>
  <input id="email" name="email"/>
 </p>
 <p>
  <label for="url">網(wǎng)址:</label>
  <input id="url" name="url"/>
 </p>
 <p>
  <label for="date">生日:</label>
  <input id="date" name="date"/>
 </p>
 <p>
  <label for="num">隨機(jī)數(shù)(0-9):</label>
  <input id="num" name="num"/>
 </p>
 <p>
  <label for="card">信用卡號:</label>
  <input id="card" name="card"/>
 </p>
 <p>
  <input type="submit" value="登錄"/>
 </p>
</form> 
<script>
$('#demoForm').validate({
 rules:{
  username:{
   required: true,
   maxlength: 10
  },
  password:{
   required: true,
   range:[5,10]
  },
  'confirm-password':{
   equalTo: "#password"
  },
  email:{
   email:true
  },
  url:{
   url:true
  },
  date:{
   dateISO:true
  },
  num:{
   min:0,
   max:9
  },
  card:{
   creditcard:true
  }
 }
})
</script>

默認(rèn)提示

由上面的例子中看出,validate的默認(rèn)提示是英文的

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 ).",
 number: "Please enter a valid number.",
 digits: "Please enter only digits.",
 creditcard: "Please enter a valid credit card number.",
 equalTo: "Please enter the same value again.",
 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}." )
}

不過可以將其修改為中文,只要加入以下代碼

$.extend($.validator.messages, {
 required: "這是必填字段",
 remote: "請修正此字段",
 email: "請輸入有效的電子郵件地址",
 url: "請輸入有效的網(wǎng)址",
 date: "請輸入有效的日期",
 dateISO: "請輸入有效的日期 (YYYY-MM-DD)",
 number: "請輸入有效的數(shù)字",
 digits: "只能輸入數(shù)字",
 creditcard: "請輸入有效的信用卡號碼",
 equalTo: "你的輸入不相同",
 extension: "請輸入有效的后綴",
 maxlength: $.validator.format("最多可以輸入 {0} 個字符"),
 minlength: $.validator.format("最少要輸入 {0} 個字符"),
 rangelength: $.validator.format("請輸入長度在 {0} 到 {1} 之間的字符串"),
 range: $.validator.format("請輸入范圍在 {0} 到 {1} 之間的數(shù)值"),
 max: $.validator.format("請輸入不大于 {0} 的數(shù)值"),
 min: $.validator.format("請輸入不小于 {0} 的數(shù)值")
});

使用方式

上面的例子中,validate控件的使用,都是通過使用validate()方法完成的,由于這種方法將HTML結(jié)構(gòu)和javascript邏輯分離,使得代碼更加優(yōu)化

實(shí)際上,還有另一種方法就是通過添加HTML屬性的方式或添加class類名的方式來進(jìn)行驗(yàn)證,類似于HTML5新增的input類控件的功能

由于已經(jīng)將驗(yàn)證規(guī)則添加到HTML元素中,所以調(diào)用validate()方法時,參數(shù)為空

<form id="demoForm">
 <p>
  <label for="username">用戶名:</label>
  <input type="text" id="username" name="username" class="required" minlength="2"/>
 </p>
 <p>
  <label for="email">電子郵件:</label>
  <input id="email" name="email" class="required email"/>
 </p>
 <p>
  <label for="url">網(wǎng)址:</label>
  <input id="url" name="url" class="url"/>
 </p>
 <p>
  <input type="submit" value="登錄"/>
 </p>
</form> 
<script>
$('#demoForm').validate({})
</script>

更改提示

無論是validate插件自帶的英文提示,或者是其擴(kuò)展的中文提示,可能與實(shí)際項目的需求不相符。這時,就需要我們對錯誤提示進(jìn)行更改

而更改錯誤提示的方法也很簡單,只需要使用validate()函數(shù)里的,messages()方法即可。如果某個控件沒有使用messages()方法,則使用默認(rèn)的錯誤提示信息。如下所示

在messages()方法中,{0}代表rules()方法當(dāng)前規(guī)則的屬性值

<form id="demoForm">
 <p>
  <label for="username">用戶名:</label>
  <input type="text" id="username" name="username" />
 </p>
 <p>
  <label for="email">電子郵件:</label>
  <input id="email" name="email" />
 </p>
 <p>
  <label for="url">網(wǎng)址:</label>
  <input id="url" name="url"/>
 </p>
 <p>
  <input type="submit" value="登錄"/>
 </p>
</form> 
<script>
$('#demoForm').validate({
 rules:{
  username:{
   required: true,
   minlength: 2,
   maxlength: 10
  },
  email:{
   required: true,
   email:true
  },
  url:{
   required: true,
   url:true   
  }
 },
 messages:{
  username:{
   required:"請輸入用戶名",
   minlength:"至少輸入{0}個字符"
  },
  email:{
   required:"請輸入郵箱",
   email:"郵箱格式不正確"
  },
  url:{
   required:"請輸入網(wǎng)址",
   url:"網(wǎng)址格式不正確(完整的網(wǎng)址應(yīng)包括http://或https://)"
  }
 }
})
</script>

美化樣式

實(shí)際上,validate插件輸出錯誤信息的方式是通過增加一個label控件實(shí)現(xiàn)的,該label控件的id名為'輸入控件的id名-error',類名為'error',且位于輸入控件的右側(cè)

下表中列出了關(guān)于錯誤信息的相關(guān)屬性的方法

參數(shù)      類型    默認(rèn)值    描述 
errorClass    String  "error"  指定錯誤提示的css類名 
errorElement    String  "label"  用什么標(biāo)簽標(biāo)記錯誤 
errorContainer   Selector    無   顯示或者隱藏驗(yàn)證信息,可以自動實(shí)現(xiàn)有錯誤信息出現(xiàn)時把容器屬性變?yōu)轱@示,無錯誤時隱藏,用處不大。如errorContainer: "#messageBox1, #messageBox2" 
errorLabelContainer Selector   無   把錯誤信息統(tǒng)一放在一個容器里面 
wrapper    String    無   用什么標(biāo)簽再把上邊的errorELement包起來

【成功樣式】

validate插件有一個success()方法,用來設(shè)置要驗(yàn)證的元素通過驗(yàn)證后的動作,如果跟一個字符串,會當(dāng)作一個css類,也可跟一個函數(shù)

success:String,Callback

success: function(label) {
 label.html("&nbsp;").addClass("success");
} 

success: "success"

但實(shí)際上,validate插件只是將label標(biāo)簽添加了一個'success'類,且原先的'error'類并沒有刪除。且經(jīng)過實(shí)際測試,'error'類名無法刪除,刪除之后,每次驗(yàn)證成功時,validate插件都會自動再生成一個label標(biāo)簽

所以,success的效果無法正常使用,這應(yīng)該是validate插件的一個bug

<style>
label.error{background: no-repeat 0 4px;background-image:url('unchecked.gif');margin-left:6px;padding-left:14px;color:red;}
</style>
<body>
<form id="demoForm">
 <p>
  <label for="username">用戶名:</label>
  <input type="text" id="username" name="username" />
 </p>
 <p>
  <label for="email">電子郵件:</label>
  <input id="email" name="email" />
 </p>
 <p>
  <label for="url">網(wǎng)址:</label>
  <input id="url" name="url"/>
 </p>
 <p>
  <input type="submit" value="登錄"/>
 </p>
</form> 
<script>
$('#demoForm').validate({
 rules:{
  username:{
   required: true,
   minlength: 2,
   maxlength: 10
  },
  email:{
   required: true,
   email:true
  },
  url:{
   required: true,
   url:true   
  }
 },
 messages:{
  username:{
   required:"請輸入用戶名",
   minlength:"至少輸入{0}個字符",
   maxlength:"最多輸入{0}個字符"
  },
  email:{
   required:"請輸入郵箱",
   email:"郵箱格式不正確"
  },
  url:{
   required:"請輸入網(wǎng)址",
   url:"網(wǎng)址格式不正確(完整的網(wǎng)址應(yīng)包括http://或https://)"
  }
 } 
})
</script>

自定義驗(yàn)證

由于需求的需要,除提供的默認(rèn)驗(yàn)證規(guī)則外,還需要自定義驗(yàn)證規(guī)則,滿足業(yè)務(wù)需要。這時就需要使用addMethod()方法

【addMethod(】

addMethod(name,method,message)方法用來添加一個新的驗(yàn)證方法

參數(shù) name 是添加的方法的名字。參數(shù) method 是一個函數(shù),接收三個參數(shù) (value,element,param)。value 是元素的值,element 是元素本身,param 是參數(shù)

以驗(yàn)證手機(jī)號為例,手機(jī)號一般是11位,前3位是號段,后8位一般沒有限制。而且,在手機(jī)開頭很可能有0或+86

//開頭
(0|\+86)?
//前3位
13\d|14[579]|15[0-35-9]|17[0135-8]|18\d
//后8位
\d{8}
//手機(jī)號碼
var phone = /^(0|\+86)?(13\d|14[579]|15[0-35-9]|17[0135-8]|18\d)\d{8}$/;
$.validator.addMethod({
 'phone',
 function(value,element,param){
  var reg = /^(0|\+86)?(13\d|14[579]|15[0-35-9]|17[0135-8]|18\d)\d{8}$/;
  return value.test(reg);
 },
 '請輸入正確的手機(jī)號碼'
})
<style>
label.error{margin-left:6px;padding-left:14px;color:red;background: no-repeat 0 4px;background-image:url('data:image/gif;base64,R0lGODlhDgAOAMQAAOpSAPWpgPvf0O5zMPGIUPe+n////+tdEPjJsP718POecO1oIPrUwPzq4Pa0kPKTYPSof////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAUUABEALAAAAAAOAA4AAAVcYCQm0AAAA5SIbHGcMHAULazEJ528AGIsgADDIUsEYAYDopBsAAOmXDLpOkVPB0ETFxskpjeY6fD4GhrJBAF1zCYDBx/jFYi8DoEH9yAqcGM0fTwxMywsUFZ1LCEAOw==');}
</style>
<form id="demoForm">
 <p>
  <label for="phone">手機(jī)號碼:</label>
  <input type="text" id="phone" name="phone" />
 </p>
 <p>
  <input type="button" value="提交">
 </p>
</form> 
<script>
$.validator.addMethod(
 'phone',
 function(value,element,param){
  var reg = /^(0|\+86)?(13\d|14[579]|15[0-35-9]|17[0135-8]|18\d)\d{8}$/;
  return reg.test(value);
 },
 '請輸入正確的手機(jī)號碼'
);
$('#demoForm').validate({
 rules:{
  phone:{
   required: true,
   phone:true   
  }
 },
 messages:{
  phone:{
   required:"請輸入手機(jī)號碼"
  }
 } 
})
</script>

修改觸發(fā)方式

下面的雖然是 boolean 型的,但建議除非要改為 false,否則別亂添加

觸發(fā)方式      類型   描述                         默認(rèn)值
onsubmit     Boolean 提交時驗(yàn)證。設(shè)置為 false 就用其他方法去驗(yàn)證     true
onfocusout    Boolean 失去焦點(diǎn)時驗(yàn)證(不包括復(fù)選框/單選按鈕)         true
onkeyup     Boolean 在 keyup 時驗(yàn)證。                   true
onclick     Boolean 在點(diǎn)擊復(fù)選框和單選按鈕時驗(yàn)證              true
focusInvalid  Boolean 提交表單后,未通過驗(yàn)證的表單會獲得焦點(diǎn)          true
focusCleanup  Boolean 如果是true,當(dāng)未通過驗(yàn)證的元素獲得焦點(diǎn)時,移除錯誤提示 false

遠(yuǎn)程校驗(yàn)

使用 ajax 方式進(jìn)行驗(yàn)證,默認(rèn)會提交當(dāng)前驗(yàn)證的值到遠(yuǎn)程地址,如果需要提交其他的值,可以使用 data 選項

[注意]遠(yuǎn)程地址只能輸出 "true" 或 "false",不能有其他輸出

remote: {
 url: "check-email.php",  //后臺處理程序
 type: "post",    //數(shù)據(jù)發(fā)送方式
 dataType: "json",   //接受數(shù)據(jù)格式 
 data: {      //要傳遞的數(shù)據(jù)
  username: function() {
   return $("#username").val();
  }
 }
}
<style>
label.error{margin-left:6px;padding-left:14px;color:red;background: no-repeat 0 4px;background-image:url('data:image/gif;base64,R0lGODlhDgAOAMQAAOpSAPWpgPvf0O5zMPGIUPe+n////+tdEPjJsP718POecO1oIPrUwPzq4Pa0kPKTYPSof////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAUUABEALAAAAAAOAA4AAAVcYCQm0AAAA5SIbHGcMHAULazEJ528AGIsgADDIUsEYAYDopBsAAOmXDLpOkVPB0ETFxskpjeY6fD4GhrJBAF1zCYDBx/jFYi8DoEH9yAqcGM0fTwxMywsUFZ1LCEAOw==');}
</style>
<form id="demoForm">
  <p>
    <label for="num">請選擇數(shù)字</label>
    <select name="num" id="num">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
  </p>
  <p>
    <input type="button" value="提交">
  </p>
</form> 
<script>
$('#demoForm').validate({
  rules:{
    num:{
      remote:"validateTest.php"
    }
  },
  messages:{
    num:{
      remote:"選擇的數(shù)字不正確"
    }
  }
});
</script>
<?php
function test_input($data) {
  $data = trim($data);
  $data = stripslashes($data);
  $data = htmlspecialchars($data);
  return $data;
}
$data = test_input($_REQUEST['num']);
if($data == '2'){
  echo "true";
}else{
  echo "false";
}
?>

最后

validation插件的功能不只于此,但本文基本上把常用的功能進(jìn)行了詳細(xì)的介紹。如果要了解validation更高級的功能,請移步官方網(wǎng)站

最后介紹一個比較有趣的知識——validate、validation和validator,它們的中文意思是驗(yàn)證。validation插件的js文件名是validate.js,validation插件中最常用的方法就是validate()方法,基本上所有的驗(yàn)證操作都通過該方法進(jìn)行。如果要進(jìn)行自定義驗(yàn)證的話,則需要用到validator對象下的靜態(tài)方法addMethod()

以上就是本文的全部內(nèi)容,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助,同時也希望多多支持腳本之家!

相關(guān)文章

最新評論