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

jQuery Validate初步體驗(yàn)(一)

 更新時(shí)間：2015年12月12日 10:02:48   作者：鮮橙  
jQuery 是一個(gè)快速、簡(jiǎn)單的JavaScript library， 它簡(jiǎn)化了HTML 文件的traversing，事件處理、動(dòng)畫(huà)、Ajax 互動(dòng)，從而方便了網(wǎng)頁(yè)制作的快速發(fā)展。 jQuery 是為改變你編寫(xiě)JavaScript 的方式而設(shè)計(jì)的，本文給大家分享jquery validate初步體驗(yàn)(一)，感興趣的朋友一起學(xué)習(xí)吧

jQuery 是一個(gè)快速、簡(jiǎn)單的JavaScript library， 它簡(jiǎn)化了HTML 文件的traversing，事件處理、動(dòng)畫(huà)、Ajax 互動(dòng)，從而方便了網(wǎng)頁(yè)制作的快速發(fā)展。 jQuery 是為改變你編寫(xiě)JavaScript 的方式而設(shè)計(jì)的。

jQuery Validate 插件為表單提供了強(qiáng)大的驗(yàn)證功能，讓客戶(hù)端表單驗(yàn)證變得更簡(jiǎn)單。

但是在學(xué)習(xí)的過(guò)程中，我也遇到了疑惑，網(wǎng)上的很多例子貌似都是依賴(lài)jquery.metadata.js這個(gè)庫(kù)，然后在標(biāo)簽里寫(xiě)成class=”required remote” 這樣的形式，class本身是呈現(xiàn)樣式的，現(xiàn)在被附上各種校驗(yàn)的規(guī)則，看上去有些亂。那如果不依賴(lài)jquery.metadata.js，又該怎么寫(xiě)。

1、只引入jquery.js(具體版本自己選擇)和jquery.validate.js

<!DOCTYPE html>
<html>
<head>
<script src="js/jquery.js"></script>
<script src="js/jquery.validate.js"></script>
<script>
 $().ready(function() {
 $("#registerForm").validate();
 });
</script>
</head>
<body>
 <form id="registerForm" method="get" action="">
 <fieldset>
  <p>
  <label for="cusername">用戶(hù)名</label> 
  <input id="cusername" name="username" type="text" required="true" rangelength="[2,10]">
  </p>
  <p>
  <label for="cpassword">密碼</label>
  <input id="cpassword" name="password" type="password" required="true" minlength="6">
  </p>
  <p>
  <label for="cconfirmpassword">確認(rèn)密碼</label> 
  <input id="cconfirmpassword" name="confirmpassword" type="password" required="true" equalTo="#cpassword">
  </p>
  <p>
  <label for="cemail">郵箱</label> 
  <input id="cemail" name="email" required="true" email="true"> </input>
  </p>
  <p>
  <input type="submit" value="提交">
  </p>
 </fieldset>
 </form>
</body>
</html>

事實(shí)證明，只引入上面的兩個(gè)JS文件也能完成簡(jiǎn)單的表單驗(yàn)證。

2、不過(guò)由于默認(rèn)的提示信息是英文的，為了能有一個(gè)友好的提示，所以，接下來(lái)要做的就是讓提示信息顯示成中文了。

方法一、通過(guò)javascript自定義提示信息。

<!DOCTYPE html>
<html>
<head>
<script src="js/jquery.js"></script>
<script src="js/jquery.validate.js"></script>
<script>
 $().ready(function() {
 $("#registerForm").validate({
  rules : {
  username : {
   required : true,
   rangelength:[2,10]
  },
  password : {
   required : true,
   minlength:6
  },
  confirmpassword : {
   required : true,
   equalTo:"#cpassword"
  },
  email : {
   required : true,
   email : true
  }
  },
  messages : {
  username : {
   required : '請(qǐng)輸入姓名',
   rangelength:'長(zhǎng)度在 {0} 到 {1} 之間'
  },
  password : {
   required : '請(qǐng)輸入密碼',
   minlength:'密碼不能少于 {0}位'
  },
  confirmpassword : {
   required : '請(qǐng)?jiān)俅屋斎朊艽a',
   equalTo:'兩次輸入的密碼不一致'
  },
  email : {
   required :'請(qǐng)輸入郵箱',
   email : '請(qǐng)輸入有效的電子郵件地址'
  }
  }
 });
 });
</script>
</head>
<body>
 <form id="registerForm" method="get" action="">
 <fieldset>
  <p>
  <label for="cusername">用戶(hù)名</label> 
  <input id="cusername" name="username" type="text"/>
  </p>
  <p>
  <label for="cpassword">密碼</label> 
  <input id="cpassword" name="password" type="password"/>
  </p>
  <p>
  <label for="cconfirmpassword">確認(rèn)密碼</label> 
  <input id="cconfirmpassword" name="confirmpassword" type="password"/>
  </p>
  <p>
  <label for="cemail">郵箱</label>
  <input id="cemail" name="email" type="email"/>
  </p>
  <p>
  <input type="submit" value="提交">
  </p>
 </fieldset>
 </form>
</body>
</html>

首先這里有一個(gè)方法調(diào)用： $("#registerForm").validate([options]) ，這是用來(lái)驗(yàn)證選擇的表單，方法的參數(shù)是可選項(xiàng)，可以輸入0個(gè)或者多個(gè)鍵值對(duì)(key/value)，這個(gè)方法是為了處理例如：submit , focus ,  keyup , blur, click 觸發(fā)驗(yàn)證的，對(duì)象是整個(gè)表單的元素，或者是單個(gè)元素，使用 rules 和 messages 定義驗(yàn)證的元素，使用errorClass, errorElement, wrapper, errorLabelContainer, errorContainer, showErrors, success, errorPlacement, highlight, unhighlight, ignoreTitle去控制非法元素的錯(cuò)誤信息顯示。其中rules里也可以輸入0個(gè)或者多個(gè)鍵值對(duì)，他的key對(duì)應(yīng)的是元素的name屬性值，例如username，confirmpassword等等。而他的value里則是一些驗(yàn)證規(guī)則。messages同rules一樣可以輸入0個(gè)或者多個(gè)鍵值對(duì)，他的key也是對(duì)應(yīng)的元素的name屬性值，而他的value里則是驗(yàn)證錯(cuò)誤的提示信息。簡(jiǎn)而言之，rules{}中定義驗(yàn)證規(guī)則的方法。 messages{}中定義錯(cuò)誤輸出。

上面有一點(diǎn)需要注意的就是  equalTo:"#cpassword"，這個(gè)鍵值對(duì)里的value是元素的ID值(如果注意到#號(hào)就應(yīng)該能察覺(jué)到)。

通過(guò)上面的寫(xiě)法，你就可以自定義提示信息了?；蛟S你會(huì)有疑問(wèn)了，難道我每次驗(yàn)證表單的時(shí)候都要重新自定義提示信息嗎？當(dāng)然不是了，你還可以Ctrl C+Ctrl V。這當(dāng)然是玩笑話(huà)。。。不過(guò)，接下來(lái)的方法二會(huì)解決你的疑問(wèn)。

方法二、自定義一份提示信息，然后保存成JS文件。把他作為模板，然后在需要的頁(yè)面直接引入就行。我是從網(wǎng)上下載了一份。

(function( factory ) {
 if ( typeof define === "function" && define.amd ) {
 define( ["jquery", "../jquery.validate"], factory );
 } else {
 factory( jQuery );
 }
}(function( $ ) {
/*
 * Translated default messages for the jQuery validation plugin.
 * Locale: ZH (Chinese, 中文 (Zhōngwén), 漢語(yǔ), 漢語(yǔ))
 */
$.extend($.validator.messages, {
 required: "這是必填字段",
 remote: "請(qǐng)修正此字段",
 email: "請(qǐng)輸入有效的電子郵件地址",
 url: "請(qǐng)輸入有效的網(wǎng)址",
 date: "請(qǐng)輸入有效的日期",
 dateISO: "請(qǐng)輸入有效的日期 (YYYY-MM-DD)",
 number: "請(qǐng)輸入有效的數(shù)字",
 digits: "只能輸入數(shù)字",
 creditcard: "請(qǐng)輸入有效的信用卡號(hào)碼",
 equalTo: "你的輸入不相同",
 extension: "請(qǐng)輸入有效的后綴",
 maxlength: $.validator.format("最多可以輸入 {0} 個(gè)字符"),
 minlength: $.validator.format("最少要輸入 {0} 個(gè)字符"),
 rangelength: $.validator.format("請(qǐng)輸入長(zhǎng)度在 {0} 到 {1} 之間的字符串"),
 range: $.validator.format("請(qǐng)輸入范圍在 {0} 到 {1} 之間的數(shù)值"),
 max: $.validator.format("請(qǐng)輸入不大于 {0} 的數(shù)值"),
 min: $.validator.format("請(qǐng)輸入不小于 {0} 的數(shù)值")
});
}));

頁(yè)面的代碼和JV1.HTML幾乎是一模一樣，只是多引入了一份JS文件。

<!DOCTYPE html>
<html>
<head>
<script src="js/jquery.js"></script>
<script src="js/jquery.validate.js"></script>
<script src="js/messages_zh.js"></script> 
<script>
 $().ready(function() {
 $("#registerForm").validate();
 });
</script>
</head>
<body>
 <form id="registerForm" method="get" action="">
 <fieldset>
  <p>
  <label for="cusername">用戶(hù)名</label> 
  <input id="cusername" name="username" type="text" required="true" rangelength="[2,10]">
  </p>
  <p>
  <label for="cpassword">密碼</label>
  <input id="cpassword" name="password" type="password" required="true" minlength="6">
  </p>
  <p>
  <label for="cconfirmpassword">確認(rèn)密碼</label> 
  <input id="cconfirmpassword" name="confirmpassword" type="password" required="true" equalTo="#cpassword">
  </p>
  <p>
  <label for="cemail">郵箱</label> 
  <input id="cemail" name="email" required="true" email="true"> </input>
  </p>
  <p>
  <input type="submit" value="提交">
  </p>
 </fieldset>
 </form>
</body>
</html>

方法一和方法二并不互斥，兩種方法是可以結(jié)合使用的。你可以先用方法二保存一份比較通用的模板，然后再用方法一去按具體情況來(lái)自定義提示。

以上就是我今天下午學(xué)習(xí)的收獲了。據(jù)說(shuō)在新版本中，又有了新的寫(xiě)法，既不需要依賴(lài)上面提到的jquery.metadata.js庫(kù)，也不需要通過(guò)javascript自定義提示信息，而是在標(biāo)簽里以 data-rule-驗(yàn)證規(guī)則、data-msg-提示信息 這樣的格式來(lái)重新定義。躍躍欲試......

下面是官網(wǎng)提供的默認(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 必須輸入正確格式的日期
(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

好了，摸索了近兩個(gè)小時(shí)，我的第一篇隨筆到這也算是完成了。同時(shí)希望能給大家?guī)?lái)靈感。

下篇文章給大家介紹jQuery Validate初步體驗(yàn)(二)，一起學(xué)習(xí)吧。

相關(guān)文章

最新評(píng)論