腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

軟件下載

android MAC 驅(qū)動(dòng)下載字體下載 DLL

源碼下載

PHP ASP.NET ASP JSP

軟件編程

C# JAVA C 語(yǔ)言 Delphi Android

網(wǎng)絡(luò)編程

PHP ASP.NET ASP JavaScript

在線工具

CSS格式化 JS格式化 Html轉(zhuǎn)化為Js

數(shù)據(jù)庫(kù)

MYSQL MSSQL oracle DB2 MARIADB

CMS

PHPCMS DEDECMS 帝國(guó)CMS WordPress

常用工具

PHP開發(fā)工具 python Photoshop 必備軟件

深入學(xué)習(xí)jQuery Validate表單驗(yàn)證

更新時(shí)間：2016年01月18日 16:15:58 作者：daliu_it

這篇文章主要針對(duì)jQuery Validate表單驗(yàn)證為大家進(jìn)行詳細(xì)介紹，如何在class屬性里面并定義錯(cuò)誤信息的提示，感興趣的小伙伴們可以參考一下

本文實(shí)例介紹了jQuery Validate表單驗(yàn)證，主要是利用jquery.metadata.js將校驗(yàn)規(guī)則直接寫在class屬性里面并定義錯(cuò)誤信息的提示，分享給大家供大家參考，具體內(nèi)容如下

1、添加一個(gè)另外一個(gè)插件jquery.metadata.js 并把校驗(yàn)規(guī)則寫在控件里面。
2、需要改寫觸發(fā)校驗(yàn)的方式。

$("#commentForm").validate({meta: "validate"});

3、詳細(xì)代碼如下：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>jQuery表單驗(yàn)證插件----利用jquery.metadata.js將校驗(yàn)規(guī)則寫到控件中</title>
 <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
 <script src="lib/jquery.validate.js" type="text/javascript"></script>
<script src="lib/jquery.metadata.js" type="text/javascript"></script>
<style type="text/css">
* { font-family: Verdana; font-size: 96%; }
label { width: 10em; float: left; }
label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
p { clear: both; }
.submit { margin-left: 12em; }
em { font-weight: bold; padding-right: 1em; vertical-align: top; }
</style>
 <script type="text/javascript">
 $(document).ready(function(){

   $("#commentForm").validate({meta: "validate"});
  
 });
 </script>
 
</head>
<body>
 

 <form class="cmxform" id="commentForm" method="get" action="">
 <fieldset>
  <legend>jQuery表單驗(yàn)證插件----利用jquery.metadata.js將校驗(yàn)規(guī)則寫到控件中</legend>
  <p>
   <label for="cusername">姓名</label>
   <em>*</em><input id="cusername" name="username" size="25" class="{validate:{required:true, minlength:2}}" />
  </p>
  <p>
   <label for="cemail">電子郵件</label>
   <em>*</em><input id="cemail" name="email" size="25"  class="{validate:{required:true, email:true}}" />
  </p>
  <p>
   <label for="curl">網(wǎng)址</label>
   <em> </em><input id="curl" name="url" size="25" value=""  class="{validate:{url:true}}" />
  </p>
  <p>
   <label for="ccomment">你的評(píng)論</label>
   <em>*</em><textarea id="ccomment" name="comment" cols="22" class="{validate:{required:true}}" ></textarea>
  </p>
  <p>
   <input class="submit" type="submit" value="提交"/>
  </p>
 </fieldset>
 </form>
</body>
</html>

默認(rèn)校驗(yàn)規(guī)則：

(1)required:true 必輸字段
(2)remote:"check.php" 使用ajax方法調(diào)用check.php驗(yàn)證輸入值
(3)email:true 必須輸入正確格式的電子郵件
(4)url:true 必須輸入正確格式的網(wǎng)址
(5)date:true 必須輸入正確格式的日期日期校驗(yàn)ie6出錯(cuò)，慎用
(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: 必須輸入合法的信用卡號(hào)
(10)equalTo:"#field" 輸入值必須和#field相同
(11)accept: 輸入擁有合法后綴名的字符串（上傳文件的后綴）
(12)maxlength:5 輸入長(zhǎng)度最多是5的字符串(漢字算一個(gè)字符)
(13)minlength:10 輸入長(zhǎng)度最小是10的字符串(漢字算一個(gè)字符)
(14)rangelength:[5,10] 輸入長(zhǎng)度必須介于 5 和 10 之間的字符串")(漢字算一個(gè)字符)
(15)range:[5,10] 輸入值必須介于 5 和 10 之間
(16)max:5 輸入值不能大于5
(17)min:10 輸入值不能小于10

默認(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).",
  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}.")
},

4、效果圖如下：

5、注意：
使用 class="{}" 的方式，必須引入包：jquery.metadata.js。
可以使用如下的方法，修改提示內(nèi)容：

class="{required:true,minlength:5,messages:{required:'請(qǐng)輸入內(nèi)容'}}"

在使用 equalTo 關(guān)鍵字時(shí)，后面的內(nèi)容必須加上引號(hào)，代碼如下所示：

class="{required:true,minlength:5,equalTo:'#password'}"

6、直接在class屬性里面定義錯(cuò)誤信息的提示。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery表單驗(yàn)證插件----利用jquery.metadata.js將校驗(yàn)規(guī)則寫到控件中（2）</title>
 <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
 <script src="lib/jquery.validate.js" type="text/javascript"></script>
<script src="lib/jquery.metadata.js" type="text/javascript"></script>
<style type="text/css">
* { font-family: Verdana; font-size: 96%; }
label { width: 10em; float: left; }
label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
p { clear: both; }
.submit { margin-left: 12em; }
em { font-weight: bold; padding-right: 1em; vertical-align: top; }
</style>

 <script type="text/javascript">
 $(document).ready(function(){

   $("#commentForm").validate({meta: "validate"});
  
 });
 </script>
 
</head>
<body>
 

 <form class="cmxform" id="commentForm" method="get" action="">
 <fieldset>
  <legend>jQuery表單驗(yàn)證插件----利用jquery.metadata.js將校驗(yàn)規(guī)則寫到控件中（2）</legend>
  <p>
   <label for="cusername">姓名</label>
   <em>*</em><input id="cusername" name="username" size="25" class="{validate:{required:true, minlength:2, messages:{required:'請(qǐng)輸入姓名', minlength:'請(qǐng)至少輸入兩個(gè)字符'}}}" />
  </p>
  <p>
   <label for="cemail">電子郵件</label>
   <em>*</em><input id="cemail" name="email" size="25"  class="{validate:{required:true, email:true, messages:{required:'請(qǐng)輸入電子郵件', email:'請(qǐng)檢查電子郵件的格式'}}}" />
  </p>
  <p>
   <label for="curl">網(wǎng)址</label>
   <em> </em><input id="curl" name="url" size="25" value=""  class="{validate:{url:true, messages:{url:'請(qǐng)檢查網(wǎng)址的格式'}}}" />
  </p>
  <p>
   <label for="ccomment">你的評(píng)論</label>
   <em>*</em><textarea id="ccomment" name="comment" cols="22" class="{validate:{required:true, messages:{required:'請(qǐng)輸入您的評(píng)論'}}}" ></textarea>
  </p>
  <p>
   <input class="submit" type="submit" value="提交"/>
  </p>
 </fieldset>
 </form>
</body>
</html>

7、效果如下：